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.dbjr.com.cn]//www.dbjr.com.cn[/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)文章
昨天讀了關(guān)于javascript繼承的幾篇文章，對(duì)原型鏈、construct、this有了新的認(rèn)識(shí)2016-10-10
這篇文章主要為大家詳細(xì)介紹了JS針對(duì)Array的各種操作,如何創(chuàng)建Array,數(shù)組的一些簡(jiǎn)單和基本的操作,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
JavaScript+Java實(shí)現(xiàn)HTML頁(yè)面轉(zhuǎn)為PDF文件保存的方法
借助iText這個(gè)Java庫(kù),我們可以將HTML文件保存為圖片文件進(jìn)而轉(zhuǎn)換成PDF格式,接下來(lái)就來(lái)具體看下JavaScript+Java實(shí)現(xiàn)HTML頁(yè)面轉(zhuǎn)為PDF文件保存的方法2016-05-05
這篇文章主要介紹了純js實(shí)現(xiàn)遮罩層效果，下面就它的原理做下分析，感興趣的朋友可以參考下2014-05-05
想必大家對(duì)窗口抖動(dòng)一詞并不陌生吧，其實(shí)原理很簡(jiǎn)單，下面為大家簡(jiǎn)單介紹下js中時(shí)如何實(shí)現(xiàn)的，喜歡的朋友可以參考下2013-09-09
這篇文章主要介紹了詳解如何在Javascript和Sass之間共享變量，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章介紹了原生JS可拖動(dòng)彈窗效果實(shí)例代碼，有需要的朋友可以參考一下2013-11-11
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)音量控制拖動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
javascript面向?qū)ο笕筇卣髦庋b實(shí)例詳解
這篇文章主要介紹了javascript面向?qū)ο笕筇卣髦庋b,簡(jiǎn)單描述了封裝的基本概念、原理,并結(jié)合實(shí)例形式詳細(xì)分析了javascript面向?qū)ο蟪绦蛟O(shè)計(jì)中封裝的用法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-07-07
本篇文章主要介紹了求js數(shù)組的最大值和最小值的四種方法，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03