关于javascript：使用Jquery检查/取消选中输入框


Check / Uncheck Input Boxes with Jquery

本问题已经有最佳答案，请猛点这里访问。

我一直在浏览帖子，试图找到答案，但运气不好，所以希望有人能给我指出正确的方向。

当我使用下面的代码时，它会选中所有的输入框并取消选中它们。但是，如果我再次单击"全部检查"，则不会全部检查。为什么会这样？

JQuery

1
2
3
4
5
6
7
8
9
  $('document').ready( function() {
    $('.check_boxes').click( function() {
      if ( $(':checkbox').attr('checked')) {
        $(':checkbox').attr('checked', false);
      } else {
        $(':checkbox').attr('checked', true);
      }    
    });
});

HTML

1
<input type="checkbox" class="check_boxes" id="check_all" />
相关讨论

试试这个：

JS

1
2
3
4
5
6
7
8
9
  $('document').ready( function() {
    $('.check_boxes').click( function() {
      if ( $('input:checkbox').prop('checked')) {
        $('input:checkbox').prop('checked', true);
      } else {
        $('input:checkbox').prop('checked', false);
      }    
    });
});

小提琴

相关讨论

实际上，一旦您单击复选框，第一个if始终为true。因此，所有复选框都会被取消选中(包括您单击的复选框)。

我想你想要这种行为：http://jsfiddle.net/vhlmn/18/

1
2
3
4
5
6
7
8
9
$('document').ready( function() {
    $('.check_boxes').click( function() {
      if ( !this.checked ) {
        $('.flip_us :checkbox').attr('checked', false);
      } else {
        $('.flip_us :checkbox').attr('checked', true);
      };    
    });
});

顺便说一句，输入上没有label属性。您应该解决这个问题，除非您使用一些框架来创建实际的label标记。

相关讨论

我想你需要这个简单的代码：

1
2
3
4
5
6
7
8
9
$('document').ready( function() {
$('.check_boxes').click( function() {
  if ( $(':checkbox').prop('checked')) {
    $(':checkbox').prop('checked', true);
  } else {
    $(':checkbox').prop('checked', false);
  }    
 });
});
相关讨论