根据数组中的值选中复选框

Question

使用数组或值进行复选框勾选

HTML 代码：

<div id="weekdays">
<label for="saturday">  Saturday    </label><input type='checkbox' name='week_day[]' value='saturday'  id="saturday">   
<label for="sunday">    Sunday      </label><input type='checkbox' name='week_day[]' value='sunday'    id="sunday"> 
<label for="monday">    Monday      </label><input type='checkbox' name='week_day[]' value='monday'    id="monday"> 
<label for="tuesday">   Tuesday     </label><input type='checkbox' name='week_day[]' value='tuesday'   id="tuesday">    
<label for="wednesday"> Wednesday   </label><input type='checkbox' name='week_day[]' value='wednesday' id="wednesday">  
<label for="thursday">  Thursday    </label><input type='checkbox' name='week_day[]' value='thursday'  id="thursday">   
<label for="friday">    Friday      </label><input type='checkbox' name='week_day[]' value='friday'    id="friday"> 

数组

var f = ["saturday", "sunday", "monday"] 

信息 我想在这个表单中选中星期六、星期日和星期一这几天。

- Ahmed Fathi

Answer 1

jQuery选择器实际上就是一个字符串，因此只需要将数组连接成ID的字符串：

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

代码演示

- adeneo

---

逗号不应该放在#之前吗？ - Karl-André Gagnon

@Karl-AndréGagnon - 是的，应该可以，我自己刚意识到。 - adeneo

Answer 2

有一种简单的方法是迭代数组并使用 prop 方法以及 id 选择器。

for(var i=0;i<f.length;i++) {
    $('#' + f[i]).prop('checked', true)
}

检查 Fiddle

- Sushanth --

---

我想你的意思是 true 而不是 false？ - Erik Philips

Answer 3

使用数组的forEach方法，即使没有JQuery，也非常简单。

f.forEach(function(i){
  document.getElementById(i).checked = true;
});

您可以在Mozilla开发者网络上了解更多关于每个内容的信息。

- BenJamin

---

我尝试将它转换为模态表单，但它不起作用，你有什么想法吗？ 信息：我使用jQueryUI。 - Ahmed Fathi

如果你还有困难，我很乐意帮忙看一下。你想要试试写一个 fiddle 吗？ - BenJamin

如果我的数组发生了变化怎么办？例如，我通过按钮单击获取这个数组，但是数组项会随机更改。如何取消选中其他复选框？ - D.Madu

如果你想要取消勾选框，你需要遍历每个时间并根据它是否在新数组中分配true/false来进行勾选。 - BenJamin