Question

//Function called by sigle element or multiple times (see below)
$('[id^=old_]').change(function(){
    var check = $(this).prop('checked') ? true : false;

    if(check){
         /* stuff here */
    }else{
        var reprise = confirm('Are you sure?');

        if(reprise){
            /*  do stuff */
        }else{
            $(this).prop('checked', true);  
        }
    }
});

//Function called on "select all/deselect all"
$('#span_descr > div:last-child').on('click', 'span:first-child', function(){
     $('[id^=old_]:not(:checked)').click();
}).on('click', 'span:last-child', function(){
    $('[id^=old_]:checked').click();
});

我的问题是＆＃34;取消选择所有＆＃34;单击我为每个取消选择的项目收到警报/确认消息。有没有办法避免这种情况，只获得一次这条消息？

Answer 1

Check out jQuery one().

<强> jquery的

$('selector').one('click', function(event){....});

jSFiddle

Answer 2

不使用.click()来切换复选框，而是使用.prop('checked', ...)，如下所示：

//Function called on "select all/deselect all"
$('#span_descr > div:last-child').on('click', 'span:first-child', function(){
     $('[id^=old_]:not(:checked)').prop('checked', true);
}).on('click', 'span:last-child', function(){
    $('[id^=old_]:checked').prop('checked', false);
});

这应该避免触发导致警报波动的.change()处理程序。

Answer 3

你好吗？

请尝试对您的代码进行一些修改：

//Function called by single element or multiple times (see below)
var alreadyReprised = null;
$('[id^=old_]').change(function(){
    var check = $(this).prop('checked') ? true : false;

    if(check){
         /* stuff here */
    }else{

        var reprise = alreadyReprised || confirm('Are you sure?');
        if(reprise){

            if(alreadyReprised === false) {
                alreadyReprised = true;
            }
            /*  do stuff */
        }else{
            $(this).prop('checked', true);  
        }

    }
});

//Function called on "select all/deselect all"
$('#span_descr > div:last-child').on('click', 'span:first-child', function(){
     $('[id^=old_]:not(:checked)').click();
}).on('click', 'span:last-child', function(){
    alreadyReprised = false;
    $('[id^=old_]:checked').click();
    alreadyReprised = null;
});

问候。

Answer 4

我猜你只需要在click处理程序之外执行所有必须执行的操作，以便也可以从其他代码中引用它。它不漂亮，但有效：

//Function called by sigle element or multiple times (see below)
$('[id^=old_]').change(function(){
    var check = $(this).prop('checked') ? true : false;

    if(check){
         onSelected(this);
    }else{
        var reprise = confirm('Are you sure?');
        if(reprise){
            onDeselected(this);
        }else{
            $(this).prop('checked', true);  
        }
    }
});

function onSelected(checkbox){
    /* stuff here */
    console.log("selected");
}

function onDeselected(checkbox){
    /*  do stuff */
    console.log("deselected");
}

//Function called on "select all/deselect all"
$('#span_descr > div:last-child').on('click', 'span:first-child', function(){
     $('[id^=old_]:not(:checked)').click();
}).on('click', 'span:last-child', function(){
    if(confirm('Are you sure?')){
        var checked = $('[id^=old_]:checked');
        checked.prop('checked', false);
        checked.each(function(index, elem){
            onDeselected(elem);
        });
    }
});

检查 fiddle

另一种解决方案是preventDefault()复选框上的所有点击事件，并自行检查/取消选中它们。这将允许您更好地分离概念＆＃34;被单击的复选框＆＃34;和＆＃34;复选框被选中＆＃34;这将带来更清晰的代码。但是，我不太喜欢阻止默认行为，因为你从来不知道默认行为是什么。

Answer 5

您可以使用eventData的一种方法。

以下示例将数据从checkAll复选框传递到更改处理程序。这允许您查看该数据是否存在，从而知道更改事件是用户触发还是外部触发

var $checks = $(':checkbox:not(#check_all)').change(function(e ,isTriggerEvent, isChecked){
    if(!isTriggerEvent){
       if(this.checked)
       alert('Manually changed') ;
       /* see if check_all needs to be changed when user checks or unchecks a checkbox */  
        var allChecked = !$checks.filter(':not(:checked)').length;
        $('#check_all').prop('checked',allChecked);    
    }else{
        /* match checked state to "check_all" state */
        this.checked = isChecked;
    }       
});

$('#check_all').change(function(e){ 
    /* 1st param in eventData tells other checkboxes is a trigger, 2nd param to send state */   
    $checks.trigger('change',[true, this.checked]);        
});

参考：trigger() Docs

请注意，所有jQuery事件处理程序都允许使用trigger

传递数据参数

的 DEMO

Answer 6

试试这个

//Function called by sigle element or multiple times (see below)
$('[id^=old_]').change(function(){
    var check = $(this).prop('checked') ? true : false;

    if(check){
         /* stuff here */
    }else {
        var reprise = null;

        if($(this) == ('[id^=old_]:first-child'))
          reprise = confirm('Are you sure?');

        if(reprise){
            /*  do stuff */
        }else{
            $(this).prop('checked', true);  
        }
    }
});

//Function called on "select all/deselect all"
$('#span_descr > div:last-child').on('click', 'span:first-child', function(){
     $('[id^=old_]:not(:checked)').click();
}).on('click', 'span:last-child', function(){
    $('[id^=old_]:checked').click();
});

jQuery多选择器警报只是第一次

6 个答案: