全选、全不选跟反选的实现
做一个基本的全选、反选和全不选的按钮选择实现
纯javascript的DOM实现
代码如下:
<body>
<input id="one" name="mycheck" type="checkbox" onclick="checkchose()">篮球
<input id="two" name="mycheck" type="checkbox" onclick="checkchose()">足球
<input id="three" name="mycheck" type="checkbox" onclick="checkchose()">排球
<input id="four" name="mycheck" type="checkbox" onclick="checkchose()">网球
<input id="five" name="mycheck" type="checkbox" onclick="checkchose()">乒乓球
<br />
<button id="allchose" onclick="allchose()">全选</button>
<button id="inverse" onclick=" inverse()" disabled>反选</button>
<button id="nochose" onclick="nochose()" disabled>全不选</button>
<script>
/*全选、反选、不选按钮实现*/
//全选
function allchose(){
var obj = document.getElementsByName("mycheck");
for(var i=0; i<obj.length; i++){
obj[i].checked = true;
}
document.getElementById("inverse").disabled = false;
document.getElementById("nochose").disabled = false;
}
//复选框只要有选中则解除反选和全不选按钮的锁定
function checkchose(){
var obj = document.getElementsByName("mycheck");
var count = obj.length;
var num = 0 ;
for(var i=0; i<count; i++){
if(obj[i].checked == true){
document.getElementById("inverse").disabled = false;
document.getElementById("nochose").disabled = false;
num++;
}
}
}
//全不选
function nochose(){
var obj = document.getElementsByName("mycheck");
for(var i=0; i<obj.length; i++){
obj[i].checked = false;
}
}
//反选
function inverse(){
var obj = document.getElementsByName("mycheck");
if(document.getElementById("allchose").disabled == false){
for(var i=0; i<obj.length; i++){
if(obj[i].checked == false){
obj[i].checked = true;
}else{
obj[i].checked = false;
}
}
}
}
</script>
</body>
---------------------------------------------------------------------------------------------------------------------------------
jQuery 函数库实现
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<title></title>
</head>
<body>
<input id="one" name="mycheck" type="checkbox" >篮球
<input id="two" name="mycheck" type="checkbox" >足球
<input id="three" name="mycheck" type="checkbox" >排球
<input id="four" name="mycheck" type="checkbox" >网球
<input id="five" name="mycheck" type="checkbox" >乒乓球
<br />
<button id="allchose" onclick="allchose()">全选</button>
<button id="inverse" onclick=" inverse()" >反选</button>
<button id="nochose" onclick="nochose()" >全不选</button>
<script>
/*全选、反选、不选按钮实现*/
//全选
function allchose(){
$("input[type='checkbox']").attr("checked", true);
}
//反选
function inverse(){
$.each($("input[type='checkbox']"),function(i){
this.checked = !this.checked;
});
}
//全不选
function nochose(){
$("input[type='checkbox']").attr("checked", false);
}
</script>
</body>