javascript - 复选框总是返回 false

Question

我读过一些关于复选框总是返回错误状态的文章，但没有发现任何关于我自己的问题。

所以，这是脚本:

<script type="text/javascript">
    function update_contact(id, name) {
        alert("idCont : " + id + "\n nameCKB : " + name + "\n state : "
                + $(this).attr('checked'));
        var a = location.pathname.substring(1).split('/')
        $.ajax({
            url : '@Url.Action("update_contact")',
            type : 'POST',
            data : {
                name : name,
                isChecked : $(this).is(':checked'),
                idOpp : a[2],
                idCont : id
            },
            success : function(result) {
            }
        });
    };
</script>

这是复选框的代码:

@If mail = False Then
    @<input type="checkbox" name="mailed" id="mailed" class="mailed" onclick="update_contact(@item.idContact.toString() , 'mailed')" />
Else
    @<input type="checkbox" name="mailed" id="mailed" class="mailed" onclick="update_contact(@item.idContact.toString() , 'mailed')" checked="checked" />
End If

这是服务器生成的代码:

<input name="mailed" id="mailed" class="mailed" onclick="update_contact(1 , 'mailed')" type="checkbox">

一开始，我使用了一个 Html 助手。它像那样返回:

<input id="mailed" name="mailed" onclick="update_contact(1 ,'mailed')" value="true" type="checkbox">
<input name="mailed" value="false" type="hidden">

我认为这是由于第二个输入导致它始终返回错误状态。

Answer 1

问题很可能是 this 不是你想的那样。尝试将对已单击复选框的引用显式传递给您的函数:

@If mail = False Then
      @<input type="checkbox" name="mailed" id="mailed" class="mailed" onclick="update_contact(@item.idContact.toString() , 'mailed', this)" />
Else
      @<input type="checkbox" name="mailed" id="mailed" class="mailed" onclick="update_contact(@item.idContact.toString() , 'mailed', this)" checked="checked" />
End If

然后:

    function update_contact(id, name, cb) {
        alert("idCont: " + id + "\n nameCKB: " + name + "\n state: " + cb.checked);
        // you could say $(cb).attr("checked"), but cb.checked is more efficient
        // and easier to read
        var a = location.pathname.substring(1).split('/')
        $.ajax({
            url: '@Url.Action("update_contact")',
            type: 'POST',
            data: { 
                    name: name, 
                    isChecked: cb.checked, 
                    idOpp: a[2], 
                    idCont: id
            },
            success: function (result) {}
        });
    };

或者使用 jQuery 分配点击处理程序，它会为您正确设置 this。您可以将 @item.idContact.toString() 放在 value 属性中，然后在您的处理程序中使用 this.value 访问它:

@If mail = False Then
      @<input type="checkbox" name="mailed" id="mailed" class="mailed" value="@item.idContact.toString()" />
Else
      @<input type="checkbox" name="mailed" id="mailed" class="mailed" value="@item.idContact.toString()" checked="checked" />
End If

然后:

 $(document).ready(function() {
    $("#mailed").click(function() {
        alert("idCont: " + this.value + "\n nameCKB: " + this.name + "\n state: " + this.checked);
        // you could say $(this).attr("checked"), but this.checked is more efficient
        // and easier to read
        var a = location.pathname.substring(1).split('/')
        $.ajax({
            url: '@Url.Action("update_contact")',
            type: 'POST',
            data: { 
                    name: this.name, 
                    isChecked: this.checked, 
                    idOpp: a[2], 
                    idCont: this.value
            },
            success: function (result) {}
        });
    });
});

(注意:我实际上并不知道 VB/razor 语法，我只是在猜测那部分。)