如何显示复选框值（选中或未选中）

Question

我正在开发一个项目，该项目是使用ASP.Net mvc 5创建的。 我从数据库中获取数据，我只想在用户界面上显示数据。 我的问题是，我在浏览器控制台中有我想要的所有数据，但未选中复选框。 我怎样才能做到这一点？

"<input type='checkbox' value='" +item.IsActive+"'/>"

这是我的代码：

    function success(data) {
        var rows;
        if (data != null) {
            $.each(data, function (i, item) {       
                rows += "<tr>"
                    + "<td>" +
                    "<label class='checkbox-container' id ='checkbox-container'>" +
                    item.Name+
                    "<input type='checkbox' value='" + item.IsActive+"'/>" +
                    "<span class='checkmark'>"+"</span>"+
                    "</label >"+
                    "</td>"     
            });
            $('#myTable tbody').append(rows);
        }
        else {
            alert("Something went wrong");
        }
    }

Answer 1

也许一些 js 逻辑会有所帮助？

$.each(data, function (i, item) {       
    var checkbox_input = "<input type='checkbox' value='" + item.IsActive+"'/>";
    if(item.IsActive){
        var checkbox_input = "<input type='checkbox' value='" + item.IsActive+"' checked />";

    }
    rows += "<tr>"
        + "<td>" +
        "<label class='checkbox-container' id ='checkbox-container'>" +
        item.Name+
        checkbox_input +
        "<span class='checkmark'>"+"</span>"+
        "</label >"+
        "</td>"     
});

或模板文字 js 的简写

$.each(data, function (i, item) {       
    rows += "<tr>"
        + "<td>" +
        "<label class='checkbox-container' id ='checkbox-container'>" +
        item.Name+
        `<input type='checkbox' value='${item.IsActive}' ${item.IsActive ? 'checked' : ''} />` +
        "<span class='checkmark'>"+"</span>"+
        "</label >"+
        "</td>"     
});

Answer 2

如果您希望复选框显示为选中状态，则它应该具有选中属性。 在这种情况下，它将类似于：

 <input type='checkbox' checked/>

由于您有一个变量可以告诉您复选框是否被选中，您可以尝试使用：

"<input type='checkbox'" + item.isActive ? "checked" : "" + "/>"

这将在 item.isActive 为 true 时将复选框呈现为选中状态。