Question

我有一个jQuery对话框，其中包含带有多个复选框的表。

$("#custom-modal").dialog({
            height: 200,
            modal: true,
            buttons: { "OK": function () {
                var table1 = $("#MainContent_rtc1_customTable").html();
                alert(table1);
                //$.session('mytbl', $("#customTable").val());
                $.ajax({
                    type: "POST",
                    url: "MyPage.aspx/BindCustom",
                    data: ({ param1: table1 }),
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(errorThrown);
                    },
                    success: function (result) {
                        alert("success");
                    }
                });

                $(this).dialog("close");
                return true;
            }, "Cancel": function () {
                $(this).dialog("close");
                return false;
            }
            }

        });
    });

    $(':checkbox').click(function () {
        var $this = $(this);
        if ($this.is(':checked')) {
            //alert(event.target.id);
            $this.attr('checked', false);
        } else {
            //alert(event.target.id);
            $this.attr('checked', true);
        }
    });

更改复选框的状态后，当我看到带有alert的表的html代码时（table1）; （按OK按钮后）;我看到所有复选框的状态都已选中。所以他们不会改变。？

Answer 1

$('input[type=checkbox]').click(function () {
        var $this = $(this);
        if (this.checked) {
            //alert(event.target.id);
            $this.prop('checked', false);
        } else {
            //alert(event.target.id);
            $this.prop('checked', true);
        }
});

Answer 2

尝试使用$(this).removeAttr('checked');代替$this.attr('checked', false);

Answer 3

如果它们是ASP复选框，则实际的复选框输入不是控件。除此之外，如果您只是想更改已检查的属性，那么看起来您没有正确绑定事件，如线路所提到的那样。

如果您仍需要在复选框中添加事件处理程序，请参阅此文章：

Need to select all checkboxes and dynamically add specific event handler to each

该问题被报告为错误，但后来无效并且未修复（http://bugs.jquery.com/ticket/7594）。

您可以做的一件事是正确处理click事件，然后设置可以检查的自定义变量。在asp中，这很难检查，因为复选框不仅仅是输入，它们打包带有跨度，所有类和属性通常都添加到跨度而不是框中。

因此，根据您的需要，您可以执行以下操作：

var table1;

$('.isCheckBox').each(function(){
    //default value set here
    $(this).attr('isChecked','false');
});

$('input:checkbox').click(function (event) {
    if($(this).prop('checked') == true)
    {
       $(this).attr('data-isChecked','true'); 
    }
    else
    {
        $(this).attr('data-isChecked','false'); 
    }

    table1 = $('#thetable').html();
    alert(table1);
});

HTML：

<table id="thetable">
<tr>
    <td><input class='isCheckBox' type="checkbox"/></td>
    <td><input class='isCheckBox' type="checkbox"/></td>
    <td><input class='isCheckBox' type="checkbox"/></td>
</tr>

小提琴：http://jsfiddle.net/DwerK/9/

然后检查属性'data-isChecked'。您需要添加数据前缀，以便HTML验证。

现在我推测你可以将属性添加到父元素中，然后在后面的代码中检查它，不确定它是如何工作的，并且没有实例来检查它。

我希望有所帮助。

编辑：Wirey要求查看问题，据我了解这说明了问题：http://jsfiddle.net/w22Q4/2/

使用jQuery更改复选框状态

3 个答案: