html：

Question

我想使用jquery或javascript检查/取消选中所有按钮。我尝试过使用网上提供的示例，但没有任何方法可以帮助我。

<li>
    <span class="checkbox unchecked">
          <label for="check1"></label>
          <input type="checkbox" id="select" name="select">
    </span>
</li>

这就是我将所有复选框放在包含一些信息的循环中的方法。我从另一个jsp页面调用了它，并将其放在另一个页面中。我尝试了可能的示例，但无法使用这些代码。

请帮忙。

我试过这个jQuery：

<script language="javascript">
$(function(){
    $("#select").click(function () {
        $('#check1').attr('checked', this.checked);
    });
    // if all checkbox are selected, check the select checkbox
    // and viceversa
    $("#check1").click(function(){
        if($("#check1").length == $("#check1:checked").length) {
            $("#select").attr("checked", "checked");
        } else {
            $("#select").removeAttr("checked");
        }

    });
});
</script>

我不允许更改此复选框的设计和CSS。

Answer 1

我认为你需要这个，而不是使用id请使用class 请将脚本放在页面的头部

<script>
    $(document).ready(function(){
        $(".check").click(function(){
             if($(".checkall:checked").length<=0) {
                 $(".checkall").prop('checked', true);
             } else {
                 $(".checkall").removeAttr("checked");
             }

          });
         });

</script>

和html部分将是

<ul>
    <li>
        <span class="checkbox unchecked">
              <label for="check1"></label>
               <input type="checkbox" id="select" name="selectall" class="checkall">
        </span>
    </li>
    <li>
        <span class="checkbox unchecked">
              <label for="check1"></label>
               <input type="checkbox" id="select" name="selectall" class="checkall">
        </span>
    </li>
    <li>
        <span class="checkbox unchecked">
              <label for="check1"></label>
               <input type="checkbox" id="select" name="selectall" class="checkall">
        </span>
    </li>
</ul>
<input type="button" name="test" value="test" class='check'/>

Answer 2

<a rel="env" href="#select_all">Select All</a>
<a rel="env" href="#select_none">Select None</a>    

<ul id="env">
    <input type="checkbox"> data
    <input type="checkbox"> data
</ul>

<script>
    $("A[href='#select_all']").click( function() {
        $("#" + $(this).attr('rel') + " INPUT[type='checkbox']").attr('checked', true);
        return false;
    });

    $("A[href='#select_none']").click( function() {
        $("#" + $(this).attr('rel') + " INPUT[type='checkbox']").attr('checked', false);
        return false;
    });
</script>

Answer 3

您的代码中存在的一些缺陷

1）选择器错误$("#selectall").click(function () {这选择id selectall输入，但在你的情况下没有ID selectall的元素

这应该做..

 $("#select").click(function () { //this select the input with id select..which is selectall in your case..

2）$('#check1').attr('checked', this.checked);这会找到带有ID check1 ... 的复选框，我认为在你的情况下是多个 ..因此，因为多个元素不能具有相同的ID ..将其更改为上课和打电话

 $('.check1').attr('checked', this.checked);

最终输出..无需更改代码必须

 $(function(){
     $("#select").click(function () {
          $('.check1').attr('checked', this.checked);
     });

     // if all checkbox are selected, check the selectall checkbox
     // and viceversa
     $(".check1").click(function(){
         if($(".check1").length == $(".check1:checked").length) {
             $("#select").attr("checked", "checked");
         } else {
             $("#select").removeAttr("checked");
         }

      });
  });

Answer 4

您不能在页面上为多个元素提供相同的ID。尝试将id更改为class：

我在这里做了一个小提琴： http://jsfiddle.net/zqPXc/

使用的

html：

<ul>
<li> <span class="checkbox unchecked">
      <label for="selectall">selectall</label>
    <input type="checkbox"  name="select"/>
</span>

</li>
<li> <span class="checkbox unchecked">
      <label for="check1"></label>
    <input type="checkbox" class="check1" name="b"/>
</span>

</li>
<li> <span class="checkbox unchecked">
      <label for="check1"></label>
    <input type="checkbox" class="check1" name="b"/>
</span>

</li>
</ul>

使用jQuery：

$(document).on('click', '[name="select"]', function () {
  $('.check1').prop('checked', ($('[name="select"]:checked').length) ? true : false);
});

$(document).on('click', ".check1", function () {
   $('[name="select"]').prop("checked", ($('.check1:checked').length == $('.check1').length) ? true : false);
});

Answer 5

我在这里写了一篇关于使用jQuery切换复选框的博文blog link。

这些内容可能适用于您的情况。我还注意到您已将自己的复选框命名为#checked1，您可能希望将其更改为某个类，而不是您将拥有多个复选框。

$(document).ready(function() {
    /** Toggle child checkboxes based on the #selectall's checked state. */
    $("#selectall").click(function() {
        this.checked = !(this.checked == true);
        var ischecked = !(this.checked == true);

        /** Set the checkboxes. */
        $("#grdWhatever input:checkbox").attr("checked", function() {
            this.checked = ischecked;
        });
    });
});

Answer 6

如果你有一个主复选框#select，它可以控制页面上所有其他复选框的状态：

$('#select').on('click', function(){
    if(this.checked) $('input:checkbox').not($(this)).attr('checked', true);
    else $('input:checkbox').not($(this)).attr('checked', false);
});

复选框checkall / uncheckall（快速帮助）

6 个答案:

html：

使用jQuery：