js選擇框樣式（css選擇框樣式）

本文目錄一覽：

1、javascript 選擇單選框
2、js如何創建那個日期選擇框啊
3、js怎麼設置select的樣式，邊框和三角的顏色
4、如何通過js實現勾選複選框
5、js使用DOM設置單選按鈕、複選框及下拉菜單的方法

javascript 選擇單選框

我只能說，你這邏輯明顯不對，你應該是要為每一個radio控件綁定onclick事件，點擊的時候alert一下。

你的代碼有幾個錯誤。

1、getElementsByName(“radios”); 返回的是一個數組，你不能為一個數組對象綁定onclick事件

2、循環綁定js的onclick事件，需要借用閉包或者函數的方式，否則綁定的onclick事件都會是最後一個對象的方法。

以下是我用閉包的方式解決你的綁定方法，你可以看一下，把你的所有js去掉，頁面不變，js換成如下代碼：

script type=”text/javascript”

var box = document.getElementsByName(“radios”);

// 循環為每個 radio 綁定 onclick 事件

for (var i = 0; i box.length; i++) {

(function() {

var boxone = box[i]

box[i].onclick = function() {

// 如果當前的 radio 被選中，則 alert 他的 value

if (boxone.checked) {

alert(boxone.value);

}

})();

}

/script

js如何創建那個日期選擇框啊

給你推薦一個間斷兼容性比較好JS代碼！

html

head

titleJs日期選擇器並自動加入到輸入框中/title

meta http-equiv=”content-Type” content=”text/html;charset=gb2312″

script type=”text/javascript”

var gMonths=new Array(“一月”,”二月”,”三月”,”四月”,”五月”,”六月”,”七月”,”八月”,”九月”,”十月”,”十一月”,”十二月”);

var WeekDay=new Array(“日”,”一”,”二”,”三”,”四”,”五”,”六”);

var strToday=”今天”;

var strYear=”年”;

var strMonth=”月”;

var strDay=”日”;

var splitChar=”-“;

var startYear=2000;

var endYear=2050;

var dayTdHeight=12;

var dayTdTextSize=12;

var gcNotCurMonth=”#E0E0E0″;

var gcRestDay=”#FF0000″;

var gcWorkDay=”#444444″;

var gcMouseOver=”#79D0FF”;

var gcMouseOut=”#F4F4F4″;

var gcToday=”#444444″;

var gcTodayMouseOver=”#6699FF”;

var gcTodayMouseOut=”#79D0FF”;

var gdCtrl=new Object();

var goSelectTag=new Array();

var gdCurDate=new Date();

var giYear=gdCurDate.getFullYear();

var giMonth=gdCurDate.getMonth()+1;

var giDay=gdCurDate.getDate();

Array.prototype.Push=function(){var startLength=this.length;for(var i=0;iarguments.length;i++){this[startLength+i]=arguments[i];}return this.length;}

String.prototype.HexToDec=function(){return parseInt(this,16);}

String.prototype.cleanBlank=function(){return this.isEmpty()?””:this.replace(/\s/g,””);}

function checkColor(){var color_tmp=(arguments[0]+””).replace(/\s/g,””).toUpperCase();var model_tmp1=arguments[1].toUpperCase();var model_tmp2=”rgb(“+arguments[1].substring(1,3).HexToDec()+”,”+arguments[1].substring(1,3).HexToDec()+”,”+arguments[1].substring(5).HexToDec()+”)”;model_tmp2=model_tmp2.toUpperCase();if(color_tmp==model_tmp1 ||color_tmp==model_tmp2){return true;}return false;}

function $V(){return $(arguments[0]).value;}

function fPopCalendar(evt,popCtrl,dateCtrl){evt.cancelBubble=true;gdCtrl=dateCtrl;fSetYearMon(giYear,giMonth);var point=fGetXY(popCtrl);with($(“calendardiv”).style){left=point.x+”px”;top=(point.y+popCtrl.offsetHeight+1)+”px”;visibility=’visible’;zindex=’99’;position=’absolute’;}$(“calendardiv”).focus();}

function fHideCalendar(){$(“calendardiv”).style.visibility=”hidden”;for(var i=0;igoSelectTag.length;i++){goSelectTag[i].style.visibility=”visible”;}goSelectTag.length=0;}

function Point(iX,iY){this.x=iX;this.y=iY;}

function fPrevMonth(){var iMon=$(“tbSelMonth”).value;var iYear=$(“tbSelYear”).value;if(–iMon1){iMon=12;iYear–;}fSetYearMon(iYear,iMon);}

function fNextMonth(){var iMon=$(“tbSelMonth”).value;var iYear=$(“tbSelYear”).value;if(++iMon12){iMon=1;iYear++;}fSetYearMon(iYear,iMon);}

function fGetXY(aTag){var oTmp=aTag;var pt=new Point(0,0);do{pt.x+=oTmp.offsetLeft;pt.y+=oTmp.offsetTop;oTmp=oTmp.offsetParent;}while(oTmp.tagName.toUpperCase()!=”BODY”);return pt;}

with(document){onclick=fHideCalendar;write(getDateDiv());}

/script

/head

body

input type=”text” style=”border:1px solid #999;” onclick=”fPopCalendar(event,this,this)” onfocus=”this.select()” readonly=”readonly” /

/body

/html

參考資料：

js怎麼設置select的樣式，邊框和三角的顏色

select屬於瀏覽器內置組件，標準CSS無法調整其樣式。

你可以使用div來模擬select。

首先創建一個div /來模擬下拉框。

div class=”mySelect”/div

然後在裏面加上顯示選中值的div /和模擬三角的div /以及下拉列表ul /

div class=”mySelect”

div class=”mySelectValue”/div

div class=”mySelectDropdown”/div

ul class=”mySelectOptions”/ul

/div

你可以用CSS來設置自己喜歡的樣式。

接下來就是用Javascript來控制模擬的下拉框了。（這裡為了方便，使用了jQuery）

// 創建臨時DOM，內容為模擬的下拉框（其中省略的部分為上面寫的html代碼）

var $mySelect = $(‘div class=”mySelect”…/div’);

// 把原來select有的樣式複製到模擬的下拉框上

$mySelect.attr(‘class’, $(‘#select’).attr(‘class’));

$mySelect.attr(‘style’, $(‘#select’).attr(‘style’));

// 把原來select的選項複製到模擬的下拉框中

$(‘#select option’).each(function () {

var value = $(this).attr(‘value’),

name = $(this).html();

$mySelect.find(‘.mySelectOptions’).append(‘li class=”mySelectOption” data-id=”‘ + value + ‘”‘ + name + ‘/li’);

});

// 在模擬下拉框中設置選中的值

$mySelect.find(‘.mySelectValue’).html($(‘#select option:selected’).html());

// 隱藏原有的select

$(‘#select’).hide();

// 給模擬的下拉框綁定事件

$mySelect

.on(‘click’, function (e) {

// 阻止點擊事件向上冒泡

e.stopImmediatePropagation();

// 反轉下拉列表的顯示

$(‘.mySelectOptions’, this).toggle();

// 給原有的select模擬點擊事件

$(‘#select’).trigger(‘click’);

})

.on(‘click’, ‘.mySelectOption’, function (e) {

// 阻止點擊事件向上冒泡

e.stopImmediatePropagation();

// 把選中的值顯示到模擬的下拉框中

$mySelect.find(‘.mySelectValue’).html($(this).html());

// 隱藏下拉列表

$mySelect.find(‘.mySelectOptions’).hide();

// 把選中的值給到原來的select中

$(‘#select’).val($(this).data(‘id’));

// 給原來的select模擬change事件

$(‘#select’).trigger(‘change’);

});

// 基本功能就到此了。其中可以緩存jQuery對象來優化，還能添加焦點事件，鍵盤事件等，按自己的需求慢慢修改吧。

如何通過js實現勾選複選框

js勾選複選框示例i：

//獲取頁面所有checkbox（checkbox的name設置一致）

var items=document.getElementByName(“checkbox的name”);

//遍歷checkbox

for(var i=0;iitems.length;i++){

//當前checkbox實現勾選

items[i].checked=true;

}

js使用DOM設置單選按鈕、複選框及下拉菜單的方法

本文實例講述了js使用DOM設置單選按鈕、複選框及下拉菜單的方法。分享給大家供大家參考。具體實現方法如下：

1.設置單選按鈕

單選按鈕在表單中即input

type=”radio”

/它是一組供用戶選擇的對象，但每次只能選一個。每一個都有checked屬性，當一項選擇為ture時，其它的都變為false.

先貼上一個例子：

複製代碼

代碼如下:script

type=”text/javascript”

function

getChoice()

{

var

oForm

document.forms[“uForm1”];

var

aChoices

oForm.camera;

for

aChoices.length;

i++)

//遍歷整個單選項表

(aChoices[i].checked)

//如果發現了被選中項則退出

break;

alert(“相機品牌是：”

aChoices[i].value);

}

function

setChoice(iNum)

{

var

oForm

document.forms[“uForm1”];

oForm.camera[iNum].checked

true;

}

/script

form

method=”post”

name=”uForm1″

action=”addInfo.aspx”

相機品牌：

input

type=”radio”

name=”camera”

id=”canon”

value=”Canon”

label

for=”canon”Canon/label

input

type=”radio”

name=”camera”

id=”nikon”

value=”Nikon”

label

for=”nikon”Nikon/label

input

type=”radio”

name=”camera”

id=”sony”

value=”Sony”

checked

label

for=”sony”Sony/label

input

type=”radio”

name=”camera”

id=”olympus”

value=”Olympus”

label

for=”olympus”Olympus/label

input

type=”radio”

name=”camera”

id=”samsung”

value=”Samsung”

label

for=”samsung”Samsung/label

input

type=”radio”

name=”camera”

id=”pentax”

value=”Pentax”

label

for=”pentax”Pentax/label

input

type=”radio”

name=”camera”

id=”others”

value=”其它”

label

for=”others”others/label

input

type=”submit”

name=”btnSubmit”

id=”btnSubmit”

value=”Submit”

class=”btn”

input

type=”button”

value=”檢測選中對象”

onclick=”getChoice();”

input

type=”button”

value=”設置為Canon”

onclick=”setChoice(0);”

/form

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/283290.html

js選擇框樣式（css選擇框樣式）

本文目錄一覽：

javascript 選擇單選框

js如何創建那個日期選擇框啊

js怎麼設置select的樣式，邊框和三角的顏色

如何通過js實現勾選複選框

js使用DOM設置單選按鈕、複選框及下拉菜單的方法

相關推薦

發表回復