繁体   English   中英

复选框checkall / uncheckall(快速帮助)

[英]Checkbox checkall/uncheckall (Quick help)

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

我认为您需要使用ID,请使用类,请将脚本放在页面的顶部

<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'/>
<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>

您的代码中存在一些缺陷

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 ..请将其更改为class并调用

 $('.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");
         }

      });
  });

您不能在页面上为多个元素提供相同的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);
});

我已经写了一篇有关使用jQuery here 博客链接切换复选框的博客文章

这些情况可能适用于您的情况。 我还注意到,您已经将自己的复选框命名为#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;
        });
    });
});

假设您有一个主复选框#select ,它控制页面上所有其他复选框的状态:

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM