时间戳

首页 > 解决方案 > 选中时复选框值不会更改

javascript - 选中时复选框值不会更改

问题描述

我有一个复选框，我用 CSS 设置样式，我的问题是当我使用 AJAX 将复选框的值发送到控制器时，值保持不变。

例如，我的 Checkbox-value 为 False (0)，然后我单击 Checkbox，Checkbox 设置为 True (1)，然后我使用 AJAX 将值发送到控制器，但控制器仍然得到 False (0) .

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' class='myCheckbox' id = 'myCheckbox' value='${item.IsActive}'                      ${item.IsActive  ? 'checked' : ''} />` +
                "<span class='checkmark'>" + "</span>" +
                "</label >" +
                "</td>"
        });
        $('#myTable tbody').append(rows);
    } else {

        alert("Something went wrong");
    }
}

function UpdateRefiInstituteById() {

    var checkboxValues = $('input[type="checkbox"].myCheckbox').map(function() {
        return $(this).val();
    }).toArray();

 
    $.ajax({
        type: "POST",
        url: '/Manage/UpdateRefiInstituteById',
        dataType: 'json',
        data: {
               IsActive: checkboxValues
        },
        traditional: true,
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        success: successFunc,
        error: errorFunc
    });

    function successFunc(data, status) {
        alert(data);
    }

    function errorFunc() {
        alert('error');
    }
}

复选框

结果

标签： javascriptjqueryasp.net-mvc

解决方案

$('input[type="checkbox"].IsActive') 正在尝试选择带有 的复选框class='IsActive'。在您的情况下，您的复选框具有class='myCheckbox'.

将行更改为$('input[type="checkbox"].myCheckbox')。

更新

var checkboxValues = $('input[type="checkbox"].myCheckbox').map(function() {
        return $(this).prop('checked');
    }).toArray();

如果您需要 0 或 1 作为未选中和选中，只需执行 return $(this).prop('checked') ? '1' : '0';

推荐阅读