jquery_jquery에서 확인란을 사용하는 방법에 대한 간단한 예제 데모

체크박스 목록 전체 선택, 반전, 선택 취소 기능을 구현한 jQuery 기반 코드를 공유합니다. 웹 페이지에서 여러 항목을 선택한 후 일괄 작업이 필요한 시나리오(예: 일괄 삭제)에 적합합니다. , 등.). 이 기사는 예제를 간결한 코드와 결합하고 기본적으로 옵션 선택 작업의 모든 측면을 다루고 있으며 필요한 프런트 엔드 개발 매니아에게 도움이 되기를 바랍니다.

jquery 라이브러리 소개

HTML 구축

일반적으로 삭제 및 편집을 위해 데이터베이스에서 읽은 목록을 일괄 선택해야 합니다. 모든 체크박스를 선택할지 여부를 알아보기 위해 아래에서 시뮬레이션해 보겠습니다. 먼저 html을 생성합니다

<ul id="list"> 
 <li><label><input type="checkbox" value="1"> 1.我是记录来的呢</label></li> 
 <li><label><input type="checkbox" value="2"> 2.哈哈，真的太天真了</label></li> 
 <li><label><input type="checkbox" value="3"> 3.爱上你是我的错吗？</label></li> 
 <li><label><input type="checkbox" value="4"> 4.从开始你就不应用爱上我</label></li> 
 <li><label><input type="checkbox" value="5"> 5.喜欢一个人好难</label></li> 
 <li><label><input type="checkbox" value="6"> 6.你在那里呢</label></li> 
</ul> 
<input type="checkbox" id="all"> 
<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="获得选中的所有值" class="btn" id="getValue">

jQuery 코드

1. 모두 선택하거나 없음을 선택하세요. 모두 선택 버튼 #selectAll 옆에 있는 #all 확인란을 선택하면 목록의 모든 옵션이 선택됩니다. 그렇지 않으면 목록의 모든 옵션이 선택 취소됩니다.

$("#all").click(function(){ 
 if(this.checked){ 
  $("#list :checkbox").attr("checked", true); 
 }else{ 
  $("#list :checkbox").attr("checked", false); 
 } 
});

2. 모두 선택하세요. 모두 선택 버튼 #selectAll을 클릭하거나 모두 선택 버튼 옆의 확인란 #all을 선택하면 모두 선택 옆의 확인란을 포함하여 목록의 모든 옵션이 선택됩니다.

$("#selectAll").click(function () { 
 $("#list :checkbox,#all").attr("checked", true); 
});

3. 없음을 선택하세요. #unSelect 버튼을 클릭하면 #all을 포함한 목록의 모든 옵션이 선택 해제됩니다.

$("#unSelect").click(function () { 
 $("#list :checkbox,#all").attr("checked", false); 
});

4. 카운터 선택. 역선택 버튼 #reverse 을 클릭하면 목록에서 선택한 옵션이 모두 선택 취소되며, 선택되지 않은 옵션도 모두 선택됩니다. 물론 #all 상태에도 주의하셔야 합니다.

$("#reverse").click(function () { 
 $("#list :checkbox").each(function () { 
  $(this).attr("checked", !$(this).attr("checked")); 
 }); 
 allchk(); 
});

코드는 옵션 목록을 순회한 후 확인된 속성을 변경하고 마지막으로 나중에 소개할 allchk() 함수를 호출합니다.

5. 선택한 값을 모두 가져옵니다. 백그라운드 프로그램과 상호작용하려면 목록에서 선택한 항목의 값을 가져와야 하며, 배열을 순회하고 선택한 항목의 값을 배열에 저장한 다음 마지막으로 문자열을 형성해야 합니다. 개발자는 이 문자열을 얻어 해당 작업을 수행할 수 있습니다.

$("#getValue").click(function(){ 
 var valArr = new Array; 
 $("#list :checkbox[checked]").each(function(i){ 
  valArr[i] = $(this).val(); 
 }); 
 var vals = valArr.join(',');//转换为逗号隔开的字符串 
 alert(vals); 
});

선택한 옵션 기능을 개선하기 위해 목록에서 옵션을 클릭할 때 선택한 항목이 모두 선택된 조건을 충족하면 마찬가지로 선택한 항목이 모두 선택되면 그에 따라 #all도 선택됩니다. 미리, 옵션을 선택하고 옵션을 선택 취소하면 #all도 그에 따라 선택이 취소됩니다.

//设置全选复选框 
$("#list :checkbox").click(function(){ 
 allchk(); 
});

allchk() 함수는 전체 선택 상자 #all을 선택해야 하는지 선택 취소해야 하는지 감지하는 데 사용됩니다. 코드를 참조하세요.

function allchk(){ 
 var chknum = $("#list :checkbox").size();//选项总个数 
 var chk = 0; 
 $("#list :checkbox").each(function () { 
  if($(this).attr("checked")==true){ 
   chk++; 
  } 
 }); 
 if(chknum==chk){//全选 
  $("#all").attr("checked",true); 
 }else{//不全选 
  $("#all").attr("checked",false); 
 } 
}

요약

jQuery는 체크박스의 선택 및 선택 취소 상태를 매우 간단하게 처리합니다. attr()을 사용하여 "checked" 속성의 값을 설정합니다. True는 선택 취소되고, false는 선택 취소됩니다. 전체 프로세스의 확인란을 선택하고 선택한 옵션의 값을 가져옵니다. 아래에서는 참조용으로 모든 jQuery 코드를 함께 컴파일했습니다.

$(function () { 
 //全选或全不选 
 $("#all").click(function(){ 
  if(this.checked){ 
   $("#list :checkbox").attr("checked", true); 
  }else{ 
   $("#list :checkbox").attr("checked", false); 
  } 
  }); 
 //全选 
 $("#selectAll").click(function () { 
   $("#list :checkbox,#all").attr("checked", true); 
 }); 
 //全不选 
 $("#unSelect").click(function () { 
   $("#list :checkbox,#all").attr("checked", false); 
 }); 
 //反选 
 $("#reverse").click(function () { 
   $("#list :checkbox").each(function () { 
    $(this).attr("checked", !$(this).attr("checked")); 
   }); 
   allchk(); 
 }); 
  
 //设置全选复选框 
 $("#list :checkbox").click(function(){ 
  allchk(); 
 }); 
 
 //获取选中选项的值 
 $("#getValue").click(function(){ 
  var valArr = new Array; 
  $("#list :checkbox[checked]").each(function(i){ 
   valArr[i] = $(this).val(); 
  }); 
  var vals = valArr.join(','); 
   alert(vals); 
 }); 
}); 
function allchk(){ 
 var chknum = $("#list :checkbox").size();//选项总个数 
 var chk = 0; 
 $("#list :checkbox").each(function () { 
  if($(this).attr("checked")==true){ 
   chk++; 
  } 
 }); 
 if(chknum==chk){//全选 
  $("#all").attr("checked",true); 
 }else{//不全选 
  $("#all").attr("checked",false); 
 } 
}

이 글을 통해 jquery에서 체크박스 사용법을 전반적으로 이해하신 후, 다양한 예제를 통해 체크박스 사용법을 능숙하게 익히시길 바랍니다.