JS Checkbox 使用详解：HTML声明、JQuery与原生JS取值赋值及选中判断

1. HTML 中 checkbox 的使用（取值、赋值、判断是否选中）

1.1. checkbox 的声明

<input type="" name="" value="" disabled="none" checked="checked" />

1.1.1. 声明一个 checkbox 主要涉及以下关键属性

（1）type：定义 input 元素的类型，当值为 checkbox 时表示这是一个多选框。

（2）name：设置返回 checkbox 的名称。若希望选中的选项能通过 form 表单一起提交，必须确保这些复选框的 name 属性值相同。

（3）value：设置或返回 checkbox 的 value 属性值。在提交 form 表单时，value 代表被选中复选框的具体数值。

（4）checked：设置或返回 checkbox 是否处于选中状态。

（5）disabled：设置或返回 checkbox 是否应被禁用。

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 值将发送至服务器。我们将第一个 checkbox 设置为 checked，则默认选中第一项。

1.2. checkbox 的声明（两种方式）

通过点击文字来实现对响应 checkbox 的操作。

1.2.1. 第一种

直接在每个 input 中声明一个 id，随后用 label 标签包裹文字，并使用 for 属性指向 input 中的 id 以实现绑定。

<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. 第二种

直接使用 label 标签将 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 = [];	//声明一个数组用来存放遍历出来的checkbox value值
	$("input[name='ball']:checked").each(function(i){	//遍历
		arr.push($(this).val());	//将我们遍历出来的值push到数组中
		//最后可以提交arr就可以实现将我们选中的checkbox的value值提交
	})
}

1.3.2. 第二种

使用 JavaScript 来获取

function test(){
    // 获取所有的复选框元素
	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 版本之后，取消复选框有没有选中，我们都是使用 prop 方法：prop 和 attr 的区别与使用

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. 设置复选框是否为选中的代码

$("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. 动态添加复选框Checkbox

首先，使用 JS 动态产生 Checkbox 可以采用如下类似的语句：

var checkBox=document.createElement("input");  
checkBox.setAttribute("type","checkbox");  
checkBox.setAttribute("id",'123456');

但是，这样产生的 checkbox 是不带尾后的文字的，如果需要添加，那么需要使用

document.createTextNode('XXX')

方法来产生一个文本节点，放在 checkbox 后面

如下代码，程序产生了一个 checkbox 和一个文本节点，并将它们放到一个 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];  
// 加入复选框  
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.jb51.net]//www.jb51.net[/url]

以上代码中，将 checkbox 放到 li 和 ul 中，这样能起到良好的排列效果，UL 和 li 设置的 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;
}

总结

到此这篇关于 js 中 checkbox 使用(取值、赋值、判断是否选中)的文章就介绍到这了,更多相关 js checkbox 的使用内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

JavaScript 中 Checkbox 的使用教程：取值、赋值与选中状态判断