js中checkbox的使用教程(取值、賦值、判斷是否選中)
1. html checkbox 的使用（取值、賦值、判斷是否選中）
1.1. checkbox的聲明
<input type="" name="" value="" disabled="none" checked="checked" />
1.1.1. 聲明一個(gè)checkbox主要是用到上面幾個(gè)屬性
（1）type：代表input的類(lèi)型，值為checkbox則代表是多選框。
（2）name：設(shè)置返回checkbox的名稱(chēng)，也就是說(shuō)要想我們選中的選項(xiàng)能一起通過(guò)form提交，則必須聲明為name相同。
（3）value：設(shè)置或返回checkbox的value屬性的值，我們?cè)谔峤籪orm表單的時(shí)候value代表我們選中的那個(gè)checkbox的值。
（4）checked：設(shè)置或返回checkbox是否被選中。
（5）disabled：設(shè)置或返回checkbox是否應(yīng)被禁用。
1.1.2. 聲明一個(gè)checkbox主要是用到上面幾個(gè)屬性
<input type="checkbox" name="ball" value="basketball" checked="checked"/>籃球 <input type="checkbox" name="ball" value="football" />足球 <input type="checkbox" name="ball" value="volleyball" />排球 <input type="checkbox" name="ball" value="badminton" />乒乓球
上面我們聲明了一個(gè)name為ball的多選框，其中第一個(gè)value為basketball則如果我們選中，則提交的時(shí)候就會(huì)將該value值提交到服務(wù)器，我們?cè)O(shè)置第一個(gè)checkbox為checked，則默認(rèn)選中第一項(xiàng)。
1.2. checkbox的聲明（兩種方式）
通過(guò)點(diǎn)擊文字，來(lái)實(shí)現(xiàn)點(diǎn)擊響應(yīng)的checkbox。
1.2.1. 第一種
直接在每個(gè)input中聲明一個(gè)id，然后后面的文字用lable標(biāo)簽包起來(lái)，并使用for屬性指向input中的id實(shí)現(xiàn)綁定。
<form name="ballForm" id="formId"> <input type="checkbox" name="ball" value="basketball" id="1" checked="checked"/><label for="1">籃球</label> <input type="checkbox" name="ball" value="football" id="2"/><label for="2">足球</label> <input type="checkbox" name="ball" value="volleyball" id="3"/><label for="3">排球</label> <input type="checkbox" name="ball" value="badminton" id="4"/><label for="4">乒乓球</label> </form>
1.2.2. 第二種
直接使用lable標(biāo)簽將input和文本一起嵌套起來(lái)。
<label><input name="ball" type="checkbox" value="basketball" checked="checked"/>籃球</label> <label><input name="ball" type="checkbox" value="football" />足球</label> <label><input name="ball" type="checkbox" value="volleyball" />排球</label> <label><input name="ball" type="checkbox" value="badminton" />乒乓球</label>
1.3. 如何獲取checkbox選中的值（兩種方法）
1.3.1. 第一種
使用JQuery獲取
（1）我們獲取單個(gè)checkbox選中的值：
var checks = $("input[name = 'ball']:checked").val();
（2）獲取多個(gè)checkbox選中的值：
function jqueryFun(){
var arr = []; //聲明一個(gè)數(shù)組用來(lái)存放遍歷出來(lái)的checkbox value值
$("input[name='ball']:checked").each(function(i){ //遍歷
arr.push($(this).val()); //將我們遍歷出來(lái)的值push到數(shù)組中
//最后可以提交arr就可以實(shí)現(xiàn)將我們選中的checkbox的value值提交
})
}
1.3.2. 第二種
使用JavaScript來(lái)獲取
function test(){
// 獲取所有的復(fù)選框元素
var obj1 = document.ballForm.ball;
var arr = [];
for(i = 0; i< obj1.length; i++){
if(obj1[i].checked){
arr.push(obj1[i].value);
}
}
}
//最后將我們獲取到的arr提交就可以了
注意：jQuery對(duì)象取值時(shí)：jqueryObj.val()；dom對(duì)象取值時(shí)： domObj.value；
1.4. 判斷某個(gè)checked是否被選中（兩種方法）
在JQuery1.6版本之后，取消復(fù)選框有沒(méi)有選中，我們都是使用prop方法：prop和attr的區(qū)別與使用
1.4.1. 第一種
if ($("#checkbox-id").get(0).checked) {
// do something
}
if ($("#checkbox-id")[0].checked) {
// do something
}
1.4.2. 第二種
if($('#checkbox-id').is(':checked')) {
// do something
}
1.4.3. 第三種
if ($('#checkbox-id').prop('checked')) {
// do something
}
1.5. 設(shè)置復(fù)選框是否為選中的代碼
$("input[name='ball']").prop("checked",true/false);
$("input[name='ball']").prop("checked",$("#1").prop('checked'));
1.6. 額外：獲取選擇 radio 的值
$("input:radio[name='']:checked").val();
1.7. 動(dòng)態(tài)添加復(fù)選框Checkbox
首先，使用JS動(dòng)態(tài)產(chǎn)生Checkbox可以采用如下類(lèi)似的語(yǔ)句：
var checkBox=document.createElement("input");
checkBox.setAttribute("type","checkbox");
checkBox.setAttribute("id",'123456');
但是，這樣產(chǎn)生的checkbox是不帶尾后的文字的，如果需要添加，那么需要使用
document.createTextNode('XXX')
方法來(lái)產(chǎn)生一個(gè)文本節(jié)點(diǎn)，放在checkbox后面
如下代碼，程序產(chǎn)生了一個(gè)checkbox和一個(gè)文本節(jié)點(diǎn)，并將它們放到一個(gè)li對(duì)象中，再將li對(duì)象添加到ul對(duì)象中：
var executerDiv=$("executerDiv");
executerDiv.innerHTML="";
var ul=document.createElement("ul");
for(var i=0;i<tableDatas.length;i++){
var arr=tableDatas[i];
// 加入復(fù)選框
var checkBox=document.createElement("input");
checkBox.setAttribute("type","checkbox");
checkBox.setAttribute("id",arr[0]);
checkBox.setAttribute("name", arr[1]);
var li=document.createElement("li");
li.appendChild(checkBox);
li.appendChild(document.createTextNode(arr[1]));
ul.appendChild(li);
}
executerDiv.appendChild(ul);
//by [url=//www.fzitv.net]//www.fzitv.net[/url]
以上代碼中，將checkbox放到li和ul中，這樣能起到良好的排列效果，UL和li設(shè)置的CSS樣式如下：
#executerDiv {
}
#executerDiv ul {
margin: 0px;
padding: 0px;
list-style-type: none;
vertical-align: middle;
}
#executerDiv li {
float: left;
display: block;
width: 100px;
height: 20px;
line-height: 20px;
font-size: 14px;
font-weight: bold;
color: #666666;
text-decoration: none;
text-align: left;
background: #ffffff;
} 總結(jié)
到此這篇關(guān)于js中checkbox使用(取值、賦值、判斷是否選中)的文章就介紹到這了,更多相關(guān)js checkbox的使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript 表格左右收縮實(shí)現(xiàn)代碼。2009-07-07
這篇文章主要介紹了JS獲取一個(gè)未知DIV高度的方法,涉及javascript針對(duì)頁(yè)面元素屬性的動(dòng)態(tài)操作相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)觸底加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
微信小程序開(kāi)發(fā)之實(shí)現(xiàn)搖色子游戲
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)微信小程序開(kāi)發(fā)一個(gè)簡(jiǎn)單的搖色子游戲，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以和小編一起學(xué)習(xí)一下2023-01-01
這篇文章主要介紹了uniapp 封裝組件的方法,結(jié)合實(shí)例形式分析了uniapp父級(jí)頁(yè)與子頁(yè)面組件封裝與傳參交互相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2023-06-06
showModalDialog在谷歌瀏覽器下會(huì)返回Null的解決方法
showModalDialog的返回值在IE、火狐下面都能夠獲取返回值，但是在谷歌瀏覽器下面會(huì)返回Null，下面有個(gè)不錯(cuò)的解決方法，感興趣的朋友可以參考下2013-11-11
JavaScript使用scroll-to.js實(shí)現(xiàn)頁(yè)面平滑滾動(dòng)到指定位置
scroll-to.js是一個(gè)輕量級(jí)的JavaScript庫(kù),用于實(shí)現(xiàn)頁(yè)面平滑滾動(dòng)到指定位置的功能,它支持自定義動(dòng)畫(huà)時(shí)長(zhǎng)、緩動(dòng)效果等,本文給大家介紹了JavaScript如何使用scroll-to.js實(shí)現(xiàn)頁(yè)面平滑滾動(dòng)到指定位置,需要的朋友可以參考下2026-03-03
js將字符串轉(zhuǎn)成正則表達(dá)式的實(shí)現(xiàn)方法
js將字符串轉(zhuǎn)成正則表達(dá)式的實(shí)現(xiàn)方法。其實(shí)很簡(jiǎn)單哦！需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
這篇文章主要給大家介紹了關(guān)于three.js歐拉角和四元數(shù)的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
MQTT.js?是一個(gè)開(kāi)源的?MQTT 協(xié)議的客戶(hù)端庫(kù)，使用 JavaScript 編寫(xiě)，主要用于 Node.js 和 瀏覽器環(huán)境中，這篇文章主要介紹了MQTT.js 入門(mén)教程,需要的朋友可以參考下2023-04-04