jQuery - 在组复选框中设置单个复选框的值答案

【问题标题】：jQuery - setting the value of single checkbox in a group checkboxjQuery - 在组复选框中设置单个复选框的值
【发布时间】：2016-02-02 04:30:13
【问题描述】：

我有如下四个复选框

<label> <input type="checkbox" id="ca" value="0" name="ca"> CA </label>
<label> <input type="checkbox" id="nv" value="0" name="nv"> NV </label>
<label> <input type="checkbox" id="tx" value="0" name="tx"> TX </label>
<label> <input type="checkbox" id="fl" value="0" name="fl"> FL </label>

当用户选中/取消选中每个复选框时，它应该更改相应复选框的值（选中 = 1 和取消选中 = 0）

我知道我可以通过为每个复选框单独编写代码来做到这一点。

但是，我想知道我们是否可以使用 jQuery 在一行（或更少行）中编写它

【问题讨论】：

这毫无意义。为什么不在标记中设置值？
@charlietfl，你能解释一下吗？
为什么需要更改值而不是只使用框的.checked 状态？
我想更改该值以便可以将其传递给 POST
这是 ajax 帖子。所以我将值设置为 post 参数。

标签： jquery checkbox

【解决方案1】：

您可以将“更改”侦听器绑定到每个复选框。请参阅 jQuery 的 .on() 和 .change()。
然后根据是选中还是未选中来设置“已更改”复选框的值。

下面，我使用JavaScript's this keyword 来引用被点击的复选框，并使用ternary operator 根据其“已检查”状态设置其值。

jQuery('input[type=checkbox]').on('change', function() {
  this.value = this.checked ? 1 : 0;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" id="ca" value="0" name="ca">CA</label>
<label><input type="checkbox" id="nv" value="0" name="nv">NV</label>
<label><input type="checkbox" id="tx" value="0" name="tx">TX</label>
<label><input type="checkbox" id="fl" value="0" name="fl">FL</label>

【讨论】：