jquery 仅选中一个复选框

ghhaqwfi 于 2023-08-04 发布在 jQuery

关注(0)|答案(4)|浏览(112)

我有“是/否”复选框，我希望用户在其中只选择一个。我有一个java脚本，但它不工作没有错误。

Html.CheckBoxFor(m => m.HaveYouApplied, htmlAttributes: new { id = "chkYes", onchange = "chkBox1", @checked = true, @class = "big-checkbox" })

Html.CheckBoxFor(m => m.HaveYouApplied, htmlAttributes: new { id = "chkNo", onchange = "chkBox2", @checked = false, @class = "big-checkbox" })

<script type="text/javascript">
$(function () {
    $("#chkYes").change(function () {
        var ischecked = $(this).is(":checked");
        if (ischecked) {
            $("#chkNo").prop("checked");
        }
    });

    $("#chkNo").change(function () {
        var ischecked = $(this).is(":checked");
        if (ischecked) {
            $("#chkYes").prop("checked");
        }
    });
})

字符串

jquery

来源：https://stackoverflow.com/questions/45944133/select-only-one-checkbox

4条答案

按热度按时间

whlutmcx1#

在jQuery中：
将类'chkBx'添加到组中的每个复选框中，您希望仅选中一个复选框。

$('.chkBx').change(function () {
        $(".chkBx").not(this).prop('checked', false);
    });

字符串

赞(0）回复(0）举报 2023-08-04

xoshrz7s2#

Html.CheckBoxFor(m => m.HaveYouApplied, htmlAttributes: new { id = "chkYes", onchange = "ModifyCheckBoxes('chkYes')", @checked = true, @class = "big-checkbox" })

Html.CheckBoxFor(m => m.HaveYouApplied, htmlAttributes: new { id = "chkNo", onchange = "ModifyCheckBoxes('chkNo')", @checked = false, @class = "big-checkbox" })

<script type="text/javascript">
    function ModifyCheckBoxes(Id) {
    if (document.getElementById(Id).checked) {
        if (Id == "chkNo") {
            document.getElementById("chkYes").checked = false;
        } else if (Id == "chkYes") {
            document.getElementById("chkNo").checked = false;
        }
    };
};
</script>

字符串

赞(0）回复(0）举报 2023-08-04

c0vxltue3#

这里应该是你需要在任何ASP.NET应用程序中完成这一任务的一切，包括Core，因为我现在正在使用它。请注意：你需要使用jQuery来实现这一点。
首先，在页面中放置复选框。这里我绑定到一个模型，属性是bool，所以EditorFor知道它是一个bool，所以自动将其呈现为复选框，而不必指定@Html.CheckboxFor（）。

@Html.EditorFor(model => model.PreferEmail, new { htmlAttributes = new { data_group="PreferredContact", title="I prefer to be contacted by Email", @class = "form-check-input select-one" } })
@Html.EditorFor(model => model.PreferPhone, new { htmlAttributes = new { data_group="PreferredContact", title="I prefer to be contacted by Phone", @class = "form-check-input select-one" } })

字符串
'form-check-input'只是一个Bootstrap类，用于设置复选框的样式。用CSS类名标记要应用此“只选择一个”逻辑的复选框。我选择了“选择一个”。添加属性'data-group'并为'select only one'系列中的每个复选框提供相同的数据组名称，这是为了在一个页面中有多组复选框。

var checkboxes = {
selectOne: {
    init: function () {
        var self = this;
        $(".select-one").on("change", function () {
            $(`[data-group=${$(this).attr("data-group")}`).not(this).prop("checked", false);
        })
    },
    vallidate: function (grp) {
        var self = this;
        if ($(`[data-group=${grp}]:checked`).length == 0) {
            //validation.addError("At least one option must be selected!");
            return false;
        }
        return true;
    }
}};

型
这是唯一需要的jQuery/JavaScript。将其添加到HTML中的HEAD部分或页面中的某个位置。
然后，在页面加载时，只需像这样调用：

$(document).ready(function () { checkboxes.selectOne.init(); }

型
这里有一个验证方法，所以如果你有客户端验证，你可以调用checkboxs.selectOne.validate（'your group'），如果至少有一个项目被选中，它将返回true，如果没有项目被选中，它将返回false。我的代码通过添加一个新的Error（如果需要的话）显示到我的主客户端验证库中（因此有一行被注解掉）。

赞(0）回复(0）举报 2023-08-04

vaqhlq814#

你为什么不使用一个单选按钮，这是专门为这个确切的范围？

赞(0）回复(0）举报 2023-08-04