Question

我想知道当有人点击整个div层时，jQuery中是否有办法检查/取消选中复选框。就像拥有一个庞大的选择区域一样。

有什么想法吗？

以下是一个示例...我正在努力使复选框可以点击以切换单个复选框，非常多。

<fieldset>
    <div>
        <input type="checkbox" id="Checkbox1" />
    </div>
    Person 1<br />
</fieldset>
<fieldset>
    <div >
        <input type="checkbox" id="Checkbox2" />
    </div>
    Person 2<br />
</fieldset>

Answer 1

也许使用点击的div作为父级。

$(function() {
     $('#divId').toggle(
       function(event) {
         $(this).find('input').attr('checked', true);
       },
       function(event) {
         $(this).find('input').attr('checked', false);
       }
     );
 });

这应该只检查被点击的#divId中的框。

Answer 2

$('fieldset div').bind('click', function() {
    var checkbox = $(this).find(':checkbox');

    checkbox.attr('checked', !checkbox.attr('checked'));
});

Answer 3

如果你想让这个工作既可以点击div并在其中输入，也可以触发更改功能，你可以使用以下代码：

$('input').change(function() {
    console.log('change triggered')
}).click(function(event) {
    event.stopPropagation()
})

$('div').click(function() {
    var c = $this.find('input')
    c.attr('checked', (!c.is(':checked')).change()
})

Answer 4

全部选中复选框：

<input type="checkbox" id="checkAll" /> Check All

你的JS代码：

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

Answer 5

$(function() {
          $('#divId').toggle(
            function(event) {
              $('input[name=foo]').attr('checked', true);
            },
            function(event) {
              $('input[name=foo]').attr('checked', false);
            }
          );
      });

jquery选择div复选框

5 个答案: