jquery 仅选中一个复选框

ghhaqwfi  于 2023-08-04  发布在  jQuery
关注(0)|答案(4)|浏览(125)

我有“是/否”复选框,我希望用户在其中只选择一个。我有一个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");
        }
    });
})

字符串

whlutmcx

whlutmcx1#

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

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

字符串

xoshrz7s

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>

字符串

c0vxltue

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(如果需要的话)显示到我的主客户端验证库中(因此有一行被注解掉)。

vaqhlq81

vaqhlq814#

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

相关问题