>  기사  >  웹 프론트엔드  >  jquery는 모든 선택, 역선택을 구현하고 선택된 모든 checkboxes_jquery를 얻습니다.

jquery는 모든 선택, 역선택을 구현하고 선택된 모든 checkboxes_jquery를 얻습니다.

WBOY
WBOY원래의
2016-05-16 15:28:261470검색

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 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
실행 중인 효과의 스크린샷은 다음과 같습니다.

구체적인 코드는 다음과 같습니다.

 
 
无标题页 
 
 
 
 

checkbox1 checkbox2 checkbox3 checkbox4 checkbox5 checkbox6 checkbox7 checkbox8

위는 jquery에서 체크박스를 사용하는 방법을 보여주는 간단한 예제입니다. 모든 사람의 학습에 도움이 되기를 바랍니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.