我试图在单击“#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>
问候, 埃利奥·费尔南德斯
两个问题:
看起来您只是在这里错过了结束单引号:$('#leg-chkAll)
。
#leg-chkAll
是id
第一个 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] 删除。
我来说两句