jquery 获取带有属性名称和检查条件的复选框组

Question

我是脚本新手。我在表单中有多个复选框组，我想在是否选中任何具有 attr 名称的复选框时应用条件。我在这里找到了许多带有硬编码名称属性的答案，但到目前为止还没有选中所有具有相同名称属性的复选框。这是我的代码。

HTML

<div class="form">
    <div class="formbox">
        <label>Contact Type:</label>
    <div class="checkBox">
       <input type="checkbox" id="Check1" name="Contact" value="email" class="required checkField">
        <label for="Check1">Email</label>
    </div>
    <div class="checkBox">
        <input type="checkbox" id="Check2" name="Contact" value="phone" class="checkField">
        <label for="Check2">Phone</label>
    </div>
    <div class="checkBox">
        <input type="checkbox" id="Check3" name="Contact" value="mail" class="checkField">
        <label for="Check3">Mail</label>
    </div>          
    </div>

    <div class="formbox">
        <label>Fruits:</label>
    <div class="checkBox">
       <input type="checkbox" id="Apple" name="Fruits" value="email" class="required checkField">
        <label for="Apple">Apple</label>
    </div>

    <div class="checkBox">
        <input type="checkbox" id="banana" name="Fruits" value="phone" class="checkField">
        <label for="banana">banana</label>
    </div>

    <div class="checkBox">
        <input type="checkbox" id="Orange" name="Fruits" value="mail" class="checkField">
        <label for="Orange">Orange</label>
    </div>          
    </div>
</div>

JQUERY 脚本

//Trying to get the name attribute of this checkbox
var checkGroupName = $(this).attr('name');

//Trying to get all checkbox with same name attribute.
var SelectAllCheckBoxes = $( '.form' ).find( $( '.checkField' ).attr(checkGroupName) );

//Trying each loop to check if any checkbox in that group is checked or non is checked
$('SelectAllCheckBoxes').each(function(i, obj) {        
        if( $(this).is(":checked").length > 0 ) {
            console.log('IS CHECKED');
        } else {
            console.log('NOT CHECKED');
        }
    });

我的代码肯定是错误的，无法正常工作。

Answer 1

第一：你可以使用.find( $( '.checkField[name="'+checkGroupName+'"]' );

第二：使用SelectAllCheckBoxes代替$('SelectAllCheckBoxes')

3rd: $(this).is(":checked").length > 0 这部分代码应该 return 一个错误

//Trying to get the name attribute of this checkbox
var checkGroupName = $(this).attr('name');

//Trying to get all checkbox with same name attribute.
var SelectAllCheckBoxes = $( '.form' ).find( '.checkField[name="'+checkGroupName+'"]' );

//Trying each loop to check if any checkbox in that group is checked or non is checked
SelectAllCheckBoxes.each(function(i, obj) {        
        if( $(this).is(":checked")) {
            console.log('IS CHECKED');
        } else {
            console.log('NOT CHECKED');
        }
});

Answer 2

您需要根据 name 属性值过滤元素。使用 Attribute Equals Selector [name="value"] and filter() 定位所需的元素

//Get all checked check-boxes of for same name.
//It will include current element also. 
//If you want to exclude it then use :not(this) i.e.  $('.form').find(...):not(this)
var SelectAllCheckBoxes = $('.form').find('.checkField[name=' + checkGroupName + ']').filter(":checked");

//Check the objects length propery
if (SelectAllCheckBoxes.length > 0) {
    console.log('IS CHECKED');
} else {
    console.log('NOT CHECKED');
}

$('.checkField:checkbox').on('change', function() {
  //Get name attribute
  var checkGroupName = $(this).attr('name');

  //Get all checked checkboxes of for same name
  var SelectAllCheckBoxes = $('.form').find('.checkField[name=' + checkGroupName + ']').filter(":checked");

  if (SelectAllCheckBoxes.length > 0) {
    console.log('IS CHECKED');
  } else {
    console.log('NOT CHECKED');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
  <div class="formbox">
    <label>Contact Type:</label>
    <div class="checkBox">
      <input type="checkbox" id="Check1" name="Contact" value="email" class="required checkField">
      <label for="Check1">Email</label>
    </div>
    <div class="checkBox">
      <input type="checkbox" id="Check2" name="Contact" value="phone" class="checkField">
      <label for="Check2">Phone</label>
    </div>
    <div class="checkBox">
      <input type="checkbox" id="Check3" name="Contact" value="mail" class="checkField">
      <label for="Check3">Mail</label>
    </div>
  </div>

  <div class="formbox">
    <label>Fruits:</label>
    <div class="checkBox">
      <input type="checkbox" id="Apple" name="Fruits" value="email" class="required checkField">
      <label for="Apple">Apple</label>
    </div>

    <div class="checkBox">
      <input type="checkbox" id="banana" name="Fruits" value="phone" class="checkField">
      <label for="banana">banana</label>
    </div>

    <div class="checkBox">
      <input type="checkbox" id="Orange" name="Fruits" value="mail" class="checkField">
      <label for="Orange">Orange</label>
    </div>
  </div>
</div>

jquery 获取带有属性名称和检查条件的复选框组

jquery get the checkbox group with attr name and check condition

checkbox

jquery

checkboxlist