我有以下几点:
$(document).ready(function()
{
$("#select-all-teammembers").click(function() {
$("input[name=recipients\\[\\]]").attr('checked', true);
});
});
我希望id="select-all-teammembers"在选中和未选中之间切换。想法吗?那不是几十行代码吗?
我有以下几点:
$(document).ready(function()
{
$("#select-all-teammembers").click(function() {
$("input[name=recipients\\[\\]]").attr('checked', true);
});
});
我希望id="select-all-teammembers"在选中和未选中之间切换。想法吗?那不是几十行代码吗?
当前回答
你可以这样写:
$(document).ready(function() {
$("#select-all-teammembers").click(function() {
var checkBoxes = $("input[name=recipients\\[\\]]");
checkBoxes.prop("checked", !checkBoxes.prop("checked"));
});
});
在jQuery 1.6之前,当我们只有attr()而没有prop()时,我们习惯这样写:
checkBoxes.attr("checked", !checkBoxes.attr("checked"));
但是prop()在应用于“布尔”HTML属性时具有比attr()更好的语义,所以在这种情况下通常是首选。
其他回答
你也可以这样写
$(function() {
$("#checkbox-toggle").click(function() {
$('input[type=checkbox][name=checkbox_id\\[\\]]').click();
});
});
当用户单击id为“#checkbox-toggle”的按钮时,只需要调用复选框的单击事件。
你可以这样写:
$(document).ready(function() {
$("#select-all-teammembers").click(function() {
var checkBoxes = $("input[name=recipients\\[\\]]");
checkBoxes.prop("checked", !checkBoxes.prop("checked"));
});
});
在jQuery 1.6之前,当我们只有attr()而没有prop()时,我们习惯这样写:
checkBoxes.attr("checked", !checkBoxes.attr("checked"));
但是prop()在应用于“布尔”HTML属性时具有比attr()更好的语义,所以在这种情况下通常是首选。
下面是一个jQuery的方法来切换复选框,而不必选择html5 &标签的复选框:
<div class="checkbox-list margin-auto">
<label class="">Compare to Last Year</label><br>
<label class="normal" for="01">
<input id="01" type="checkbox" name="VIEW" value="01"> Retail units
</label>
<label class="normal" for="02">
<input id="02" type="checkbox" name="VIEW" value="02"> Retail Dollars
</label>
<label class="normal" for="03">
<input id="03" type="checkbox" name="VIEW" value="03"> GP Dollars
</label>
<label class="normal" for="04">
<input id="04" type="checkbox" name="VIEW" value="04"> GP Percent
</label>
</div>
$("input[name='VIEW']:checkbox").change(function() {
if($(this).is(':checked')) {
$("input[name='VIEW']:checkbox").prop("checked", false);
$("input[name='VIEW']:checkbox").parent('.normal').removeClass("checked");
$(this).prop("checked", true);
$(this).parent('.normal').addClass('checked');
}
else{
$("input[name='VIEW']").prop("checked", false);
$("input[name='VIEW']").parent('.normal').removeClass('checked');
}
});
http://www.bootply.com/A4h6kAPshx
您还可以通过执行以下操作来切换复选框。目前使用引导切换复选框。
<link href='https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css' rel='stylesheet'>
<script src='https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js'></script>
<input type='checkbox' id='toggleScheduler' name='toggleScheduler' data-toggle='toggle' data-on='Enabled' data-off='Disabled'
$("#toggleScheduler").bootstrapToggle('on'); // enable toggle checkbox
$("#toggleScheduler").bootstrapToggle('off'); // disable toggle checkbox
如果你想单独切换每个框(或者只有一个框也可以):
我建议使用.each(),因为如果你想要发生不同的事情,它很容易修改,而且仍然相对简短且易于阅读。
例如:
// toggle all checkboxes, not all at once but toggle each one for its own checked state:
$('input[type="checkbox"]').each(function(){ this.checked = ! this.checked });
// check al even boxes, uncheck all odd boxes:
$('input[type="checkbox"]').each(function(i,cb){ cb.checked = (i%2 == 0); });
// set all to checked = x and only trigger change if it actually changed:
x = true;
$('input[type="checkbox"]').each(function(){
if(this.checked != x){ this.checked = x; $(this).change();}
});
顺便说一句…… 不知道为什么每个人都使用.attr()或.prop()来(un)检查东西。
据我所知,是元素。Checked在所有浏览器中都是一样的?