无法使用jQuery定位类

时间：2018-08-03 06:43:30

标签： javascript jquery

嗨，我正在尝试使用jQuery访问名为“ onlyTwo”的类。我之所以要访问该类，是因为用户只能在三个复选框中选择两个。我的功能仅在删除输入标签之外的“ p”和“标签”标签时有效，因此我确定问题出在此行：

$('input.onlyTwo')

谢谢！ 

  

//only allow the user to select 2 checkboxes
var limit = 2;
$('input.onlyTwo').on('change', function(evt) {
    if ($(this).siblings(':checked').length >= limit) {
        this.checked = false;
        alert('You can only select ' + limit + ' items!');
    }
});

 
 <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Order Form</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    
    <body>
        <form id="reviewOrder">
            <fieldset>
                <legend>Suite Packages</legend>
                <h6 class="fieldset_description">Please choose your delivery time for each item.<br> 12 order minimum</h6>
                <div class="expander">
                    <a href="javascript:void(0)" class="expander-trigger expander-hidden">View Suite Packages</a>
                    <div class="expander-content">
                        <div class="item">
                            <h3 class="product-title">FIRST DOWN PACKAGE<small> $15.50ea</small></h3>
                            <p>Includes: Peanuts and pretzels. Your choice of Mustang Dogs served with mustard, ketchup, white onions, relish and buns, or the Nacho Station served with grilled chicken, jalapenos, olives, onions, guacamole, sour cream and nacho cheese. Your choice of 2 salads from pasta salad, Caesar salad or seasonal fruit salad. Cookie and brownie platter.</p>
                            <div class="entreesGroup">
                                <div>
                                    <p>Salads (Choose Two)</p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_1" value="Pasta" /> Pasta</label></p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_2" value="Ceasar" /> Ceasar</label></p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_3" value="Seasonal Fruit Salad" /> Seasonal Fruit Salad</label></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
        </form>
    </body>
    </html>

5 个答案:

答案 0 :(得分：2)

复选框不是.siblings()，因此您的代码无效。

使用.closest(selector)遍历一个共同的祖先，然后定位所需的元素，即复选框。

另外还将条件更改为> 

