追加多个复选框组中的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