我目前正在根据选中的复选框返回一些文本。我添加了一个复选框来自动检查所有国家/地区,但不会返回任何文本。无法弄清楚我做错了什么。
这是代码和 fiddle :
HTML
<p><label><input type="checkbox" id="checkCountries" /> Check Countries</label></p>
<fieldset>
<legend>Loads of checkboxes</legend>
<p><label><input type="checkbox" value="1" /> USA</label></p>
<p><label><input type="checkbox" value="2" /> Canada</label></p>
<p><label><input type="checkbox" value="3" /> UK</label></p>
<p><label><input type="checkbox" value="4" /> Spain</label></p>
<p><label><input type="checkbox" value="10" /> Male</label></p>
<p><label><input type="checkbox" value="11" /> Female</label></p>
</fieldset>
<div class="print"></div>
<div class="print2"></div>
<div class="print3"></div>
<div class="print4"></div>
<div class="print10"></div>
<div class="print11"></div>
和 jQuery
$("#checkCountries").change(function() {
$("input[value='1']").prop('checked', $(this).prop("checked"));
$("input[value='2']").prop('checked', $(this).prop("checked"));
$("input[value='3']").prop('checked', $(this).prop("checked"));
$("input[value='4']").prop('checked', $(this).prop("checked"));
});
$(document).ready(function() {
$('.print').val($(this).is(':checked'));
$('input[value="1"]').change(function() {
if ($(this).is(":checked")) {
$(this).attr("checked", $('.print').text("USA is Checked"));
} else {
$('.print').empty();
}
$('.print').val($(this).is(':checked'));
});
$('input[value="2"]').change(function() {
if ($(this).is(":checked")) {
$(this).attr("checked", $('.print2').text("Canada is Checked"));
} else {
$('.print2').empty();
}
$('.print2').val($(this).is(':checked'));
});
$('input[value="3"]').change(function() {
if ($(this).is(":checked")) {
$(this).attr("checked", $('.print3').text("UK is Checked"));
} else {
$('.print3').empty();
}
$('.print3').val($(this).is(':checked'));
});
$('input[value="4"]').change(function() {
if ($(this).is(":checked")) {
$(this).attr("checked", $('.print4').text("Spain is Checked"));
} else {
$('.print4').empty();
}
$('.print4').val($(this).is(':checked'));
});
$('input[value="10"]').change(function() {
if ($(this).is(":checked")) {
$(this).attr("checked", $('.print10').text("Male is Checked"));
} else {
$('.print10').empty();
}
$('.print10').val($(this).is(':checked'));
});
$('input[value="11"]').change(function() {
if ($(this).is(":checked")) {
$(this).attr("checked", $('.print11').text("Female is Checked"));
} else {
$('.print11').empty();
}
$('.print11').val($(this).is(':checked'));
});
});
最佳答案
您需要显式触发更改事件。
请注意,更改事件仅由用户对该特定元素的操作触发。
我做了什么
仅在更改选中/取消选中
时触发
$("input[value='1']").prop('checked', $(this).prop("checked")).trigger('change');
喜欢https://jsfiddle.net/4ktbjwL2/1/
$("#checkCountries").change(function () {
$("input[value='1']").prop('checked', $(this).prop("checked")).trigger('change');
$("input[value='2']").prop('checked', $(this).prop("checked")).trigger('change');
$("input[value='3']").prop('checked', $(this).prop("checked")).trigger('change');
$("input[value='4']").prop('checked', $(this).prop("checked")).trigger('change');
});
$(document).ready(function() {
$('.print').val($(this).is(':checked'));
$('input[value="1"]').change(function() {
if($(this).is(":checked")) {
$(this).attr("checked", $('.print').text("USA is Checked"));
} else {
$('.print').empty();
}
$('.print').val($(this).is(':checked'));
});
$('input[value="2"]').change(function() {
if($(this).is(":checked")) {
$(this).attr("checked", $('.print2').text("Canada is Checked"));
} else {
$('.print2').empty();
}
$('.print2').val($(this).is(':checked'));
});
$('input[value="3"]').change(function() {
if($(this).is(":checked")) {
$(this).attr("checked", $('.print3').text("UK is Checked"));
} else {
$('.print3').empty();
}
$('.print3').val($(this).is(':checked'));
});
$('input[value="4"]').change(function() {
if($(this).is(":checked")) {
$(this).attr("checked", $('.print4').text("Spain is Checked"));
} else {
$('.print4').empty();
}
$('.print4').val($(this).is(':checked'));
});
$('input[value="10"]').change(function() {
if($(this).is(":checked")) {
$(this).attr("checked", $('.print10').text("Male is Checked"));
} else {
$('.print10').empty();
}
$('.print10').val($(this).is(':checked'));
});
$('input[value="11"]').change(function() {
if($(this).is(":checked")) {
$(this).attr("checked", $('.print11').text("Female is Checked"));
} else {
$('.print11').empty();
}
$('.print11').val($(this).is(':checked'));
});
});
<p><label><input type="checkbox" id="checkCountries"/> Check Countries</label></p>
<fieldset>
<legend>Loads of checkboxes</legend>
<p><label><input type="checkbox" value="1" /> USA</label></p>
<p><label><input type="checkbox" value="2" /> Canada</label></p>
<p><label><input type="checkbox" value="3" /> UK</label></p>
<p><label><input type="checkbox" value="4" /> Spain</label></p>
<p><label><input type="checkbox" value="10" /> Male</label></p>
<p><label><input type="checkbox" value="11" /> Female</label></p>
</fieldset>
<div class="print"></div>
<div class="print2"></div>
<div class="print3"></div>
<div class="print4"></div>
<div class="print10"></div>
<div class="print11"></div>
关于javascript - jQuery - 复选框不更新文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62322513/