简单整理了一下jQuery对单选框和复选框的一些组合操作,这个文章包含对input标签下的radio和checkbox两种类型的checked和disabled等属性的调用覆写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.allok{
font-size:2rem;
text-align: center;
background-color: gold;
}
.allnook{
font-size:2rem;
text-align: center;
background-color: chartreuse;
}
</style>
</head>
<body>
<div class="allok">
<input type="radio" id="boy" name="sex" value="1" >男
<input type="radio" id="girl" name="sex" value="2" >女
</div>
<div class="allnook">
<input type="checkbox" id="first" name="eat" checked disabled>吃
<input type="checkbox" id="second" name="sleep">睡
<input type="checkbox" id="third " name="study">学习
<input type="checkbox" id="fourth" name="work">工作
<input type="checkbox" id="fifth" name="Onlygirlcando">只有女生能做的
<input type="checkbox" id="sixth" name="Onlyboycando">只有男生能做的
<input type="checkbox" id="cancotr" name="canctr" value="1">控制别人
<input type="checkbox" id="becotr" name="bectr" value="2">被控制
</div>
<script src="./jquery.min.js"></script>
<script>
$(':checkbox[name="sleep"]').eq(1).attr("checked",true);
$(':checkbox[name="study"]').eq(0).attr("checked",true);
$(':radio[name="sex"]').eq(0).prop("checked",true);
// $(':radio[name="sex"]').eq(0).prop("checked",true);
$("#third").attr("disabled",true);
$("#fourth").attr("disabled",true);
$("body").on("change","[name='sex']",function () {
if(this.value=="1"){
$("#sixth").attr("disabled",false);
$("#fifth").attr("disabled",true);
$(':checkbox[name="Onlyboycando"]').eq(0).attr("checked",true);
$(':checkbox[name="Onlygirlcando"]').eq(1).attr("checked",false);
}
else {
$("#fifth").attr("disabled",false);
$(':checkbox[name="Onlygirlcando"]').eq(1).attr("checked",false);
$("#sixth").attr("disabled",true);
$(':checkbox[name="Onlygirlcando"]').eq(0).attr("checked",true);
}
})
var a = $("#cancotr").val();
$("body").on("change","[name='canctr']",function () {
alert("被点中了");
if(a==1){
alert("asdasd");
$("#becotr").eq(0).attr("checked",true);
a++;
}else {
$("#becotr").eq(0).attr("checked",false);
a--;
}
})
</script>
</body>
</html>
其中包含操作单选框实现对多选框的一系列的无法选择的操作,单选框给默认值的操作,检查单选框的选择状态实现单选或者多选框的变更.
也包含多选框在选择时,给另一个多选框赋值再点击取消赋值等操作,可以举一反三