Summary of common methods for jQuery to operate checkbox [download test source code]

Time:2020-1-18

This paper describes the common methods of jQuery to operate checkbox. To share with you for your reference, as follows:

In the process of system building, it is inevitable to deal with the checkbox check box. In every system, it is an essential dish. The usual operations are as follows:

1. Use jQuery to select all checkboxes
2. Use jQuery to cancel all checkboxes
3. Using jQuery to realize checkbox anti selection
4. Use jQuery to get the values of all selected checkboxes.

Now sum up these common operations in an example, which is convenient for future query. If you don’t want to see the code, you can download the source code to run the test.

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  < title > yihaomen.com jQuery checkbox test < / Title >
  <link rel="stylesheet" type="text/css" href="/static/css/global.css" rel="external nofollow" >
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    $(function() {
       /*Select all or none*/
      $("#controlall").click(function() {
        $('input[name="selectdivision"]').attr("checked",this.checked);
      });
      var $subBox = $("input[name='selectdivision']");
      $subBox.click(function(){
          $("#controlall").attr("checked",$subBox.length == $("input[name='selectdivision']:checked").length ? true : false);
      });
      * * * *
      var reverseBtn=$('#reverseselect');
      reverseBtn.click(function(){
         $("[name='selectdivision']").each(function(){
          if($(this).attr("checked"))
          {
            $(this).removeAttr("checked");
          }
          else
          {
            $(this).attr("checked",'true');
          }
         })
      });
      /*Get all values*/
      var getvalueBtn=$('#getValButton');
      getvalueBtn.click(function(){
          var val_array=[];
                 $("input:checkbox[name=selectdivision]:checked").each(function(){
                   val_array.push(parseInt($(this).val()));
                 });
                 alert(val_array.join());
      });
    });
</script>
</head>
<body>
<div>
  <table style="border:1px dashed #ccc;margin-top:5px;">
     <tr style="background-color:#F9F9F9;">
      <td>< input type = "checkbox" name = "controlall" / > select all / select none</td>
      <td>
         < input type = "button" value = "invert" / >
         < input type = "button" value = "get selected value" / >
        </td>
     </tr>
     <tr>
      <td><input type="checkbox" name="selectdivision" value="1"/></td>
      <td>1</td>
     </tr>
     <tr>
      <td><input type="checkbox" name="selectdivision" value="2"/></td>
      <td>2</td>
     </tr>
     <tr>
      <td><input type="checkbox" name="selectdivision" value="3"/></td>
      <td>3</td>
     </tr>
     <tr>
      <td><input type="checkbox" name="selectdivision" value="4"/></td>
      <td>4</td>
     </tr>
     <tr>
      <td><input type="checkbox" name="selectdivision" value="5"/></td>
      <td>5</td>
     </tr>
     <tr>
      <td><input type="checkbox" name="selectdivision" value="6"/></td>
      <td>6</td>
     </tr>
  </table>
</div>
</body>
</html>

Source code click hereDownload this website

For more information about jQuery, please refer to the following topics: jQuery table operation skill summary, jQuery page element operation skill summary, jQuery common event usage and skill summary, jQuery form operation skill summary, jQuery common plug-ins and usage summary, jQuery extension skill summary and jQuery selector Usage Summary Summary

I hope this article will be helpful to jQuery programming.