js中checkbox的使用教程(取值、赋值、判断是否选中)

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

1.1. checkbox的声明1.1.1. 声明一个checkbox主要是用到上面几个属性1.1.2. 声明一个checkbox主要是用到上面几个属性1.2. checkbox的声明（两种方式）

1.2.1. 第一种1.2.2. 第二种1.3. 如何获取checkbox选中的值（两种方法）

1.3.1. 第一种1.3.2. 第二种1.4. 判断某个checked是否被选中（两种方法）

1.4.1. 第一种1.4.2. 第二种1.4.3. 第三种1.5. 设置复选框是否为选中的代码1.6. 额外：获取选择 radio 的值1.7. 动态添加复选框Checkbox总结1. html checkbox 的使用（取值、赋值、判断是否选中）

1.1. checkbox的声明1.1.1. 声明一个checkbox主要是用到上面几个属性（1）type：代表input的类型，值为checkbox则代表是多选框。

（2）name：设置返回checkbox的名称，也就是说要想我们选中的选项能一起通过form提交，则必须声明为name相同。

（3）value：设置或返回checkbox的value属性的值，我们在提交form表单的时候value代表我们选中的那个checkbox的值。

（4）checked：设置或返回checkbox是否被选中。

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

1.1.2. 声明一个checkbox主要是用到上面几个属性篮球足球排球乒乓球上面我们声明了一个name为ball的多选框，其中第一个value为basketball则如果我们选中，则提交的时候就会将该value值提交到服务器，我们设置第一个checkbox为checked，则默认选中第一项。

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

通过点击文字，来实现点击响应的checkbox。

1.2.1. 第一种直接在每个input中声明一个id，然后后面的文字用lable标签包起来，并使用for属性指向input中的id实现绑定。

篮球足球排球乒乓球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以上代码中，将checkbox放到li和ul中，这样能起到良好的排列效果，UL和li设置的CSS样式如下：#executerDiv {}