检查是否选中了特定复选框

Check if specific checkboxes are checked

本文关键字：复选框 是否 检查      更新时间：2023-09-26

>我有一个带有多个复选框的表单，如下所示：

<form id="myForm">
   <input type="checkbox" id="first" />
   <input type="checkbox" id="second" />
   <input type="checkbox" id="third" />
</form>

我只想在选中复选框 1 和 3 时执行某些操作（即警报框）。

我知道如何像这样定位一个复选框：

$('#first').click(function () {
    if ($(this).prop("checked") == true) {
        alert("I'm checked!");
    }
});

但是有没有办法为特定的多个复选框做到这一点？

这个答案在你想要的前提下工作，当任何一个指定的复选框被选中时，而不是当它们都被选中时，这可以通过逗号分隔的选择器来完成：

$('#first, #third')

或者通过使用类名来标识相关元素：

$('.alertIfSelectedClassName')

使用以下的 HTML：

<form id="myForm">
  <input type="checkbox" class="alertIfSelectedClassName" id="first" />
  <input type="checkbox" id="second" />
  <input type="checkbox" class="alertIfSelectedClassName" id="third" />
</form>

使用CSS属性选择，n基于共享属性，如<input>名称：

$('input[name=alertIfSelectedElementName')

.HTML：

<form id="myForm">
  <input type="checkbox" name="alertIfSelectedElementName" id="first" />
  <input type="checkbox" id="second" />
  <input type="checkbox" name="alertIfSelectedElementName" id="third" />
</form>
您可以使用

is(':checked')检查复选框，您可以使用下面的符号检查示例检查&&检查是否选中了两者。

希望这有帮助。

$("#first, #third").click(function () {
  if ($('#first').is(':checked') && $('#third').is(':checked')) 
  {
    alert("Message!");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
   <input type="checkbox" id="first" />
   <input type="checkbox" id="second" />
   <input type="checkbox" id="third" />
</form>

您可以遍历它们：

<form id="myForm">
    <input type="checkbox" name="somename" id="first" />
    <input type="checkbox" name="somename" id="second" />
    <input type="checkbox" name="somename" id="third" />
</form>
$('checkbox[name=somename"]').each(function () {
    if ($(this).prop("checked") == true) {
        alert("I'm checked!");
    }
});

试试这个： 

      $('#first, #third').click(function () {
          var firstChecked = $('#first).prop("checked") == true);
          var thirdChecked = $('#third).prop("checked") == true);
          if (firstChecked  && thirdChecked ) {
             alert("I'm checked!");
          }
       })

https://jsfiddle.net/p1zjaw46/

var $toCheck = $('#first').add('#third');
$(function () {
  $('input[type="checkbox"]').on('change', function () {

    if ( $toCheck.filter(':checked').length === $toCheck.length )
      alert('good');
    else
      alert('bad');
  })
});

基本上：

  1. 将要签入的项目缓存到 var 中。 在这种情况下$toCheck。
  2. 当有任何更改时，请进行快速检查。您可以按 ":checked" 进行筛选，并将filter结果的长度与原始复选框集的长度进行比较。

如果它们不相等，则至少未选中一个预期的框！

为什么这个答案比其他答案更好？

它是可扩展的

您需要做的就是向$toCheck添加新元素，其余的都是自动的

为了定位特定元素，请尝试使用 css 类作为选择器。此外，包括输入type，以便不会与具有相同类的其他元素发生任何冲突。为了检查是否选中了所有必需的复选框，您可以使用.each()循环并确定它们是否全部选中并基于此显示alert()。 以下方法可避免任何硬编码和multiple if检查。

$("input:checkbox.test").click(function()
{
    var allchecked = true;
    $("input:checkbox.test").each(function(){
        if(!$(this).is(":checked")) 
           allchecked = false;         
    });
    if(allchecked)
      alert("Im checked");
});

工作示例 ： https://jsfiddle.net/DinoMyte/fy1asfws/34/

相关文章：