javascript - jQuery - 复选框不更新文本
问题描述
我目前正在根据选中的复选框返回几个文本。我添加了一个复选框来自动检查所有国家/地区,但这不会返回任何文本作为回报。无法弄清楚我做错了什么。
这是代码和小提琴:
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'));
});
});
解决方案
您需要显式触发更改事件。
请注意,更改事件仅由用户对该特定元素的操作触发。
我做了什么,
刚换的时候触发check/uncheck
$("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>
推荐阅读
- arrays - 类别关键字过滤器vuejs
- dropbox - 使用 API 列出 Dropbox Paper 文件夹中的文档
- hibernate - Hibernate 在 Glassfish 4.1.2 中的 Maven Web 应用程序中不起作用
- regex - 后缀阻止来自包含两个 @ 符号的地址的电子邮件
- rest - 如何处理来自集成系统的错误否定响应
- react-native - Redux 操作更新状态,但它立即将自身反转为 null?
- react-native - 如何使用 mobx 变量设置 React-Navigation 选项卡导航器的样式
- keyboard - Midnight Commander (mc) 正常的“+”和“-”键与数字键盘上的键一样
- asp.net-core - 使用 swasbuckle 的 Swagger UI 让我在从 Azure 登录重定向时遇到 CORS Origin 问题
- java - 根据条件进行依赖注入