js中checkbox的使用教程(取值、賦值、判斷是否選中)
1. html checkbox 的使用（取值、賦值、判斷是否選中）
1.1. checkbox的聲明
<input type="" name="" value="" disabled="none" checked="checked" />
1.1.1. 聲明一個checkbox主要是用到上面幾個屬性
（1）type：代表input的類型，值為checkbox則代表是多選框。
（2）name：設(shè)置返回checkbox的名稱，也就是說要想我們選中的選項能一起通過form提交，則必須聲明為name相同。
（3）value：設(shè)置或返回checkbox的value屬性的值，我們在提交form表單的時候value代表我們選中的那個checkbox的值。
（4）checked：設(shè)置或返回checkbox是否被選中。
（5）disabled：設(shè)置或返回checkbox是否應(yīng)被禁用。
1.1.2. 聲明一個checkbox主要是用到上面幾個屬性
<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" />乒乓球
上面我們聲明了一個name為ball的多選框，其中第一個value為basketball則如果我們選中，則提交的時候就會將該value值提交到服務(wù)器，我們設(shè)置第一個checkbox為checked，則默認(rèn)選中第一項。
1.2. checkbox的聲明（兩種方式）
通過點擊文字，來實現(xiàn)點擊響應(yīng)的checkbox。
1.2.1. 第一種
直接在每個input中聲明一個id，然后后面的文字用lable標(biāo)簽包起來，并使用for屬性指向input中的id實現(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和文本一起嵌套起來。
<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）我們獲取單個checkbox選中的值：
var checks = $("input[name = 'ball']:checked").val();
（2）獲取多個checkbox選中的值：
function jqueryFun(){
var arr = []; //聲明一個數(shù)組用來存放遍歷出來的checkbox value值
$("input[name='ball']:checked").each(function(i){ //遍歷
arr.push($(this).val()); //將我們遍歷出來的值push到數(shù)組中
//最后可以提交arr就可以實現(xiàn)將我們選中的checkbox的value值提交
})
}
1.3.2. 第二種
使用JavaScript來獲取
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對象取值時：jqueryObj.val()；dom對象取值時： domObj.value；
1.4. 判斷某個checked是否被選中（兩種方法）
在JQuery1.6版本之后，取消復(fù)選框有沒有選中，我們都是使用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. 動態(tài)添加復(fù)選框Checkbox
首先，使用JS動態(tài)產(chǎn)生Checkbox可以采用如下類似的語句：
var checkBox=document.createElement("input");
checkBox.setAttribute("type","checkbox");
checkBox.setAttribute("id",'123456');
但是，這樣產(chǎn)生的checkbox是不帶尾后的文字的，如果需要添加，那么需要使用
document.createTextNode('XXX')
方法來產(chǎn)生一個文本節(jié)點，放在checkbox后面
如下代碼，程序產(chǎn)生了一個checkbox和一個文本節(jié)點，并將它們放到一個li對象中，再將li對象添加到ul對象中：
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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
昨天讀了關(guān)于javascript繼承的幾篇文章，對原型鏈、construct、this有了新的認(rèn)識2016-10-10
這篇文章主要為大家詳細介紹了JS針對Array的各種操作,如何創(chuàng)建Array,數(shù)組的一些簡單和基本的操作,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
JavaScript+Java實現(xiàn)HTML頁面轉(zhuǎn)為PDF文件保存的方法
借助iText這個Java庫,我們可以將HTML文件保存為圖片文件進而轉(zhuǎn)換成PDF格式,接下來就來具體看下JavaScript+Java實現(xiàn)HTML頁面轉(zhuǎn)為PDF文件保存的方法2016-05-05
這篇文章主要介紹了純js實現(xiàn)遮罩層效果，下面就它的原理做下分析，感興趣的朋友可以參考下2014-05-05
想必大家對窗口抖動一詞并不陌生吧，其實原理很簡單，下面為大家簡單介紹下js中時如何實現(xiàn)的，喜歡的朋友可以參考下2013-09-09
這篇文章主要介紹了詳解如何在Javascript和Sass之間共享變量，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章介紹了原生JS可拖動彈窗效果實例代碼，有需要的朋友可以參考一下2013-11-11
這篇文章主要為大家詳細介紹了JS實現(xiàn)音量控制拖動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要介紹了javascript面向?qū)ο笕筇卣髦庋b,簡單描述了封裝的基本概念、原理,并結(jié)合實例形式詳細分析了javascript面向?qū)ο蟪绦蛟O(shè)計中封裝的用法與相關(guān)操作注意事項,需要的朋友可以參考下2019-07-07
本篇文章主要介紹了求js數(shù)組的最大值和最小值的四種方法，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03