如何从复选框输入中检索真/假？答案

【问题标题】：How to retrieve true/false from a checkbox input?如何从复选框输入中检索真/假？
【发布时间】：2020-07-30 04:40:00
【问题描述】：

我有一个表格，表格的每一行都有两个复选框。我正在遍历表的每一行并尝试将布尔值发送回控制器（如果选中，则返回 true，否则返回 false），但传回的值始终为 false。作为参考，这是我设置表格的方式：

@foreach (var item in Model.lockers)
{
    <tr>
        <td>
            @Html.CheckBoxFor(modelItem => item.IsActive, new { htmlAttributes = new { @class = "form-control IsEnabled" } })
        </td>
        <td>
            @Html.CheckBoxFor(modelItem => item.IsADA, new { htmlAttributes = new { @class = "form-control IsADA" } })
        </td>
    </tr>
}

这是我从该复选框中检索信息的代码：

var list = [];
$('#tblMaster tbody tr').each(function (index, ele) {
    var LockerDoorMaster = {
        IsActive: $('.IsEnabled', this).is(":checked"),
        IsADA: $('.IsADA', this).is(":checked")  
    }
    list.push(LockerDoorMaster);
});

如何修改我的代码，以便在选中复选框时将值“true”传回？谢谢！

【问题讨论】：

你可以尝试使用 !!$('.IsEnabled', this).is(":checked"), 这基本上告诉 JavaScript 值是 '0' 还是 'null'，否则它是 false，否则它是 true。
如果你发布生成的 html 会有更多的人能够提供帮助，只是说。
何时您在运行此代码？它是否发生在用户有机会与页面交互之后？
@ScottMarcus 是的，我包含的 javascript 的 sn-p 是填充数据以在 POST 请求中发送回控制器。
这真的不能回答我的问题。什么时候发出 POST 请求？您调用此代码响应的事件是什么？

标签： javascript html asp.net-mvc

【解决方案1】：

<html>
<body>
<form name="y">
<input type="checkbox" name="inputOne">
<input type="checkbox" name="inputTwo">
</form>
<p id="demo"></p>
<script>
if(document.forms["form"]["inputOne"].selected ==   "true"){   document.getElementById("demo").innerHTML = "You Selected The First Button";}
if(document.forms["form"]["inputTwo"].selected ==   "true"){ document.getElementById("demo").innerHTML = "You Selected The Second Button";}
</script>
</body>
</html>

【讨论】：

【解决方案2】：

有时纯原版 js 是最好的选择。

var cb = document.getElementById('cb').checked;
console.log(cb);

var cb2 = document.getElementById('cb2').checked;
console.log(cb2);

<input id='cb' type='checkbox'>

<input id='cb2' type='checkbox' checked>

【讨论】：

【解决方案3】：

如果我理解正确，您需要添加一个将在复选框更改时触发的事件，否则当您提交列表中的数据时，您将始终拥有复选框初始值。

var list = [];

function setList() {
    list = [];
    $('#tblMaster tbody tr').each(function (index, ele) {
        var LockerDoorMaster = {
            IsActive: $('.IsEnabled', this).prop('checked'),
            IsADA: $('.IsADA', this).prop('checked')
        };
        list.push(LockerDoorMaster);
    });
}

setList();

$('.IsEnabled').on('change', function () {
    setList();
});

$('.IsADA').on('change', function () {
    setList();
});

基本上，每次复选框值更改时，此代码都会更新您的列表。虽然这不是最好的方法，但它回答了你的问题

【讨论】：