如何在取消选中复选框时删除值 - How to remove value when a checkbox is unchecked?

我正在处理一个搜索框，它有三个不同的字段，根据用户的选择，这些字段将用ajax填充。

这是我的html:

<div id="states">
    <input type="checkbox" name="states[]" value="01">
    <label for="states">State 01</label>
    <input type="checkbox" name="states[]" value="02">
    <label for="states">State 02</label>
    ...etc...
</div>
<div id="prov">
    <input type="checkbox" name="provs[]" value="01">
    <label for="states">Prov 01</label>
    <input type="checkbox" name="provs[]" value="02">
    <label for="states">Prov 02</label>
    ...etc...
</div>
<div id="cities">
    <input type="checkbox" name="cities[]" value="01">
    <label for="states">City 01</label>
    <input type="checkbox" name="cities[]" value="02">
    <label for="states">City 02</label>
    ...etc...
</div>

当您选择第一组复选框时，第二组复选框将填充与状态相关的所有证明。因此，如果状态1有三个证明，这些证明就会显示出来。如果我也检查状态2，那么状态2的证明将附加到从状态1已经显示的证明。

对于城市来说，同样的事情，它将向选中的prov显示相应的城市。

我看这个问题：在取消选中复选框时触发事件并执行以下操作：

function(){
    var stateIds;
    var locUrl = $('#url');
    var $checks = jQuery('.dptoCheckbox').change(function () {
        stateIds= $checks.filter(':checked').map(function () {
            return this.value;
        }).get().join(',');
        console.log(stateIds);
        $.ajax({
            url: locUrl,
            async: false,
            type: "POST",
            data: "state_ids="+stateIds,
            dataType: "html",
            success: function(data) {
                $('#prov').html(data);          
            }
        });
    });

然后在我的控制器中，我使用States ID从DB中检索证明。

到目前为止，它运行得很好，唯一的问题是，因为每次选中/取消选中字段时，我都会更新ajax调用。考虑以下列表：

状态1
- Prov A
- Prov B
状态2
- Prov C
- Prov D

如果我检查状态1和状态2，然后检查Prov A和Prov C。然后我决定不再需要状态2。如果我取消选中State 2，则会进行一个新的ajax调用，provs列表也会更新。这首先导致Prov C消失（这是正确的行为），但也导致从状态1（Prov A）检查的所有值重置。

我想知道是否有一种方法可以更新provs列表（以及稍后的城市列表），只从取消选中的State中删除provs。保留其他受检查州的所有其他证明。

谢谢你读到这里，我希望我把我的问题说清楚了，我不知道如何在不写完整代码的情况下解释它（我尽量减少它）。

有两种方法可以做到这一点：

1）控制服务器端所有选中的复选框，并在每次AJAX调用时提供选中的内容

2）在不使用AJAX的情况下删除子复选框，您应该在每个省添加一个具有州依赖性的类，在每个城市添加一个带有省依赖性的类别。我认为这是更好的方式。

我将用一个例子来解释第二个：

当用户检查状态01时，AJAX调用添加省12：

<input type="checkbox" name="provs[]" value="12" class="province_state_01">

当用户检查省12时，城市23被添加：

<input type="checkbox" name="cities[]" value="23" class="city_province_12">

现在，如果用户取消选中省01，我们应该删除子城市，没有AJAX调用：

jQuery('#prov input').change(function () {
    if (!jQuery(this).is(':checked')) {
        province_unchecked = jQuery(this).val();
        jQuery('input.city_province_' + province_unchecked ).remove();
    } else {
        //Here you should add your AJAX call to add the cities
    }
});

现在，让我们对各州做同样的事情，我们应该对城市进行迭代：

jQuery('#states input').change(function () {
    if (!jQuery(this).is(':checked')) {
        state_unchecked = jQuery(this).val();
        jQuery('input.province_state_' + state_unchecked).each(function() {
            province_child = jQuery(this).val();
            jQuery('input.city_province_' + province_child ).remove();
            jQuery(this).remove();
        });
    } else {
        //Here you should add your AJAX call to add the provinces
    }
});

这是我的猜测，但我还没有完全测试过，我也不是一个专业的javascript程序员。如果有任何错误，请告诉我。编辑：这里有一个jsfiddle演示：http://jsfiddle.net/z590wdLo/3/

注：这个答案已被证明是错误的。它缺少删除不应该存在的省份的代码。我不会删除它，因为它可以稍微修改一下以变得有用。

首先，你的HTML有点乱。label元素的主要目标之一是，当用户单击标签时，它会选中相应的框。标记的编写方式不允许这样做。你需要改变这个：

<div id="prov">
    <input type="checkbox" name="provs[]" value="01">
    <label for="states">Province 01</label>
    <input type="checkbox" name="provs[]" value="02">
    <label for="states">Province 02</label>
    ...etc...
</div>

对此：

<div id="prov">
    <label>
        <input type="checkbox" name="provs[]" value="01"/>
        Province 01
    </label>
    <label>
        <input type="checkbox" name="provs[]" value="02"/>
        Province 02
    </label>
    ...etc...
</div>

我在#statesdiv上更改了它，但您应该在所有内容上都更改它。注意，我去掉了for="states"属性，还将<input type="checkbox"...元素放在了<label>元素中。

您还应该让服务器以JSON形式返回结果，并更改请求的数据类型以匹配。您可以在PHP中使用json_encode（）函数来实现这一点。我不确定您的JSON对象会是什么样子，所以您必须相应地修改代码。我假设你有一个关联数组的数字数组，每个数组中都有项目provName和provID。

我还假设<input type="checkbox" name="provs[]" value="01">中的value="01"是provID，并且<label for="states">Prov 01</label>中的Prov 01是provName。

同时更改此项：

success: function(data) {
    $('#prov').html(data);          
}

对此：

success: function(data) {
    var province = [];
    var elements;
    //get the next element from the array and only continue if
    //there actually was something left to get
    while((province = data.pop) !== undefined) {
        //do not append the element if there already exists an element
        //is a descendent of div#prov,
        //is of the type input,
        //and has a value that matches the provinceID
        if($("div#prov input[value|='" + province.provID + "']") !== $()) {
            $('#prov').append('<label><input type="checkbox" name="provs[]" value="' + province.provID + '"/>' + province.provName + '</label>');
        }
    }
}

祝你好运。