JavaScript:如何检测是否选中了HTML复选框？

Question

我如何能:

1. 检测是否已单击/选中HTML复选框？
2. 检索哪个复选框已被选中？

示例代码:

<FORM ACTION="...">
<INPUT TYPE=CHECKBOX VALUE="1">1 bedroom<BR>
<INPUT TYPE=CHECKBOX VALUE="2">2 bedrooms<BR>
<INPUT TYPE=CHECKBOX VALUE="3">3 bedrooms<BR>
<INPUT TYPE=CHECKBOX VALUE="4+">4+ bedrooms<P>
</FORM>

含义,

1. 如果网络用户选择"1间卧室",我想要一个事件来通知我用户选择"1卧室".
2. 如您所见,用户可以选择多个复选框.例如,他们可能希望看到有"1间卧室"或"2间卧室"的房屋.所以他们会选中这两个复选框.如果选中多个复选框,如何检索复选框值？

如果有帮助,我会愿意使用JQuery来简化这一过程.

Answer 1

jQuery来救援!(因为你这样标记):

$('input:checkbox[name=bedrooms]').click(function() {
  var values = $('input:checkbox[name=bedrooms]:checked').map(function() {
    return this.value
  }).get();

  // do something with values array
})

(确保name="bedrooms"在html中为您的复选框添加一个属性;无论如何,您在提交表单时都需要它们,以便在服务器上检索它们).

我使用了一些伪选择器:

• "input:checkbox" 找到页面上的所有输入复选框
• "[name=bedrooms]" 查找具有属性的所有元素 name="bedrooms"
• ":checked" 查找具有属性的所有元素 checked=true

将它们组合起来"input:checkbox[name=bedrooms]:checked",jQuery为您提供所有选中的复选框.

对于每一个,我将它们的value属性分解为一个数组,你可以简单地迭代并按照你的意愿行事.

编辑

您可以优化此代码以保存对复选框的引用,而不是告诉jQuery每次点击时都可以获取它们:

var $checkboxes = $('input:checkbox[name=bedrooms]');
$checkboxes.click(function() {
  var values = $checkboxes
    .filter(function() { return this.checked })
    .map(function() { return this.value })
    .get();

  // do something with values array
})

在这个示例中,我已将复选框保存到var中$checkboxes.单击任何复选框,而不是返回到DOM以获取已检查的复选框,我们只需过滤 $checkboxes到仅检查的复选框,并为每个复选框将value属性抽取到数组中.本get()只是对"jQueryized"数组转换成普通的JavaScript Array一个不起眼的要求.