选中或取消选中所有启用的复选框

埃利奥·费尔南德斯

我试图在单击“#leg-chkAll”时切换所有启用的复选框,但我遗漏了一些东西!

如果可能,请添加一些注释来解释 javascript 代码。

$(document).ready(function(){
  $('#leg-chkAll).on('click', function () {
		$('div#legend').find('div :checkbox:enabled')					
			.prop('checked', this.checked)
			.find('tbody :checkbox').toggleClass('selected', this.checked);

	});
});
<div id="leg-chkAll">
    <input type="checkbox">
    <span class="leg-des">All</span>
</div>
<div id="legend">
    <div id="leg-evt1">
        <input type="checkbox" class="leg-chk" checked>
        <span class="leg-cod ev-event1">E1</span>
        <span class="leg-des">Event1</span>
        <span class="leg-day">1</span>
    </div>
    <div id="leg-evt2">
        <input type="checkbox" class="leg-chk" checked>
        <span class="leg-cod ev-event2">E2</span>
        <span class="leg-des">Event2</span>
        <span class="leg-day">10</span>
    </div>
    <div id="leg-evt3">
        <input type="checkbox" class="leg-chk" checked>
        <span class="leg-cod ev-event3">E3</span>
        <span class="leg-des">Event3</span>
        <span class="leg-day">3</span>
    </div>
    <div id="leg-evt4">
        <input type="checkbox" class="leg-chk" disabled>
        <span class="leg-cod ev-event4">E4</span>
        <span class="leg-des">Event4</span>
        <span class="leg-day">0</span>
    </div>
    <div id="leg-evt5">
        <input type="checkbox" class="leg-chk" checked>
        <span class="leg-cod ev-event5">E5</span>
        <span class="leg-des">Event5</span>
        <span class="leg-day">6</span>
    </div>
 </div>

问候, 埃利奥·费尔南德斯

两个问题:

  1. 看起来您只是在这里错过了结束单引号:$('#leg-chkAll)

  2. #leg-chkAllid第一个 div 的,但您想听第一个复选框的点击,而不是包含的 div。

如果您将其id放在复选框元素上,它将起作用将第一块 HTML 更改为:

<div>
  <input type="checkbox" id="leg-chkAll" checked>
  <span class="leg-des">All</span>
</div>

然后像这样修改你的jQuery:

$(document).ready(function(){
  $('#leg-chkAll').on('click', function () {
    $('#legend').find(':checkbox:enabled').prop('checked', this.checked)
  });
});

这是一个有效的 jsFiddle:https ://jsfiddle.net/t9w944z9/

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

选中/取消选中所有复选框

选中/取消选中所有复选框

无法取消选中所有复选框

使用 Linq 取消选中所有复选框

选中所有复选框

选中所有复选框

选中所有复选框

当取消选中所有子项父复选框时,也应使用jquery取消选中

如果取消选中所有子复选框,如何取消选中父复选框,反之亦然?

Python PyQt-取消选中所有其他复选框的复选框

Jquery - 单击复选框时取消选中所有复选框

如何使用jQuery使用按钮来选中/取消选中所有复选框?

Javascript选中/取消选中所有复选框,然后将值写入textarea

使用 jquery 和 Bootstrap 选中/取消选中所有复选框的问题

Angular-选中/取消选中所有复选框

使用绑定而不是循环来选中/取消选中所有复选框?

在AngularJs中单击时选中并取消选中所有复选框

一次取消选中/选中所有复选框

如何选中和取消选中所有复选框

使用jQuery选中和取消选中所有复选框

如何使用AngularJS选中/取消选中所有复选框?

Javascript复选框取消选中所有作品,但不选中全部

如果已选中所有其他复选框,请取消选中

如何在单个复选框事件中选中/取消选中所有asp.net复选框?

如果选中了“其他”复选框,则取消选中所有复选框并获取价值

选中所有复选框后取消选中复选框时删除一行

修改复选框中的切换复选框脚本,取消选中所有复选框

选中/取消选中jQuery中的所有复选框

取消选中任何一个孩子时如何取消选中所有复选框