JavaScript操作checkbox的方式和操作radio的方式相似，都是利用元素项的checked属性来完成。先获取checkbox元素集合，遍历集合，对集合中的每一项做操作。
这里讲几个常用的checkbox复选框的常见示例。
取值
<body>
<p>
<label for="hobby">Hobby:
<input type="checkbox" name="hobby" value="reading" />阅读
<input type="checkbox" name="hobby" value="climbing" />爬山
<input type="checkbox" name="hobby" value="running" />跑步
<input type="checkbox" name="hobby" value="fishing" />钓鱼
<input type="checkbox" name="hobby" value="cooking" />做饭
</br></br>
<input type="button" value="Get Value" onclick="getValue()" />
</label>
</p>
</body>
|
要获取多选框的值，该怎么处理呢？
跟获取radio单选按钮值的步骤相同。
1 获取复选框元素集合
2 遍历复选框元素
3 将选中的复选框的值拼接出来，返回
function getValue(){
var hobbies = document.getElementsByName("hobby");
var value;
for (i=0; i<hobbies.length; i++){
if (hobbies[i].checked){
if (!value){
value = hobbies[i].value;
} else {
value += "," + hobbies[i].value;
}
}
}
alert(value == undefined ? '' : value);
}
|
这里我们将复选框值拼接出来，之间用“，”分隔，返回的时候，如果没有选中，则返回空字符串，而非JavaScript的默认空值undefined。
全选
全选是复选框中常见的一个操作，选中所有的选项。
全选也是基于checked属性的操作，遍历所有的元素项，将每一个元素项的checked属性都置为true。
<body>
<p>
<label for="hobby">Hobby:
<input type="button" name="selectAll" value="selectAll" onclick="selectAll()" />全选
<input type="button" name="selectOther" value="selectOther" onclick="selectOther()" />反选
</br></br>
<input type="checkbox" name="hobby" value="reading" />阅读
<input type="checkbox" name="hobby" value="climbing" />爬山
<input type="checkbox" name="hobby" value="running" />跑步
<input type="checkbox" name="hobby" value="fishing" />钓鱼
<input type="checkbox" name="hobby" value="cooking" />做饭
</br></br>
<input type="button" value="Get Value" onclick="getValue()" />
</label>
</p>
</body>
|
全选时，首先需要判断当前复选框是否处于全选的状态，然后再适时的全选，或全不选。
判断是否处于全选状态：true，全选；false，非全选
function isSelectAll(){
var hobbies = document.getElementsByName("hobby");
for (i=0; i<hobbies.length; i++){
if (!hobbies[i].checked){
return false;
}
}
return true;
}
|
全选操作
function selectAll(){
var hobbies = document.getElementsByName("hobby");
if (isSelectAll()){
for (i=0; i<hobbies.length; i++){
hobbies[i].checked = false;
}
} else {
for (i=0; i<hobbies.length; i++){
hobbies[i].checked = true;
}
}
}
|
反选
反选的操作即选中那些当前没有被选中的项，并将当前选中的项取消。
function selectOther(){
var hobbies = document.getElementsByName("hobby");
for (i=0; i<hobbies.length; i++){
if (hobbies[i].checked){
hobbies[i].checked = false;
} else {
hobbies[i].checked = true;
}
}
}
|
上面几个例子，都是本人今天没事写的玩的，里面可能有些操作不是很符合客户体验，如果您有更好的方案，可以提出来。但就通过上面的示例，应该能很好的理解checkbox了吧。
其实 checkbox和radio一样，都是基于checked属性，对它们的操作就是对checked属性的操作，技术checked属性就可以了。
The End
大气响应式网络建站服务公司织梦模板
高端大气html5设计公司网站源码
织梦dede网页模板下载素材销售下载站平台（带会员中心带筛选）
财税代理公司注册代理记账网站织梦模板（带手机端）
成人高考自考在职研究生教育机构网站源码(带手机端)
高端HTML5响应式企业集团通用类网站织梦模板(自适应手机端)