모두 선택하고 모든 확인란을 선택 취소하는 jQuery의 작업-JS 튜토리얼-php.cn

모두 선택하고 모든 확인란을 선택 취소하는 jQuery의 작업

高洛峰

풀어 주다： 2017-02-06 13:09:05

원래의

953명이 탐색했습니다.

먼저 렌더링을 보여드리겠습니다. 괜찮으시다면 계속해서 구현 코드를 참고해주세요.

jQuery对checkbox 复选框的全选全不选反选的操作

HTML 코드:

<body>
<ul id="list">
<li><label><input type="checkbox" name="items" value="1"> 1.时间都去哪儿了</label></li>
<li><label><input type="checkbox" name="items" value="2"> 2.海阔天空</label></li>
<li><label><input type="checkbox" name="items" value="3"> 3.真的爱你</label></li>
<li><label><input type="checkbox" name="items" value="4"> 4.不再犹豫</label></li>
<li><label><input type="checkbox" name="items" value="5"> 5.光辉岁月</label></li>
<li><label><input type="checkbox" name="items" value="6"> 6.喜欢妳</label></li>
</ul>
<input type="checkbox" id="all"> 全选/全不选</br>
<input type="button" value="全选" class="btn" id="selectAll">
<input type="button" value="全不选" class="btn" id="unSelect">
<input type="button" value="反选" class="btn" id="reverse">
<input type="button" value="获得选中的所有值" id="btn" id="getValue">
</body>

로그인 후 복사

jquery 코드:

<script type="text/javascript">
$(function(){
//全选/全不选
$("#all").click(function(){
$("[name=items]:checkbox").attr("checked",this.checked);
});
$("[name=items]:checkbox").click(function(){
var flag=true;
$("[name=items]:checkbox").each(function(){
if(!this.checked){
flag=false;
}
});
$("#all").attr("checked",flag);
})
//全选
$("#selectAll").click(function(){
$("[name=items]:checkbox").each(function(){
$(this).attr("checked",true);
});
});
//全不选
$("#unSelect").click(function(){
$("[name=items]:checkbox").each(function(){
$(this).attr("checked",false);
});
});
//反选
$("#reverse").click(function(){
$("[name=items]:checkbox").each(function(){ //遍历每一个复选框
//$(this).attr("checked",!$(this).attr("checked")); //jQuery方法取复选框的反向值
this.checked=!this.checked; //js方法
});
});
//输出选中的值
$("#btn").click(function(){
var str="你选中的是：\r\n";
$("[name=items]:checkbox:checked").each(function(){
str+=$(this).val()+"\r\n";
});
alert(str);
});
})
</script>

로그인 후 복사

참고: jquery 버전 변경으로 인해 새 버전은 한 번만 클릭할 수 있습니다. 이전 버전은 괜찮지만 새 버전은 attr을 사용하여 선택한 상태를 설정할 수 없습니다. 방법은 js 기본 방법인 this.checked=true/false;

를 사용하는 것입니다. 두 번째 해결책은 attr을 prop으로 바꾸는 것입니다.

위는 모두 선택, 선택 취소, 체크박스 반전을 위해 편집기에서 소개하는 jQuery 작업입니다. 궁금한 점이 있으면 알려주세요. 메시지를 남겨주시면 편집자가 제때에 답변해 드릴 것입니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

체크박스 모두 선택, 선택 해제, 반전 작업에 대한 jQuery 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!