Question

我在页面上有一些复选框（一些已经通过html检查属性检查过）和一个提交按钮。我想使用jquery运行一个使用$ .each（）循环的函数，以便在选中复选框时执行该函数，但前提是它尚未选中。此外，我想为每个未选中的复选框执行一个函数，但前提是它已经被选中。

请帮忙

Answer 1

这样做的一种方法是使用.data()来存储复选框的原始值。

$(document).ready(function(){
     $("input[type='checkbox']").each(function(){
        $(this).data("originalValue", $(this).is(":checked"));
    })
});;

$("#ok").click(function(){
    $("input[type='checkbox']").each(function(){
       var edited = $(this).data("originalValue") !== $(this).is(":checked");
       if (edited)
       {
           var checkboxLabel = $(this).next("label");
           alert("edited: " + checkboxLabel.text());
       }
    });
});

http://jsfiddle.net/8g3uz/3/

检查用户互动而不是更改的原始解决方案：http://jsfiddle.net/8g3uz/1/

Answer 2

要仅对那些最初未经检查的复选框做出反应，我建议：

$('#check').click(
    function(e){
        e.preventDefault();
        var checkboxes = $('input:checkbox:checked');
        checkboxes.each(
            function(i){
                if (this.defaultChecked == false) {
                    // do something, it wasn't checked on page-load, eg:
                    alert("This is a checkbox that wasn't originally checked.");
                }
            });
    });

JS Fiddle demo

如果状态已从默认状态更改，则执行某些操作，这似乎是您问题的基础：

$('#check').click(
    function(e){
        e.preventDefault();
        var checkboxes = $('input:checkbox');
        checkboxes.each(
            function(){
                if (this.defaultChecked !== this.checked) {
                    $(this).prev('label').addClass('changedFromDefault');
                }
            });
    });

JS Fiddle demo

使用以下HTML：

<span>
    <label for="one">one</label><input id="one" type="checkbox" checked />
</span>
<span>
    <label for="two">two</label><input id="two" type="checkbox" />
</span>
<span>
    <label for="three">three</label><input id="three" type="checkbox" />
</span>
<button id="check">Check</button>

这个jQuery应该展示如何更容易地识别那些被改变或未改变的元素：

$('#check').click(
    function(e){
        e.preventDefault();
        var checkboxes = $('input:checkbox');
        checkboxes.each(
            function(){
                if (this.defaultChecked !== this.checked) {
                    $(this)
                        .closest('span')
                        .removeClass('unchanged')
                        .addClass('changedFromDefault');
                }
                else {
                    $(this)
                        .closest('span')
                        .removeClass('changedFromDefault')
                        .addClass('unchanged');
                }
            });
    });

JS Fiddle demo

参考文献：

addClass()。
:checkbox selector。
:checked selector。
click()。
each()。
HTMLInputElement (for the defaultChecked property) at MDN。
prev()。

Answer 3

这是第一种情况的选择器：

$("input[type='checkbox']:not([checked]):checked");

这是第二种情况的选择器：

$("input[type='checkbox'][checked]:not(:checked)");

DEMO： http://jsfiddle.net/fascw/

仅考虑jquery中的已更改复选框

3 个答案: