gpt4 book ai didi

javascript - 无法使用 jQuery 定位类

转载 作者:行者123 更新时间:2023-11-28 11:30:23 24 4
gpt4 key购买 nike

嗨,我正在尝试使用 jQuery 访问名为“onlyTwo”的类。我想访问该类的原因是用户只能选择三个复选框中的两个。我的功能仅在我删除输入标记之外的“p”和“label”标记时才起作用,所以我确定问题出在这一行:

$('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>

最佳答案

复选框不是 .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>

关于javascript - 无法使用 jQuery 定位类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51666723/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com