Question

我如何：

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

示例代码：

<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间卧室”的房屋。所以他们会选中这两个复选框。如果选中多个复选框，如何检索复选框值？

如果有帮助，我愿意使用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
})

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

我使用了一些伪选择器：

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

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

对于每个我pluck out their value attribute进入一个数组，您可以简单地迭代并按照您的意愿行事。

修改

您可以优化此代码以保存对复选框的引用，而不是告诉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中。点击任意复选框后，我们只需filter $checkboxes向下查看已选中的复选框，而不是返回DOM以获取已选中的复选框，而只需将pluck out the value attribute转换为{{3}}数组。 get()只是将“jQueryized”数组转换为常规JavaScript数组的一个模糊要求。

Answer 2

1）使用onclick属性。
2）你可以给他们各自相同的名字，并使用$('input[name=yourname]:checked')来获取所有名称。

根据要求[编辑]，这是一个SSCCE。

<!doctype html>
<html>
    <head>
        <script src="jquery.js"></script>
        <script>
            $(document).ready(init);

            function init() {
                // Add onclick function to every checkbox with name "bedrooms".
                $('input[name=bedrooms]').click(showCheckedValues);
            }

            function showCheckedValues() {
                // Gather all values of checked checkboxes with name "bedrooms".
                var checked = $('input[name=bedrooms]:checked').map(function() {
                    return this.value;
                }).get();
                alert(checked);
            }
        </script>
    </head>
    <body>
        <form>
            <input type="checkbox" name="bedrooms" value="1">1 bedroom<br>
            <input type="checkbox" name="bedrooms" value="2">2 bedroom<br>
            <input type="checkbox" name="bedrooms" value="3">3 bedroom<br>
            <input type="checkbox" name="bedrooms" value="4+">4+ bedroom<br>
        </form>
    </body>
</html>

Answer 3

  <form name="myForm">
    <input type="checkbox" name="myCheck" 
       value="My Check Box"> Check Me
  </form>

   <a href="#" onClick="window.alert(document.myForm.myCheck.checked ? 'Yes' : 'No');">Am I Checked?</a>

这是来自Arman Danesh的10个简单步骤或更少的JavaScript教科书 - 所以我认为这是有效的。希望它有所帮助

Answer 4

为复选框元素指定名称和/或ID，以便您可以在代码中区分它们。然后，如果要处理检查/取消选中状态更改，请使用jQuery添加bind的事件。

Answer 5

在复选框上使用ID。

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



$('c1').checked // returns whether the 1 bedroom checkbox is true or false

Answer 6

您可以在复选框上使用.checked属性来检索是否已选中复选框。要在选中复选框时触发事件，可以在jquery中使用click事件。类似下面的内容可以列出页面上已检查过的所有复选框。

$("input[type='checkbox']").click(function() {
    // if you want information about the specific checkbox that was clicked        
    alert("checkbox name : " + $(this).name + " | checked : " + $(this).checked);

    // if you want to do something with ALL the checkboxes on click. 
    $.each($["input[type='checkbox']", function(i, checkEl) {
       // put any of your code to do something with the checkboxes here.
       alert("checkbox name : " + checkEl.name + " | checked : " + checkEl.checked);
    });
});

Answer 7

您可以使用事件来查看是否选中了复选框（onChange）。您可以在Essential Javascript教程中阅读更多相关信息（请参阅标题为： Javascript是一种事件驱动语言的部分）

Answer 8

标记：

...<input type="checkbox">...

检测是否已单击/选中HTML复选框？

a：使用jQuery 1.7 +：

$(function(){
    $("input").click(function () {
        console.log($(this)[0].checked);
    });      
});

检索哪个复选框已被选中？

a：再次使用jQuery 1.7 +：

console.log($('input:checked'));

希望这有帮助。

Answer 9

如果您不想使用JQuery，可以随时使用

document.GetElementById("cbxCheckbox1");

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

9 个答案: