Question

我遇到的问题是没有保存复选框的当前状态。我是新手，任何帮助将不胜感激。这是部分工作的jQuery代码。

var userCityList = [];
$("#checkboxes").unbind('change').bind('change', function (event) {
    var stateVal = $(':selected', $('#ResidentialLocationStateList')).val();
    var cityID = $(event.target)[0].id;//stores city id
    var cityVal = $(event.target)[0].value;//stores city value

    if ($('#' + cityID).is(':checked')) {
        if (userCityList.length < 5) {
            userCityList.push(cityID);
        }
        else {
            $('#' + cityID).prop('checked', false);
            alert("5 cities have been selected");
            return;
        }
    }//end if

    if (!($("#" + cityID).is(':checked'))) {
        userCityList.pop();
    }
    //console.log(userCityList);

});

LOGIC

当用户选择州时，会出现一组复选框中的城市。当用户单击复选框时，该特定城市将存储在userCityList数组中。当用户再次单击它时，它会从阵列中删除它。但是，如果用户更改了状态，则不再检查这些城市，如果需要，不允许人们从阵列中删除它们。

有什么建议吗？

HTML 代码

<div class="panel-body">
    <p>Select upto 5 state/city combinations</p>
    <div class="col-xs-3 no-pad-left less-width">
        @*<p>Select upto 5 state/city combinations</p>*@
        <select id="ResidentialLocationStateList" name="ResidentialLocationStateList" multiple></select>
    </div>
    <div class="col-xs-3" id="checkboxes">

    </div>
</div>

更新以下是与此问题相关的图片。

enter image description here

因此，当选择了几个城市并且用户决定从select元素更改状态时，需要保存之前选择的城市。

更新

这是AJAX代码......

    $("#ResidentialLocationStateList").change(function () {
    url = "/ResidentialBuilding/getCityList?state=";
    state = $("#ResidentialLocationStateList").val();
    url = url + state;
    //console.log(url);
    $("#checkboxes").empty();
    $.getJSON(url, function (data) {
        //console.log(data);
        $.each(data, function (index, value) {
            //console.log(value.city);
            id = value.city;
            id = id.replace(/\s+/g, '');
            valCity = value.city;
            valCity = valCity.replace(/\s+/g, '');
            $("#checkboxes").append('<input value="' + valCity + '"' + 'type=' + "'checkbox'" +  'id=' + id + '>' + value.city + '</input><br>');
        });
    });
});

Answer 1

如果您使用的是jQuery的现代版本，我建议您使用.off和.on，并在必要时使用.off。

然后.pop()数组方法删除最后一个元素，但刚刚单击的元素可能并不总是最后添加的元素。而且，由于复选框是动态添加的，因此可以在DOM ready的最开始处进行以下绑定，而不一定在任何事件处理程序中。不要给复选框指定导致无效HTML的相同ID，而是使用类选择器.checkboxes。

因此，我建议使用以下代码

var userCityList = [];
$(document).on("change", ".checkboxes", function() {
    var stateVal = $('#ResidentialLocationStateList').val();
    var cityID = this.id;//stores city id
    var cityVal = this.value;//stores city value
    var finalDiv = $('#final');
    var tempDiv  = $('#othertempdiv');

    if( this.checked ) {
        if( userCityList.length < 5 ) {
            userCityList.push( cityID );
            finalDiv.append( this );
        } else {
            $(this).prop('checked', false);
            alert('5 cities have been selected');
        }
    } else {
        var index = $.inArray( cityID, userCityList );
        if( index > -1 ) {
            userCityList.splice( index, 1 );
            tempDiv.append( this );
        }
    }
});

由于您 - 根据以下评论 - 每次选择新州时替换所选城市，您必须拥有第二个div来保存所有选定城市。取消检查最后一个div中的任何城市都会将其移回;如果选择另一个州，这样的城市就会丢失。

<div id="final"></div>

Answer 2

使用多维数组存储州和城市ID，例如 userCityList [stateVal] ：

var userCityList = [];
$("#checkboxes").unbind('change').bind('change', function (event) {
    var stateVal = $(':selected', $('#ResidentialLocationStateList')).val();
    var cityID = $(event.target)[0].id;//stores city id
    var cityVal = $(event.target)[0].value;//stores city value

    if ($('#' + cityID).is(':checked')) {
        if (userCityList.length < 5) {    
            if(!userCityList[stateVal])userCityList[stateVal] = [];            
            userCityList[stateVal].push(cityID);
        }
        else {
            $('#' + cityID).prop('checked', false);
            alert("5 cities have been selected");
            return;
        }
    }//end if

    if (!($("#" + cityID).is(':checked'))) {
        if(userCityList[stateVal]){
        //Edited, now it can remove the city by its position (index)
          var position = $.inArray(cityID, userCityList[stateVal]);   
            userCityList[stateVal].slice(position, 1);
        }

    }
});

因此，当您需要检索状态的已检查城市时，您可以执行以下操作：

for(var i =0; i < userCityList[stateVal].length; i++){
   console.log(userCityList[stateVal][i]);
}

<强>更新

努力工作已经完成。现在，在您的ajax代码中，当您加载一组新的复选框时，您必须检查以前是否选中了复选框：

  $("#ResidentialLocationStateList").change(function () {
    url = "/ResidentialBuilding/getCityList?state=";
    state = $("#ResidentialLocationStateList").val();
    url = url + state;
    //console.log(url);
    $("#checkboxes").empty();
    $.getJSON(url, function (data) {
        //console.log(data);
        $.each(data, function (index, value) {
            //console.log(value.city);
            id = value.city;
            id = id.replace(/\s+/g, '');
            valCity = value.city;
            valCity = valCity.replace(/\s+/g, '');
            $("#checkboxes").append('<input value="' + valCity + '"' + 'type=' + "'checkbox'" +  'id=' + id + '>' + value.city + '</input><br>');
            //Let's check if this checkbox was previously checked
            if($.inArray(id, userCityList[state])){
                    //if yes, let's check it again
                    $('#'+id).prop('checked', true);                
            }
        });
    });
});

请记住，userCityList变量必须是全局的才能存储这些值，当然，如果刷新页面，则会丢失复选框内存。

javascript保存复选框的状态

2 个答案: