如何使用值設置一組複選框？

Question

所以我有一組複選框，例如：

<input type="checkbox" id="cbl1" name="cbl" value="1" /> 
<input type="checkbox" id="cbl2" name="cbl" value="2" /> 
<input type="checkbox" id="cbl3" name="cbl" value="3" /> 
<input type="checkbox" id="cbl4" name="cbl" value="4" /> 
<input type="checkbox" id="cbl5" name="cbl" value="5" /> 
<input type="checkbox" id="cbl6" name="cbl" value="6" /> 
<input type="checkbox" id="cbl7" name="cbl" value="7" /> 
<input type="checkbox" id="cbl8" name="cbl" value="8" /> 

現在我有值的數組：

var values = ["2", "4", "7", "8"]; 

現在我該如何結束與我的組複選框看起來像這樣：

<input type="checkbox" id="cbl1" name="cbl" value="1" /> 
<input type="checkbox" id="cbl2" name="cbl" value="2" checked="checked" /> 
<input type="checkbox" id="cbl3" name="cbl" value="3" /> 
<input type="checkbox" id="cbl4" name="cbl" value="4" checked="checked" /> 
<input type="checkbox" id="cbl5" name="cbl" value="5" /> 
<input type="checkbox" id="cbl6" name="cbl" value="6" /> 
<input type="checkbox" id="cbl7" name="cbl" value="7" checked="checked" /> 
<input type="checkbox" id="cbl8" name="cbl" value="8" checked="checked" /> 

我必須使用兩個for-loop來做到這一點嗎？有沒有一種方式在普通的JavaScript或jQuery不涉及必須循環兩次？

Answer 1

API docs demo

var values = ["2", "4", "7", "8"]; 
 

 
$('input[name="cbl"]').val(values)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" id="cbl1" name="cbl" value="1" /> 
 
<input type="checkbox" id="cbl2" name="cbl" value="2" /> 
 
<input type="checkbox" id="cbl3" name="cbl" value="3" /> 
 
<input type="checkbox" id="cbl4" name="cbl" value="4" /> 
 
<input type="checkbox" id="cbl5" name="cbl" value="5" /> 
 
<input type="checkbox" id="cbl6" name="cbl" value="6" /> 
 
<input type="checkbox" id="cbl7" name="cbl" value="7" /> 
 
<input type="checkbox" id="cbl8" name="cbl" value="8" />

Answer 2

創建數組中的一個選擇，並檢查他們都

$('#cbl' + values.join(', #cbl')).prop('checked', true); 

FIDDLE

這是使用的ID，因爲這是一個更好的方式來選擇比數值的元素，如果你仍然想使用的值，可以使用相同的概念

$('[value="' + values.join('"], [value="') + '"]').prop('checked', true); 

FIDDLE

，或者你可以過濾

$('input[type="checkbox"]').filter(function() { 
    return $.inArray(this.value, values) != -1; 
}).prop('checked', true);