复选框不根据单选按钮值更改。
我有两个单选按钮和一个复选框的web应用程序。
场景:根据单选按钮值，它应该更改复选框选中的状态。
Html代码
<div class="form-group">
<label>Is Main Meal</label>
<div class="radio">
<label>
<input type="radio" name="inputMeal" value="1" checked> Main Meal
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="inputMeal" value="0"> Sub Meal
</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="chkIsPricing"> Is Pricing
</label>
</div>
</div>Jquery代码
$('input[name="inputMeal"]').on('change', function () {
var val = $("input[name='inputMeal']:checked").val();
if (val == "0") {
$('input[name="chkIsPricing"]').attr('checked', true);
} else {
$('input[name="chkIsPricing"]').attr('checked', false);
}
});这在前2次点击时效果很好。
步骤1:单击“子餐”单选按钮，复选框设置为“选中状态”。(成功)
步骤2:单击“主餐”单选按钮，复选框设置为未选中状态(成功)。
步骤3:再次单击“子餐”单选按钮，复选框保持未选中状态。(失败)
每当我不时地单击两个单选按钮时，复选框仍保持未选中状态。我可以知道代码中的问题在哪里吗？我想知道的是，在前两次单击(更改单选按钮)中，将给出成功的场景，在此之后，复选框不会根据单选按钮的值进行更改。
附加信息
jQuery-2.1.4
HTML5回答 4
Stack Overflow用户
发布于 2018-05-12 06:47:40
用道具代替阿塔尔
$('input[name="inputMeal"]').on('change', function () {
var val = $("input[name='inputMeal']:checked").val();
if (val == false) {
$('input[name="chkIsPricing"]').prop('checked', true);
} else {
$('input[name="chkIsPricing"]').prop('checked', false);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label>Is Main Meal</label>
<div class="radio">
<label>
<input type="radio" name="inputMeal" value="1" checked> Main Meal
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="inputMeal" value="0"> Sub Meal
</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="chkIsPricing"> Is Pricing
</label>
</div>
</div>
Stack Overflow用户
发布于 2018-05-12 06:51:34
以下是另一个实现：
$("input[type=radio][name='inputMeal']").on("change", function() {
switch($(this).val()) {
case '0':
$('input[name="chkIsPricing"]').prop('checked', true);
break;
case '1':
$('input[name="chkIsPricing"]').prop('checked', false);
break;
}
});Stack Overflow用户
发布于 2018-05-12 06:54:56
使用.attr()，可以在DOM树中设置属性值。根据浏览器、浏览器版本和jQuery版本(特别是1.6)，这并不总是具有预期的效果。
使用.prop()，您可以操作该属性(在本例中，为“checked”)。我强烈建议在您的情况下使用.prop()，因此以下内容将正确切换：
$('input[name="chkIsPricing"]').prop('checked', true);JsFiddle：https://jsfiddle.net/c7qn4k9g/1/
有关更多信息，请参阅文档 of .prop()。
https://stackoverflow.com/questions/50303588
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号