如何使用复选框启用选项并通过本地存储保存？

时间：2015-02-17 12:24:41

标签： javascript jquery checkbox local-storage

我不久前开始学习jQuery和Javascript，我遇到了本地存储的一些问题。我试图使用复选框控制选择 - 选项，但是我的代码不适用于jQuery 1.11.0，因为之前我使用1.4.4。

预期结果：当我单击任何框时，将启用与其链接的选项并将其保存在本地存储中。此外，当我手动选择所有复选框时，将选中全选复选框（此功能现在可用，但仅在首次尝试时使用），并且当未选中一个复选框时，将自动取消选中所有选择元素。此外，select / unselect all复选框不能正常工作。

这是我之前使用的http://jsfiddle.net/tfgqhxdw/代码，它与1.4.4 jQuery库一起工作，但我需要它与1.11.0一起工作，因为我有其他与这个旧库冲突的函数。

这是我到目前为止的代码：

$(function enableall_push() {
    $(".checkbox2").click(function(){
        var b = $(".checkbox2");
        if(b.length == b.filter(":checked").length){
            $("#enableall_push").attr("checked","checked");
        } else {
            $("#enableall_push").removeAttr("checked","checked");
        }
    });

    $('#enableall_push').click(function(event) {
        if(this.checked) {
            $('.checkbox2').each(function() {
                this.checked = true;
            $('#reasonDrop option[value=101^1]').removeAttr('disabled');
            $('#reasonDrop option[value=103^1]').removeAttr('disabled');
            $('#reasonDrop option[value=105^1]').removeAttr('disabled');
                localStorage.setItem(this.value,'checked');
            });
            //FUNCTION
        } else {
            $('.checkbox2').each(function() {
                this.checked = false;

            $('#reasonDrop option[value=101^1]').attr('disabled','disabled');
            $('#reasonDrop option[value=103^1]').attr('disabled','disabled');
            $('#reasonDrop option[value=105^1]').attr('disabled','disabled');               
                localStorage.setItem(this.value,'');
            });
            //FUNCTION
        }
    });
}); 

$(function push101 () {
    $("#push1").each(function(){
        if (localStorage.getItem(this.value) == 'checked'){
            $(this).attr("checked","true");
            $('#reasonDrop option[value=101^1]').removeAttr('disabled');
        } else {
            $('#reasonDrop option[value=101^1]').attr('disabled','disabled');
        }
    });

    $("#push1").click(function(){
        if($(this).is(":checked")) {
            $('#reasonDrop option[value=101^1]').removeAttr('disabled');
            localStorage.setItem(this.value,'checked');
        } else {
            $('#reasonDrop option[value=101^1]').attr('disabled','disabled');
            localStorage.removeItem(this.value);
        }
    });
});

$(function push103 () {
    $("#push2").each(function(){
        if (localStorage.getItem(this.value) == 'checked'){
            $(this).attr("checked","true");
            $('#reasonDrop option[value=103^1]').removeAttr('disabled');
        } else {
            $('#reasonDrop option[value=103^1]').attr('disabled','disabled');
        }
    });

    $("#push2").click(function(){
        if($(this).is(":checked")) {
            $('#reasonDrop option[value=103^1]').removeAttr('disabled');
            localStorage.setItem(this.value,'checked');
        } else {
            $('#reasonDrop option[value=103^1]').attr('disabled','disabled');
            localStorage.removeItem(this.value);
        }
    });
});

$(function push105 () {
    $("#push3").each(function(){
        if (localStorage.getItem(this.value) == 'checked'){
            $(this).attr("checked","true");
            $('#reasonDrop option[value=105^1]').removeAttr('disabled');
        } else {
            $('#reasonDrop option[value=105^1]').attr('disabled','disabled');
        }
    });

    $("#push3").click(function(){
        if($(this).is(":checked")) {
            $('#reasonDrop option[value=105^1]').removeAttr('disabled');
            localStorage.setItem(this.value,'checked');
        } else {
            $('#reasonDrop option[value=105^1]').attr('disabled','disabled');
            localStorage.removeItem(this.value);
        }
    });
});

