使用javascript / jQuery從列表中選擇復選框

Question

我如何選擇列表或數組中具有其ID的復選框？ 可以說我有一個ID列表

var selected = 'chkbx_0,chkbx_3' 

<div id="optionList">
<input id="chkbx_0" type="checkbox" name="c_n_0" />Option 1
<input id="chkbx_1" type="checkbox" name="c_n_1" />Option 2
<input id="chkbx_2" type="checkbox" name="c_n_2" />Option 3
<input id="chkbx_3" type="checkbox" name="c_n_3" />Option 4
</div>

因此，當我運行該函數時，我希望僅在該特定div中選擇的列表中的任何內容

Answer 1

如果您可以使列表成為數組，那么它將變得非常簡單：

var idList = ["chkbx_0", "chkbx_3"];
for (var i = 0; i < idList.length; i++)
{
  $("#" + idList[i]).prop("checked", true);
}

即使您不能將初始列表放入數組中，也可以很容易地將其作為一個初步步驟：

var selected = 'chkbx_0,chkbx_3';
var idList = selected.split(","); //split the list on every comma, into an array
...

Answer 2

 var selected = 'chkbx_0,chkbx_3'; //split into array using split function var arr = selected.split(','); // here to find the length of array var len = arr.length; //for loop to checked the each string in array for(var i=0; i<=len; i++){ $('#'+arr[i]).attr('checked', true); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="optionList"> <input id="chkbx_0" type="checkbox" name="c_n_0" />Option 1 <input id="chkbx_1" type="checkbox" name="c_n_1" />Option 2 <input id="chkbx_2" type="checkbox" name="c_n_2" />Option 3 <input id="chkbx_3" type="checkbox" name="c_n_3" />Option 4 </div> 

點擊這里查看工作代碼

Answer 3

代碼說明

var selected_arr = selected.split(','); ：這里我將用逗號分隔的項目拆分為一個數組

$('#optionList input').each(function(){
    if( selected_arr.includes($(this).attr('id')) )
    {
      $(this).prop('checked', true);
    }
});

在上面的函數中，我們遍歷指定div中的所有輸入（復選框），並檢查我們創建的數組中是否存在它們的id 。 如果存在，則選中該復選框。

 var selected = 'chkbx_0,chkbx_3' ; var selected_arr = selected.split(','); $('#optionList input').each(function(){ if( selected_arr.includes($(this).attr('id')) ) { $(this).prop('checked', true); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <div id="optionList"> <input id="chkbx_0" type="checkbox" name="c_n_0" />Option 1 <input id="chkbx_1" type="checkbox" name="c_n_1" />Option 2 <input id="chkbx_2" type="checkbox" name="c_n_2" />Option 3 <input id="chkbx_3" type="checkbox" name="c_n_3" />Option 4 </div>