집 >웹 프론트엔드 >JS 튜토리얼 >jquery는 간단한 전체 선택 및 역 선택 기능을 구현합니다._jquery

jquery는 간단한 전체 선택 및 역 선택 기능을 구현합니다._jquery

WBOY원래의: 2016-05-16 15:22:24998검색

먼저 간단한 예를 살펴보겠습니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery实现CheckBox全选、全不选</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>  <script type="text/javascript">
    $(function() {
      $("#checkAll").click(function() {
        $('input[name="subBox"]').attr("checked",this.checked); 
      });
      var $subBox = $("input[name='subBox']");
      $subBox.click(function(){
        $("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length &#63; true : false);
      });
    });
  </script>
 
</head>
<body>
  <div>
    <input id="checkAll" type="checkbox" />全选
    <input name="subBox" type="checkbox" />项1
    <input name="subBox" type="checkbox" />项2
    <input name="subBox" type="checkbox" />项3
    <input name="subBox" type="checkbox" />项4
  </div>
</body>
</html>

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

jquery 라이브러리 소개

<script src="http://ajax.useso.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

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); 
  } 
}

성명：

이전 기사：Javascript는 입력 파일 업로드 이미지 미리보기 effect_javascript 기술을 구현합니다.다음 기사：Javascript는 입력 파일 업로드 이미지 미리보기 effect_javascript 기술을 구현합니다.

jquery는 간단한 전체 선택 및 역 선택 기능을 구현합니다._jquery

관련 기사