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.2.2. 第二种
直接使用lable标签将input和文本一起嵌套起来。
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 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=http://www.jbxue.com]http://www.jbxue.com[/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; }