7가지 체크박스 상태를 부여하고 하나씩 공유해드렸습니다.
1. 모두 선택
$("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); })
2. 모든 선택 취소(선택 없음)
$("#btn2").click(function(){ $("input[name='checkbox']").removeAttr("checked"); })
3. 홀수를 모두 선택하세요
$("#btn3").click(function(){ $("input[name='checkbox']:odd").attr("checked","true"); })
4. 짝수를 모두 선택하세요
$("#btn6").click(function(){ $("input[name='checkbox']:even").attr("checked","true"); })
5. 역선거
$("#btn4").click(function(){ $("input[name='checkbox']").each(function(){ if($(this).attr("checked")) { $(this).removeAttr("checked"); } else { $(this).attr("checked","true"); } }) })
또는
$("#invert").click(function(){ $("#ruleMessage [name='delModuleID']:checkbox").each(function(i,o){ $(o).attr("checked",!$(o).attr("checked")); }); });
6. 선택한 항목의 값을 가져옵니다
var aa=""; $("#btn5").click(function(){ $("input[name='checkbox']:checkbox:checked").each(function(){ aa+=$(this).val() }) document.write(aa); }) })
7. 선택 항목 탐색
$("input[type=checkbox][checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出 alert($(this).val()); });
다음 예에서는 모두 선택, 선택 반전, 선택된 모든 확인란 가져오기 등의 jquery 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
실행 중인 효과의 스크린샷은 다음과 같습니다.
구체적인 코드는 다음과 같습니다.
위는 jquery에서 체크박스를 사용하는 방법을 보여주는 간단한 예제입니다. 모든 사람의 학습에 도움이 되기를 바랍니다.