jquery获取所有更改的复选框答案

【问题标题】：jquery get all changed checkboxesjquery获取所有更改的复选框
【发布时间】：2011-09-13 19:29:48
【问题描述】：

我在页面上有大量复选框，每个复选框都在一个单独的单元格中，我需要检索自原始值以来更改了值的所有复选框。

我将原始值存储在一个名为“data-original-value”的属性中，该属性位于包含复选框的跨度中，当我将该属性添加到 Attributes 集合时，该跨度是由 asp.net 添加的。

void Grid_ItemDataBound(object sender, GridItemEventArgs e)
        {
            var checkBoxControls = e.Item.Controls.All().OfType<CheckBox>();

            foreach (var checkBox in checkBoxControls)
            {
                checkBox.Attributes["data-original-value"] = checkBox.Checked.ToString();
            }
        }

输出的 html 如下所示：

<td>
    <span data-original-value="True">
    <input id="ctl00_MainContent_ControlLandMatrixControl_grid_ctl00_ctl04_ctl01" type="checkbox"   checked="checked" name="ctl00$MainContent$ControlLandMatrixControl$grid$ctl00$ctl04$ctl01">
    </span> 
</td>

我正在使用以下 JQuery 代码来尝试识别所有已更改的复选框，但它似乎正在返回所有复选框，即使是那些未更改的复选框。

var checkBoxes = $(":checkbox").filter(function () { return $(this).checked != $(this).parent().attr("data-original-value"); } );

我相信我在比较中遗漏了一些东西，但我不完全确定 javascript/jquery 不是我的选择。

【问题讨论】：

标签： jquery asp.net checkbox

【解决方案1】：

你不需要重新发明轮子，复选框有一个预定义的属性defaultChecked，和checked-property比较一下。

$(':checkbox').filter(function () 
                      { 
                         return ($(this).prop('checked') 
                                    !=
                                 $(this).prop('defaultChecked')); 
                      });

你可能会感兴趣：Override the form 'Reset' behavior when data is refreshed via ajax

请注意： 在 jQuery this.checked != this.defaultChecked ，使用 $.attr() 将不起作用

【讨论】：

我不在 jquery 1.6 上，所以我假设我可以使用 .attr 代替？

【解决方案2】：

您正在将字符串与布尔值进行比较，使用类似

的方式将字符串转换为布尔值

var myBool = Boolean("false"); // == 真

var myBool = !!"false"; // == 真

【讨论】：

我需要两条线吗？第二个是做什么的？
不，只是两个不同的例子，说明如何将 js 字符串转换为布尔值

【解决方案3】：

您正在将复选框选中的值（一个布尔值）与一个字符串值（True）进行比较，因此过滤器不会返回任何内容。试试这个

var checkBoxes = $(":checkbox").filter(function () { 
      return $(this).checked.toString() != $(this).parent().attr("data-original-value").toLowerCase(); 
});

【讨论】：

【解决方案4】：

This might help.... 

var inputs = document.getElementsByTagName("input"); //or document.forms[0].elements;  
 var cbs = []; //will contain all checkboxes  
 var checked = []; //will contain all checked checkboxes  
 for (var i = 0; i < inputs.length; i++) {  
 if (inputs[i].type == "checkbox") {  
   cbs.push(inputs[i]);  
   if (inputs[i].checked) {  
     checked.push(inputs[i]);  
   }  
 }  
}  
var nbCbs = cbs.length; //number of checkboxes  
var nbChecked = checked.length; //number of checked checkboxes

【讨论】：