如何使用一个按钮的jQuery选择/取消选择所有复选框？

Question

I would like to to use a single button click to toggle between selecting all check boxes within a particular div/table and deselecting all check boxes. 我想使用一个按钮单击，以在选择特定div /表中的所有复选框与取消选择所有复选框之间切换。 In addition i wanted the link/or button to change names to 'Select All' & ' deselect All'. 另外，我希望链接/按钮将名称更改为“全选”和“取消全选”。 I've seen similar answers using check boxes or two different button clicks but nothing for this. 我已经看到了使用复选框或两次不同的按钮单击的类似答案，但与此无关。 I would to keep it simple and short using jquery. 我会使用jquery使其简单明了。

HTML 的HTML

 <body> <div id="main"> <div id="first"> <h1>Check & Uncheck All Options</h1> <p>Check & Uncheck All Options by Button</p> <input id="checkAll" type="button" value="Check/Uncheck All "> <div class="button"> <input class="first" id="Item 1" name="option1" type="checkbox"> <label class="label1" for="Item 1">Item 1</label> <input class="first" id="Item 2" name="option1" type="checkbox"> <label class="label1" for="Item 2">Item 2</label> <input class="first" id="Item 3" name="option1" type="checkbox"> <label class="label1" for="Item 3">Item 3</label> <input class="first" id="Item 4" name="option1" type="checkbox"> <label class="label1" for="Item 4">Item 4</label> </div> </body>

Answer 1

How about like this: 这样吧：

 $(function() { $(document).on('click', '#checkAll', function() { if ($(this).val() == 'Check All') { $('.button input').prop('checked', true); $(this).val('Uncheck All'); } else { $('.button input').prop('checked', false); $(this).val('Check All'); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="main"> <div id="first"> <h1>Check & Uncheck All Options</h1> <p>Check & Uncheck All Options by Button</p> <input id="checkAll" type="button" value="Check All"> <div class="button"> <input class="first" id="Item 1" name="option1" type="checkbox"> <label class="label1" for="Item 1">Item 1</label> <input class="first" id="Item 2" name="option1" type="checkbox"> <label class="label1" for="Item 2">Item 2</label> <input class="first" id="Item 3" name="option1" type="checkbox"> <label class="label1" for="Item 3">Item 3</label> <input class="first" id="Item 4" name="option1" type="checkbox"> <label class="label1" for="Item 4">Item 4</label> </div> </body>

Answer 2

Have a class that maintains the state of the checkboxes. 有一个维护复选框状态的类。 use that to toggle the checked property of the checkboxes. 使用它来切换复选框的checked属性。

var $checkboxes = $('.first');
var $selectAllCheckbox = $('#checkAll');

$selectAllCheckbox.on('click', function() {

  var $this = $(this);
  var allChecked = true;

  if ($this.hasClass('checked-all')) {
    $this.removeClass('checked-all');
    allChecked = false;
  } else {
    $this.addClass('checked-all');
  }

  $checkboxes.prop('checked', allChecked);
});

// Maintain the state if the checkbox is
// checked individually
$('.first').on('change', function() {
    var isChecked = true;
    $.each($checkboxes, function(i, checkbox) {
        if(!$(checkbox).is(':checked')) {
           isChecked = false; 
        }
    });

     isChecked ? $selectAllCheckbox.addClass('checked-all') 
                : $selectAllCheckbox.removeClass('checked-all');
});

jSFiddle jSFiddle

Answer 3

Try this code: 试试这个代码：

$('#checkAll').click(function(){
    if($( 'input[name="option1"]:checked' ).length>0){//any one is checked
        $('.button input').prop('checked', false);
    }
    else{
        $('.button input').prop('checked', true);
    }
    })


<body>
  <div id="main">
    <div id="first">
      <h1>Check & Uncheck All Options</h1>
      <p>Check & Uncheck All Options by Button</p>
      <input id="checkAll" type="button" value="Check All">
      <div class="button">
        <input class="first" id="Item 1" name="option1" type="checkbox">
        <label class="label1" for="Item 1">Item 1</label>
        <input class="first" id="Item 2" name="option1" type="checkbox">
        <label class="label1" for="Item 2">Item 2</label>
        <input class="first" id="Item 3" name="option1" type="checkbox">
        <label class="label1" for="Item 3">Item 3</label>
        <input class="first" id="Item 4" name="option1" type="checkbox">
        <label class="label1" for="Item 4">Item 4</label>
      </div>
</body>

Answer 4

<script>
    jQuery(document).ready(function(e)
    {
        jQuery(".check_all").click(function()
        {
           jQuery(".all_checked").attr('checked', $(this).is(':checked') ? true : false);
        })
    });
</script>

HTML 的HTML

<input type="checkbox" class="check_all"/>
<input type="checkbox" class="all_checked"/>
<input type="checkbox" class="all_checked"/>
<input type="checkbox" class="all_checked"/>

如何使用一个按钮的jQuery选择/取消选择所有复选框？

问题描述

4 个解决方案

解决方案1
5 已采纳 2016-08-15 17:36:53

解决方案2
0 2016-08-15 17:33:22

解决方案3
0 2016-08-15 17:51:38

解决方案4
0 2017-09-26 11:50:04

如何使用一个按钮的jQuery选择/取消选择所有复选框？

问题描述

4 个解决方案

解决方案1 5 已采纳 2016-08-15 17:36:53

解决方案2 0 2016-08-15 17:33:22

解决方案3 0 2016-08-15 17:51:38

解决方案4 0 2017-09-26 11:50:04

解决方案1
5 已采纳 2016-08-15 17:36:53

解决方案2
0 2016-08-15 17:33:22

解决方案3
0 2016-08-15 17:51:38

解决方案4
0 2017-09-26 11:50:04