0

我想要一个使用 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。

4

6 回答 6

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'/>
于 2013-01-28T08:13:11.860 回答
0 
<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>
于 2013-01-28T07:20:00.703 回答
0

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

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

      });
  });
于 2013-01-28T07:26:38.637 回答
0

您不能为页面上的多个元素提供相同的 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);
});
于 2013-01-28T07:28:26.440 回答
0

我写了一篇关于使用 jQuery here 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;
        });
    });
});
于 2013-01-28T07:28:45.110 回答
0

前提是您有一个主复选框#select来控制页面上所有其他复选框的状态：

$('#select').on('click', function(){
    if(this.checked) $('input:checkbox').not($(this)).attr('checked', true);
    else $('input:checkbox').not($(this)).attr('checked', false);
});
于 2013-01-28T07:28:51.450 回答