追加多個複選框組中的url參數點擊

Question

我想在複選框單擊時重寫url參數值，類似於LinkedIn高級搜索。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> 
 
    <script type='text/javascript'> 
 
    
 
    $(document).ready(function() { 
 
$('input[type=checkbox]').click(function (e) { 
 
var seasoning = jQuery.map($(':checkbox[id=seasoning\\[\\]]:checked'), function (n, i) {return n.value;}).join(','); 
 

 
window.location ='example.com?seasoning='+seasoning; 
 
    
 
}); 
 

 
}); 
 
</script>

<h3>Filter recepies:</h3> 
 

 
<div> 
 
<p>Select vegetables</p> 
 
<label><input type="checkbox" id="vegetables[]" value="potato"> Potato</label><br> 
 
<label><input type="checkbox" id="vegetables[]" value="onion"> Onion</label><br> 
 
<label><input type="checkbox" id="vegetables[]" value="tomato"> Tomato</label><br> 
 
</div> 
 

 
<div> 
 
<p>Select seasoning</p> 
 
<label><input type="checkbox" id="seasoning[]" value="salt"> Salt</label><br> 
 
<label><input type="checkbox" id="seasoning[]" value="pepper"> Pepper</label><br> 
 
<label><input type="checkbox" id="seasoning[]" value="chilli"> Chilli Flakes</label><br> 
 
</div>

我要的結果

CLICK1：，當我從我的vegitable URL點擊土豆看起來應該像
example.com?vegitables=potato

Click2：當我從vegitable我的網址點擊洋蔥應該像
example.com?vegitables=potato,onion

CLICK3：，當我從我的調味URL點擊鹽應該像
example.com ？vegitables =土豆，洋蔥調味& =鹽

CLICK4：，當我從我的調味URL點擊胡椒應該像
example.com?vegitables=potato,onion &調味=鹽，胡椒

Answer 1

這裏是你可以做什麼

$(document).ready(function() { 
 
    $('input[type=checkbox]').click(function (e) { 
 
    var seasoning = '', tempArray = []; 
 
    $('input[name="vegetables[]"]:checked').each(function(){ 
 
     tempArray.push($(this).val()); 
 
    }) 
 
    if(tempArray.length !== 0){ 
 
    seasoning+='vegetables='+tempArray.toString(); 
 
    tempArray = []; 
 
    } 
 
    
 
    $('input[name="seasoning[]"]:checked').each(function(){ 
 
     tempArray.push($(this).val()); 
 
    }) 
 
    if(tempArray.length !== 0){ 
 
    seasoning+='&seasoning='+tempArray.toString(); 
 
    } 
 
    
 
// window.location ='example.com?seasoning='+seasoning; 
 
console.log('example.com?'+seasoning); 
 

 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<p>Select vegetables</p> 
 
<label><input type="checkbox" name="vegetables[]" value="potato"> Potato</label><br> 
 
<label><input type="checkbox" name="vegetables[]" value="onion"> Onion</label><br> 
 
<label><input type="checkbox" name="vegetables[]" value="tomato"> Tomato</label><br> 
 
</div> 
 

 
<div> 
 
<p>Select seasoning</p> 
 
<label><input type="checkbox" name="seasoning[]" value="salt"> Salt</label><br> 
 
<label><input type="checkbox" name="seasoning[]" value="pepper"> Pepper</label><br> 
 
<label><input type="checkbox" name="seasoning[]" value="chilli"> Chilli Flakes</label><br> 
 
</div>

爲了簡單起見，在這裏進一步的編輯是鏈接到working JSFIDDLE