【问题标题】:How to toggle checkbox selection rather than only selecting?如何切换复选框选择而不仅仅是选择?
【发布时间】:2012-04-09 19:15:24
【问题描述】:

我目前正在使用此 JavaScript 代码 sn-p 一次选择 3 个复选框

$(document).ready(function() {
   var $cbs = $('input:checkbox[name="select[]"]'),
       $links = $('a[name="check"]');

   $links.click(function() {
      var start = $links.index(this) * 3,
          end = start + 3;
      $cbs.slice(start,end).prop("checked",true);
   });
});

目前此代码仅选择复选框,但我想知道是否有人知道如何修改它以打开和关闭复选框选择?

这是我当前代码的示例:“jsfiddle” - 单击 1-3、4-6 链接等以选中复选框。

【问题讨论】:

    标签: javascript jquery


    【解决方案1】:

    使prop("checked", ...) 调用的第二个参数取决于切片中第一个(或其他)复选框的“已选中”状态:

    // ...
    $cbs.slice(start,end).prop("checked", !$cbs.slice(start).prop("checked"));
    

    这是updated jsFiddle

    [编辑] 或者单独更新切片中的每个复选框:

    // ...
    $cbs.slice(start,end).each(function() {
      var $this = $(this);
      $this.prop("checked", !$this.prop("checked"));
    });
    

    http://jsfiddle.net/ShZNF/3/

    【讨论】:

    • 更好的解决方案,我不知道 .removeProp 的破坏力如此之大。
    【解决方案2】:
       $cbs.slice(start,end).each(function() {
           if ($(this).is(":checked")) {
               $(this).removeProp("checked");   
           } else {
               $(this).prop("checked",true);
           }
       });
    

    http://jsfiddle.net/ShZNF/1/

    编辑:Maeric 的解决方案更好。我不知道 removeProp 有这个问题:

    注意:请勿使用此方法删除本机属性,例如 选中、禁用或选中。这将删除该属性 完全,一旦删除,就不能再次添加到元素中。采用 .prop() 将这些属性设置为 false。

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-09-13
    • 2011-12-24
    • 1970-01-01
    • 2019-11-03
    • 2023-02-07
    • 1970-01-01
    • 2017-11-19
    相关资源
    最近更新 更多