全選和反選(僅供參考)
注:請忽略我的排版O(∩_∩)O哈哈~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全選/反選</title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<style type="text/css">
html,body{ height: 100%; padding: 0; margin: 0; }
#div{ width: 100%;height: 100%; }
.xh{ width: 10%; float: left; }
.sj{ width: 50%;float: left; }
.tealgin{ text-align: center; }
</style>
</head>
<body>
<div id="div">
<div>
<div class="xh">
<input type="checkbox" id="checkId" onclick="check(this.id,'uncheckId')"/>全選/
<input type="checkbox" id="uncheckId" onclick="uncheck(this.id,'checkId')"/>反選
</div>
<div class="sj">標題</div>
</div>
<div style="clear: both;">
<div class="xh tealgin">
<input type="checkbox" name="ids" value="1"/>
</div>
<div class="sj">1</div>
</div>
<div style="clear: both;">
<div class="xh tealgin">
<input type="checkbox" name="ids" value="2"/>
</div>
<div class="sj">2</div>
</div>
<div style="clear: both;">
<div class="xh tealgin">
<input type="checkbox" name="ids" value="3"/>
</div>
<div class="sj">3</div>
</div>
<div style="clear: both;">
<div class="xh tealgin">
<input type="checkbox" name="ids" value="4"/>
</div>
<div class="sj">4</div>
</div>
<div style="clear: both;">
<div class="xh tealgin">
<input type="checkbox" name="ids" value="5"/>
</div>
<div class="sj">5</div>
</div>
<div style="clear: both;">
<div class="xh tealgin">
<input type="checkbox" name="ids" value="6"/>
</div>
<div class="sj">6</div>
</div>
<div style="clear: both;">
<div class="xh tealgin">
<input type="checkbox" name="ids" value="7"/>
</div>
<div class="sj">7</div>
</div>
</div>
<script type="text/javascript">
function check(id,uncheck){
var checkboxId = document.getElementById(id);
var uncheckboxId = document.getElementById(uncheck);
uncheckboxId.checked = false;
var selectList = $("input[name='ids']");
if(checkboxId.checked==true){
for(var i = 0;i<selectList.length;i++){
if(selectList[i].type=="checkbox" ){
selectList[i].checked= true;
}
}
}else{
for(var i=0 ; i < selectList.length; i++){
if(selectList[i].type=="checkbox" ){
selectList[i].checked= false;
}
}
}
}
function uncheck(id,check){
var uncheckboxId = document.getElementById(id);
var checkboxId = document.getElementById(check);
checkboxId.checked = false;
var unSelectList = $("input[name='ids']");
for (var i = 0;i < unSelectList.length;i++) {
if(unSelectList[i].checked == false){
unSelectList[i].checked = true;
}else{
unSelectList[i].checked = false;
}
}
}
$(function(){
$("input[name='ids']").change(function(){
var total = $("input[name='ids']");console.info(total.length)
var checkboxId = document.getElementById("checkId");
var checkedNum = $("input[name='ids']:checked");console.info(checkedNum.length)
if(total.length > checkedNum.length){
if(checkboxId.checked==true){
checkboxId.checked = false;
}
}else{
if(checkboxId.checked==false){
checkboxId.checked = true;
}
}
});
});
</script>
</body>
</html>