집 >웹 프론트엔드 >JS 튜토리얼 >모든 항목을 선택하고 선택 항목을 반전시킨 후 한 번의 click_jquery로 한 번 실행하는 Jquery 솔루션

모든 항목을 선택하고 선택 항목을 반전시킨 후 한 번의 click_jquery로 한 번 실행하는 Jquery 솔루션

WBOY원래의: 2016-05-16 15:45:011179검색

코드 요구사항: attr을 사용하면 한 번만 실행할 수 있으며, prop을 사용하면 모든 선택과 역선택을 완벽하게 실현하고 선택한 모든 항목을 가져오고 선택한 항목의 텍스트를 문자열로 구성할 수 있습니다.

해결책 1:

코드는 다음과 같습니다.

<html>
<head>
　　<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
　　<input type="checkbox" name="chk_list[]" value="1" />1
　　<input type="checkbox" name="chk_list[]" value="2" />2
　　<input type="checkbox" name="chk_list[]" value="3" />3
　　<input type="checkbox" name="chk_list[]" value="4" />4
　　<input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选
<script type="text/javascript">
　　$("#chk_all").click(function(){
 　　// 使用attr只能执行一次
 　　$("input[name='chk_list[]']").attr("checked", $(this).attr("checked")); 
 　　// 使用prop则完美实现全选和反选
 　　$("input[name='chk_list[]']").prop("checked", $(this).prop("checked"));
　　　　// 获取所有选中的项并把选中项的文本组成一个字符串
 　　var str = '';
 　　$($("input[name='chk_list[]']:checked")).each(function(){
 　　str += $(this).next().text() + ',';
 　　});
 　　alert(str);
　　});
</script>
</body>
</html>

요약:

HTML 요소 자체에 내재된 속성을 처리할 때 prop 메소드를 사용하세요.

HTML 요소의 자체 사용자 정의 DOM 속성을 처리할 때 attr 메소드를 사용하세요.

참고http://www.jb51.net/article/62308.htm

해결책 2:

문제 설명:

$(".chooseall").click(function(){
 if($(".chooseall").attr("checked") == "checked"){
$("input[name='checkbox1']").removeAttr("checked","checked");
 console.log(1);
 }else{
 $("input[name='checkbox1']").attr("checked","checked");
 console.log(2);
 }
});

위 코드를 첫 번째와 두 번째 클릭하면 선택 및 역선택 기능을 구현할 수 있지만 한 번 이후에는 더 이상 작동하지 않습니다.

첫 번째 체크박스를 제외하고 나머지는 Ajax에 의해 동적으로 생성됩니다. 이와 관련이 있나요? Console.log는 클릭할 때마다 1과 2를 번갈아 출력할 수 있지만 중간에 있는 코드는 실행할 수 없습니다.

해결책:

removeAttr 매개변수는 하나만 필요합니다(removeAttr("checked"))
단,

으로 대체하는 것이 좋습니다.

$(".chooseall").click(function(){
 if($(".chooseall").prop("checked") == true){
 $("input[name='checkbox1']").prop("checked", false);
 console.log(1);
 }else{
 $("input[name='checkbox1']").prop("checked", false);
 console.log(2);
 }
});

좀 더 간결하게

$(".chooseall").click(function(){
 var isChecked = $(this).prop("checked");
 $("input[name='checkbox1']").prop("checked", isChecked);
});

위 내용은 한 번의 클릭으로 모두 선택하고 선택 내용을 반전시키는 Jquery 솔루션입니다. 모든 분들께 도움이 되기를 바랍니다.

성명：

이전 기사：jQuery 기본 학습 가이드_jquery다음 기사：jQuery 기본 학습 가이드_jquery

모든 항목을 선택하고 선택 항목을 반전시킨 후 한 번의 click_jquery로 한 번 실행하는 Jquery 솔루션

관련 기사