checkbox 复选框
- HTML
<input type="checbox" value="1" name='city' > 上海
<input type="checbox" value="3" name='city' disabled > 北京 禁用状态
<input type="checkbox" value="2" name='ciyt' checked>广州 默认选中状态
通过Name 来分组，需要初始化化选中状态时 需要添加 checked 属性 无需赋值。
disabled: 设置是元素的启用状态： 可以不需要赋值，或者 disabled='disabled'
- DOM
节点有 HTMLCheckBoxElement 来实现，属于元素标签。 type类型是：checkbox
特殊属性:
checked :设置或者 获取复选框选中状态
checkboxObject.checked=true|false
disabled: 设置或获取复选框的禁用状态
也可通过设置和删除 checked 属性来 设置选中状态
disabled 属性可设置或返回是否禁用 checkbox。
语法
checkboxObject.disabled=true|false
checked,disabled 可以直接设置 true/false， 获取checkbox组的值只能同循环获取。
<html> <head> <meta charset="utf-8" /> <script type="text/javascript"> function check() { //document.getElementById("myCheck").addAttribute("checked","checked"); document.getElementById("myCheck").checked = true; //推荐用法 } function uncheck() { //document.getElementById("myCheck").removeAttribute("checked"); document.getElementById("myCheck").checked = false; } function getcheck() { alert(document.getElementById("myCheck").checked); // 输出 boolean 值 true 或者false } function doDisabled(obj) { var cb = document.getElementById("myCheck"); console.log(cb.disabled); if(cb.disabled) { // cb.disabled=null; cb.disabled = false; cb.removeAttribute("disabled"); obj.value = "禁用checkbox"; } else { //cb.setAttribute("disabled","disabled"); cb.disabled = true; //cb.disabled="disabled"; obj.value = "启用checkbox"; } } //获取选中的值 function getCheckValue() { var cbs=document.getElementsByName("city"); var vlist=new Array(); for(var i=0;i<cbs.length;i++) { if(cbs[i].checked){ vlist.push(cbs[i].value); } } alert(vlist.toString()); } </script> </head> <body> <form> <input type="checkbox" id="myCheck" value="1" name="city" /> 上海 <input type="checkbox" id="myCheck" value="2" name="city" /> 北京 <input type="checkbox" id="myCheck" value="3" name="city" /> 深圳 <input type="checkbox" id="myCheck" value="4" name="city" /> 广州 <input type="button" onclick="check()" value="选定复选框" /> <input type="button" onclick="uncheck()" value="取消选定复选框" /> <input type="button" onclick="getcheck()" value="获取选定复选框状态" /> <input type="button" onclick="doDisabled(this)" value="禁用checkbox" /> <input type="button" onclick="getCheckValue()" value="获取选择的值"/> </form> </body> </html>
jqeury
要用prop 来设置 disabled,checked 属性。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="../javascript/jquery-1.10.2.js"></script> <script type="text/javascript"> function check() { $("#myCheck").prop("checked",true) } function uncheck() { $("#myCheck").prop("checked",false); } function getcheck() { //alert(document.getElementById("myCheck").checked); // 输出 boolean 值 true 或者false alert($("#myCheck").prop("checked")); } function doDisabled(obj) { // debugger; if($("#myCheck").prop("disabled")) { $("#myCheck").prop("disabled",false); obj.value = "禁用checkbox"; }else{ $("#myCheck").prop("disabled",true); obj.value = "启用checkbox"; } } //获取选中的值 function getCheckValue() { var vlist=new Array(); $("input[name='city']:checked").each(function(i,element){ vlist.push($(element).val()); }) alert(vlist.toString()); } </script> </head> <body> <form> <input type="checkbox" id="myCheck" value="1" name="city" /> 上海 <input type="checkbox" id="myCheck" value="2" name="city" /> 北京 <input type="checkbox" id="myCheck" value="3" name="city" /> 深圳 <input type="checkbox" id="myCheck" value="4" name="city" /> 广州 <input type="button" onclick="check()" value="选定复选框" /> <input type="button" onclick="uncheck()" value="取消选定复选框" /> <input type="button" onclick="getcheck()" value="获取选定复选框状态" /> <input type="button" onclick="doDisabled(this)" value="禁用checkbox" /> <input type="button" onclick="getCheckValue()" value="获取选择的值"/> </form> </body> </html>
- 用户体验：
复选框一般都很小，选择和取消选择需要精准点击 单击文本选中对应的复选框 就可以选中对应文本框的效果
利用 label的for属性
<input type="checkbox" id="myCheck" value="1" name="city" /><label for="myCheck">上海</label>
<input type="checkbox" id="myCheck2" value="2" name="city" /> <label for="myCheck1">北京</label>
<input type="checkbox" id="myCheck3" value="3" name="city" /> <label for="myCheck2">深圳</label>
<input type="checkbox" id="myCheck4" value="4" name="city" /><label for="myCheck4">广州</label>