//only allow the user to select 2 checkboxes
var limit = 2;
$('input.onlyTwo').on('change', function(evt) {
  if ($(this).closest('.entreesGroup').find(':checked').length > limit) {
    this.checked = false;
    alert('You can only select ' + limit + ' items!');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="entreesGroup">
  <div>
    <p>Salads (Choose Two)</p>
    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_1" value="Pasta" /> Pasta</label></p>
    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_2" value="Ceasar" /> Ceasar</label></p>
    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_3" value="Seasonal Fruit Salad" /> Seasonal Fruit Salad</label></p>
  </div>
</div>

答案 1 :(得分：2)

.siblings()仅在它们位于同一父元素下时才起作用，在您的情况下，您的复选框位于<p>下，

您可以定位到最接近的父元素，即entreesGroup div，并找到在父元素下选中的复选框

还要在检查条件的同时删除= 

//only allow the user to select 2 checkboxes
var limit = 2;
$('input.onlyTwo').on('change', function(evt) {
    if ($(this).closest(".entreesGroup").find(':checked').length > limit) {
        this.checked = false;
        alert('You can only select ' + limit + ' items!');
    }
});

 
 <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Order Form</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    
    <body>
        <form id="reviewOrder">
            <fieldset>
                <legend>Suite Packages</legend>
                <h6 class="fieldset_description">Please choose your delivery time for each item.<br> 12 order minimum</h6>
                <div class="expander">
                    <a href="javascript:void(0)" class="expander-trigger expander-hidden">View Suite Packages</a>
                    <div class="expander-content">
                        <div class="item">
                            <h3 class="product-title">FIRST DOWN PACKAGE<small> $15.50ea</small></h3>
                            <p>Includes: Peanuts and pretzels. Your choice of Mustang Dogs served with mustard, ketchup, white onions, relish and buns, or the Nacho Station served with grilled chicken, jalapenos, olives, onions, guacamole, sour cream and nacho cheese. Your choice of 2 salads from pasta salad, Caesar salad or seasonal fruit salad. Cookie and brownie platter.</p>
                            <div class="entreesGroup">
                                <div>
                                    <p>Salads (Choose Two)</p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_1" value="Pasta" /> Pasta</label></p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_2" value="Ceasar" /> Ceasar</label></p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_3" value="Seasonal Fruit Salad" /> Seasonal Fruit Salad</label></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
        </form>
    </body>
    </html>

答案 2 :(得分：2)

尝试以下操作：您可以获取所有选中复选框的长度，然后将其与if条件进行比较。参见下面的代码

//only allow the user to select 2 checkboxes
var limit = 2;
$('input.onlyTwo').on('change', function(evt) {
    var len = $('input.onlyTwo:checked').length;
    if (len > limit) {
        $(this).prop('checked', false);
        alert('You can only select ' + limit + ' items!');
    }
});
<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Order Form</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    
    <body>
        <form id="reviewOrder">
            <fieldset>
                <legend>Suite Packages</legend>
                <h6 class="fieldset_description">Please choose your delivery time for each item.<br> 12 order minimum</h6>
                <div class="expander">
                    <a href="javascript:void(0)" class="expander-trigger expander-hidden">View Suite Packages</a>
                    <div class="expander-content">
                        <div class="item">
                            <h3 class="product-title">FIRST DOWN PACKAGE<small> $15.50ea</small></h3>
                            <p>Includes: Peanuts and pretzels. Your choice of Mustang Dogs served with mustard, ketchup, white onions, relish and buns, or the Nacho Station served with grilled chicken, jalapenos, olives, onions, guacamole, sour cream and nacho cheese. Your choice of 2 salads from pasta salad, Caesar salad or seasonal fruit salad. Cookie and brownie platter.</p>
                            <div class="entreesGroup">
                                <div>
                                    <p>Salads (Choose Two)</p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_1" value="Pasta" /> Pasta</label></p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_2" value="Ceasar" /> Ceasar</label></p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_3" value="Seasonal Fruit Salad" /> Seasonal Fruit Salad</label></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
        </form>
    </body>
    </html>

答案 3 :(得分：1)

在closest p和siblings选中的情况下使用find。

//only allow the user to select 2 checkboxes
var limit = 2;
$('input.onlyTwo').on('change', function(evt) {

  if ($(this).closest('p').siblings().find(':checked').length == limit) {
    this.checked = false;
    alert('You can only select ' + limit + ' items!');
  }
});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Order Form</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <form id="reviewOrder">
    <fieldset>
      <legend>Suite Packages</legend>
      <h6 class="fieldset_description">Please choose your delivery time for each item.<br> 12 order minimum</h6>
      <div class="expander">
        <a href="javascript:void(0)" class="expander-trigger expander-hidden">View Suite Packages</a>
        <div class="expander-content">
          <div class="item">
            <h3 class="product-title">FIRST DOWN PACKAGE<small> $15.50ea</small></h3>
            <p>Includes: Peanuts and pretzels. Your choice of Mustang Dogs served with mustard, ketchup, white onions, relish and buns, or the Nacho Station served with grilled chicken, jalapenos, olives, onions, guacamole, sour cream and nacho cheese. Your
              choice of 2 salads from pasta salad, Caesar salad or seasonal fruit salad. Cookie and brownie platter.</p>
            <div class="entreesGroup">
              <div>
                <p>Salads (Choose Two)</p>
                <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_1" value="Pasta" /> Pasta</label></p>
                <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_2" value="Ceasar" /> Ceasar</label></p>
                <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_3" value="Seasonal Fruit Salad" /> Seasonal Fruit Salad</label></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </fieldset>
  </form>
</body>

</html>

答案 4 :(得分：1)

问题是使用兄弟姐妹功能。兄弟姐妹在与父元素相同级别的dom元素中搜索。因此，在您的情况下，p和label内只有two复选框，因此该复选框没有其他同级对象。您需要使用父项的引用来访问复选框。检查工作片段。另外，您的条件应该是>而不是> = 

//only allow the user to select 2 checkboxes
var limit = 2;
$('input.onlyTwo').on('change', function(evt) {
    if ($('.entreesGroup .onlyTwo:checked').length > limit) {
        this.checked = false;
        alert('You can only select ' + limit + ' items!');
    }
});
<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Order Form</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    
    <body>
        <form id="reviewOrder">
            <fieldset>
                <legend>Suite Packages</legend>
                <h6 class="fieldset_description">Please choose your delivery time for each item.<br> 12 order minimum</h6>
                <div class="expander">
                    <a href="javascript:void(0)" class="expander-trigger expander-hidden">View Suite Packages</a>
                    <div class="expander-content">
                        <div class="item">
                            <h3 class="product-title">FIRST DOWN PACKAGE<small> $15.50ea</small></h3>
                            <p>Includes: Peanuts and pretzels. Your choice of Mustang Dogs served with mustard, ketchup, white onions, relish and buns, or the Nacho Station served with grilled chicken, jalapenos, olives, onions, guacamole, sour cream and nacho cheese. Your choice of 2 salads from pasta salad, Caesar salad or seasonal fruit salad. Cookie and brownie platter.</p>
                            <div class="entreesGroup">
                                <div>
                                    <p>Salads (Choose Two)</p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_1" value="Pasta" /> Pasta</label></p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_2" value="Ceasar" /> Ceasar</label></p>
                                    <p><label><input class="onlyTwo" type="checkbox" name="FIRST DOWN PACKAGE_choice_3" value="Seasonal Fruit Salad" /> Seasonal Fruit Salad</label></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
        </form>
    </body>
    </html>

相关问题
最新问题