<label><input type="checkbox" class="cb_fruit"/>苹果</label>
<label><input type="checkbox" class="cb_fruit"/>香蕉</label>
<label><input type="checkbox" class="cb_fruit"/>橘子</label>
<script src="jquery-1102minjs"></script>
<script>
//当改变全选值时
$("#cb_all")change(function(){
//如果全选被选中，则选中所有子选项;否则取消选中子选项
if($(this)is(":checked")){
$("cb_fruit")prop("checked",true);
}else{
$("cb_fruit")prop("checked",false);
}
});
//当改变子选项时，需要判断子选项是否全部被选中，如果全部被选中，那么全选被选中；否则全选不被选中
$("cb_fruit")change(function(){
if($("cb_fruit:checked")length==$("cb_fruit")length){
$("#cb_all")prop("checked",true);
}else{
$("#cb_all")prop("checked",false);
}
});
</script>
1、首先用hbuilder编辑器新建一个html文件，里面设置一个input框并设置它的tpye属性为checkbox，设置name属性为checkbox，同时在上方设置一个bgred的样式备用：
2、然后在下方引入Jquery库，首先获取checkbox的dom元素，给它一个点击事件，然后判断checkbox有没有被选中，如果选中就添加上一步设置好的css样式，否则则删除样式：
3、最后来到浏览器，可以看到一个checkbox框，点击将它选中：
4、点击之后checkbox的颜色就改变了：
<input type="checkbox" id="checkbox1"/>$("#checkbox1")on("click", function(){if($(this)is(":checked")){
//选中
}else {
//取消选中
}
});$(document)ready(function() {
$("img")click(function() {
if($("checkbox")prop("checked")) {//先判断该checkbox是否已经被先中。
$("checkbox")attr("checked","");
$(this)removeClass("check");//"check"这个是被激活后的样式。即该被点击的有两个状态，一个是正常，另一个是被激活后，写在两个样式里。
} else {
$("checkbox")attr("checked","checked");
$(this)addClass("check");
}
})
})
JQuery记得用16后的版本。
img 这个是被点击的样式
check 这个是被点击过后的样式
checkbox 这是那个checkbox的样式<!DOCTYPE html>
<html>
<head>
<meta >
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）