2

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

请帮忙

4

3 回答 3

5

这样做的一种方法是使用.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/

于 2012-08-26T22:31:35.480 回答
1

为了仅对那些最初未选中的复选框做出反应，我建议：

$('#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 小提琴演示。

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

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

JS 小提琴演示。

使用以下 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 小提琴演示。

参考：

于 2012-08-26T22:39:15.483 回答
0

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

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

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

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

演示：http: //jsfiddle.net/fascw/

于 2012-08-26T22:35:51.133 回答