如果複選框未選中，則從網址字符串中刪除ID？

Question

下面我有一個函數，當一個複選框被選中時，它會將複選框的父母id添加到url字符串中，但是我得到的問題是，如果取消選中，它不會從該url中刪除該id。

var checkboxes = $('.all input[type="checkbox"]'); 
checkboxes.change(function() { 
    var ser = '?' + checkboxes.serialize() + location.hash; 
    history.pushState(null, null, ser); 
}); 

$.each(location.search.replace('?', '').split('&'), function(i, seg) { 
    $('[name=' + seg.split('=')[0] + ']').attr('checked', 'checked'); 

}); 

更新： 每個都存在兩個複選框父母具有相同名稱的，（這只是顯示方式不同的信息（網格和列表視圖）所以我想重複的ID號。在URL字符串是混亂的。

任何建議都非常讚賞。

Answer 1

其實你有什麼似乎沒有過濾器的工作。除非我失去了一些東西。

var checkboxes = $('.all input[type="checkbox"]'); 
 
checkboxes.change(function() { 
 
    var ser = '?' + checkboxes.serialize() + location.hash; 
 
    console.log(ser); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="all"> 
 
    <input type="checkbox" name="inp1"> 
 
    <input type="checkbox" name="inp2"> 
 
    <input type="checkbox" name="inp3"> 
 
</div>

Answer 2

如果複選框被包含在表單中的序列化並沒有得到所有值。

根據serialize文檔：僅當檢查複選框和單選按鈕（「射頻」或「複選框」類型的輸入）時才包括這些值。

爲了解決這個問題，你必須自己連載所有的複選框就像：

$(function() { 
 
    var checkboxes = $('.all input[type="checkbox"]'); 
 
    checkboxes.change(function(e) { 
 
    var serialized = checkboxes.map(function() { 
 
     return {'name': this.name + this.type, 'value': (this.checked) ? this.value : ' '}; 
 
    }); 
 
    var ser = '?' + $.param(serialized) + location.hash; 
 
    // history.pushState(null, null, ser); 
 
    $('<p>' + ser + '</p>').appendTo('body'); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 

 
<form action="demo_form.asp" class="all"> 
 
    <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br> 
 
    <input type="checkbox" name="vehicle" value="Car"> I have a car<br> 
 
    <input type="checkbox" name="vehicle" value="Truck" checked> I have a truck<br> 
 
    <input type="submit" value="Submit"> 
 
</form>