复选框属性选中为真，但不显示勾号

Posted 2023-05-08

【中文标题】复选框属性选中为真，但不显示勾号

【英文标题】：Check box attributes checked is true, but tick is not shown

【发布时间】：2013-07-04 00:38:22

【问题描述】：

我有两个复选框，我想让它们表现得像单选按钮（有时只选中一个）。

所以，我很容易找到一个可以解决问题的 jQuery 解决方案：

$("input:checkbox").click(function()
    var group = "input:checkbox[name='"+$(this).attr("name")+"']";
    $(group).attr("checked",false);
    $(this).attr("checked",true);
);

html 如下所示：

<div class="radio">
    <label for="q_is_active_true">Is active</label>
    <input name="radio_buttons" type="hidden" value="0"><input id="q_is_active_true" name="radio_buttons" type="checkbox" value="1">
    <label for="q_is_active_false">Is not active</label>
    <input name="radio_buttons" type="hidden" value="0"><input id="q_is_active_false" name="radio_buttons" type="checkbox" value="1">
</div>

但是当我点击其中一个复选框时，即使它的“check”属性设置为“checked”，也不会显示勾选：

【问题讨论】：

为什么要同名“radio_buttons”？

@Sergio 创建一个我相信的小组 :)

@MohammadAreebSiddiqui 这不适用于复选框。

@alex 这就是他试图实现的目的，将复选框制作为单选按钮 IDK 为什么？

【参考方案1】：

您需要通过property 设置检查状态以实现您想要的：

$("input:checkbox").click(function()
    var group = "input:checkbox[name='"+$(this).attr("name")+"']";
    $(group).prop("checked", false);
    $(this).prop("checked", true);
);

jsFiddle here.

【讨论】：

不 attr() 做同样的事情吗？如果不是，那么它们之间有什么区别？

@MohammadAreebSiddiqui 阅读此***.com/questions/5874652/prop-vs-attr

【参考方案2】：

你可以这样试试：

$('input[name=checkBoxName]').parents('span').addClass("checked");
$("input[name=checkBoxName]").prop('checked', 'checked');

第一行是在复选框中显示勾号，第二行是实际检查它。

【讨论】：

这是否与 UI 库有关，例如引导程序？我只是花了很多时间，这解决了这个问题。但据我所知，仅使用 prop(...) 设置也应该有效（复选框并不总是包含在 span 中），所以我不知道为什么这对我的情况有效。

这是用JQuery来勾选的。

只有第二行足够通用，可以用于其他人的案例。