利用jQuery實現全選、全不選、反選(checkBox)
阿新 • • 發佈：2018-02-06
utf body type charset his all set htm script <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-1.8.3.js"></script>
</head>
<body>
<input type="checkBox" class="all">全選/全不選
<br>
<input type="checkBox" class="un">反選
<div id="main">
<input type="checkBox">籃球
<br>
<input type="checkBox">羽毛球
<br>
<input type="checkBox">乒乓球
<br>
<input type="checkBox">足球
<br>
<input type="checkBox">橄欖球
<br>
<input type="checkBox">棒球
</body>
<script type="text/javascript">
// 全選和全不選舉
$(‘.all‘).click(function(){
$(‘#main input‘).attr(‘checked‘,this.checked);
});
// 反選
$(‘.un‘).click(function(){
$(‘#main input‘).each(function(){
this.checked=!this.checked; // 進行反選
});
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-1.8.3.js"></script>
</head>
<body>
<input type="checkBox" class="all">全選/全不選
<br>
<input type="checkBox" class="un">反選
<div id="main">
<input type="checkBox">籃球
<br>
<input type="checkBox">羽毛球
<br>
<input type="checkBox">乒乓球
<br>
<input type="checkBox">足球
<br>
<input type="checkBox">橄欖球
<br>
<input type="checkBox">棒球
</body>
<script type="text/javascript">
// 全選和全不選舉
$(‘.all‘).click(function(){
$(‘#main input‘).attr(‘checked‘,this.checked);
});
// 反選
$(‘.un‘).click(function(){
$(‘#main input‘).each(function(){
this.checked=!this.checked; // 進行反選
});
});
</script>
</html>
利用jQuery實現全選、全不選、反選(checkBox)