谢谢！

2 个答案:

答案 0 :(得分：0)

您的选择选项语法错误; 101 ^ 1而不是101_1。

您可以尝试this。

//启用所有推送选项

$(function enableall_push() {
    $(".checkbox2").click(function(){
        var b = $(".checkbox2");
        if(b.length == b.filter(":checked").length){
            $("#enableall_push").attr("checked","checked");
        } else {
            $("#enableall_push").removeAttr("checked","checked");
        }
    });

    $('#enableall_push').click(function(event) {
        if(this.checked) {
            $('.checkbox2').each(function() {
                this.checked = true;
            $('#reasonDrop option[value=101_1]').removeAttr('disabled');
            $('#reasonDrop option[value=103_1]').removeAttr('disabled');
            $('#reasonDrop option[value=105_1]').removeAttr('disabled');
                localStorage.setItem(this.value,'checked');
            });
            //FUNCTION
        } else {
            $('.checkbox2').each(function() {
                this.checked = false;

            $('#reasonDrop option[value=101_1]').attr('disabled','disabled');
            $('#reasonDrop option[value=103_1]').attr('disabled','disabled');
            $('#reasonDrop option[value=105_1]').attr('disabled','disabled');               
                localStorage.setItem(this.value,'');
            });
            //FUNCTION
        }
    });
});

// 101 ------------------ 

$(function push101 () {
    $("#push1").each(function(){
        if (localStorage.getItem(this.value) == 'checked'){
            $(this).attr("checked","true");
            $('#reasonDrop option[value=101_1]').removeAttr('disabled');
        } else {
            $('#reasonDrop option[value=101_1]').attr('disabled','disabled');
        }
    });

    $("#push1").click(function(){
        if($(this).is(":checked")) {
            $('#reasonDrop option[value=101_1]').removeAttr('disabled');
            localStorage.setItem(this.value,'checked');
        } else {
            $('#reasonDrop option[value=101_1]').attr('disabled','disabled');
            localStorage.removeItem(this.value);
        }
    });
});

// 103 ------------------ 

$(function push103 () {
    $("#push2").each(function(){
        if (localStorage.getItem(this.value) == 'checked'){
            $(this).attr("checked","true");
            $('#reasonDrop option[value=103_1]').removeAttr('disabled');
        } else {
            $('#reasonDrop option[value=103_1]').attr('disabled','disabled');
        }
    });

    $("#push2").click(function(){
        if($(this).is(":checked")) {
            $('#reasonDrop option[value=103_1]').removeAttr('disabled');
            localStorage.setItem(this.value,'checked');
        } else {
            $('#reasonDrop option[value=103^1]').attr('disabled','disabled');
            localStorage.removeItem(this.value);
        }
    });
});

// 105 ------------------ 

$(function push105 () {
    $("#push3").each(function(){
        if (localStorage.getItem(this.value) == 'checked'){
            $(this).attr("checked","true");
            $('#reasonDrop option[value=105_1]').removeAttr('disabled');
        } else {
            $('#reasonDrop option[value=105_1]').attr('disabled','disabled');
        }
    });

    $("#push3").click(function(){
        if($(this).is(":checked")) {
            $('#reasonDrop option[value=105_1]').removeAttr('disabled');
            localStorage.setItem(this.value,'checked');
        } else {
            $('#reasonDrop option[value=105_1]').attr('disabled','disabled');
            localStorage.removeItem(this.value);
        }
    });
});

答案 1 :(得分：0)

更改所有内容：

 $('#reasonDrop option[value=103^1]')

到

$("#reasonDrop option[value='103^1']")

您错过了正确的引号。

工作示例：jsfiddle

相关问题
最新问题