关闭模态后如何保留选中的复选框?

时间:2016-05-17 08:50:41

标签: javascript jquery twitter-bootstrap checkbox

我有一个看起来像这样的模态: enter image description here

选中几个复选框后,单击Add Users to New Group模式关闭后,我正在捕捉已选中复选框的值。但是现在我需要在关闭模态之前检查的那些复选框在再次打开模态后保持检查,以便用户可以看到他检查了哪个复选框,如果可以做到的话。这是我试过的:

$(document).ready(function(){
     $('#addNewMembers').click(function(){//click on Add Users to New Group button
     var selected = $('#ovdjeSuSelektovani').val();//im putting value of all checked checkboxes inside hidden input, so this is how i'm retrieving those values
     console.log(selected);
     if(selected!='') {
        var arrayOfSelected = selected.split(",");
        for(var i=0;i<arrayOfSelected.length;i++){
            $('checkbox value=['+arrayOfSelected[i]+']').prop('checked',true);//did not recognize the jQuery selector
        }
        var numberOfSelected=arrayOfSelected.length;
        $('#numberOfMembers').text(numberOfSelected)
    }else{//neko upozorenje    
    }    
});

没用。 尝试2号:

$("#modal-6 input[type='checkbox']:checked").each(function () {
       this.prop('checked',true);
});

重新打开模态后什么也没做。如果有人有任何建议,我很乐意尝试。

3 个答案:

答案 0 :(得分:2)

没有html标记$('checkbox value=['+arrayOfSelected[i]+']').prop('checked',true); ,所以这不起作用

$('input[type=checkbox][value='+arrayOfSelected[i]+']').prop('checked',true);

试试这个

ID   | Common ID | Reject
-------------------------
AB-1 | AB        | NULL
AB-2 | AB        | YES
AB-3 | AB        | NULL
BB-1 | BB        | YES
BB-2 | BB        | YES
BB-3 | BB        | YES
CB-1 | CB        | YES
CB-2 | CB        | YES
DB-1 | DB        | NULL

然后它将选中复选框并保持选中状态,直到您明确取消选中它们。

答案 1 :(得分:0)

关闭会话存储中每个已选中复选框的模态存储唯一标识符。例如,唯一标识符可以是Facebook ID。

您可以阅读有关会话存储here的更多信息。您将要找到的两种方法非常有用:

sessionStorage.setItem

sessionStorage.getItem

我建议使用会话存储而不是本地存储,因为会话存储不是持久的,并且您可能不需要在浏览器窗口关闭后保留选中的复选框。

如果您想使用本地存储空间或想了解更多信息,可以查看this

答案 2 :(得分:0)

仅将所选复选框的ID存储在$(&#39;#ovdjeSuSelektovani&#39;)。val()中(例如&#34; id1,id3,id4&#34;),而不是陈述:

$('#modal-6 input[type='checkbox']').is('checked').each(function() {
  $('#ovdjeSuSelektovani').val($('#ovdjeSuSelektovani').val() + $(this).attr('id') + ',');
});

$('#ovdjeSuSelektovani').val($('#ovdjeSuSelektovani').val().replace(/,$/g,'')); //removes training comma

当弹出窗口重新加载时,试试这个:

$('#ovdjeSuSelektovani').val().split(',').each(function(id) {
  $('#' + id).prop('checked', true);
}