JQuery Toggle 仅 1 项，其他未单击

Posted 2023-02-25

【中文标题】JQuery Toggle 仅 1 项，其他未单击

【英文标题】：JQuery Toggle only 1 item and the others not clicked

【发布时间】：2010-07-18 20:49:37

【问题描述】：

好的，所以我有这个 Jquery，它将切换页面上的一些单选按钮。我想要它，所以当有人点击其中一个单选按钮时，其他人不会被点击。目前我拥有它的方式，他们一次可以选择 3 个，我需要它像一个普通的单选按钮一样，一个被点击而其他的没有

jQuery:

$(function () 
  $('.box-ul .btn .dot').click(function () 
    $(this).toggleClass('clicked');
  );
);

html：

<div class="box-ul box-video right">
    <ul>
        <li><span class="yes"></span><p>Easy to Use</p></li>
        <li><span class="yes"></span><p>Step by Step<br /><span>details instructions</span></p></li>
        <li><span class="yes"></span><p>Setup time<br /><span>under 30 mins</span></p></li>
        <li class="btn btn-expanded">
          <div class="btn-t">
            <span class="dot left"></span>
          <p class="left">Expanded<br />
            <span>This is the extend button It has space for slightly more info.</span>
          </p>
            <div class="cl">&nbsp;</div>
          </div>
        </li>
        <li class="btn">
          <div class="btn-t">
            <span class="dot left"></span>
            <p class="left">Green Doggies</p>
            <div class="cl">&nbsp;</div>
          </div>
          </li>
        <li class="btn">
          <div class="btn-t">
            <span class="dot left"></span>
            <p class="left">Email Support</p>
            <div class="cl">&nbsp;</div>
          </div>
        </li>
    </ul>
</div>

【参考方案1】：

在所有不是你第一次点击的匹配元素上使用.removeClass()类，像这样：

$('.box-ul .btn .dot').click(function () 
  $('.box-ul .btn .dot').not(this).removeClass('clicked');    
  $(this).toggleClass('clicked');
);​

You can test it here。在这种情况下，我们选择所有其他匹配的'.box-ul .btn .dot' 元素，过滤掉我们用.not() 点击的元素，并对它们执行.removeClass()。最后一部分仍然是.toggleClass()，因此您也可以通过单击活动的来取消选择。如果您不希望能够取消选择（更像是单选按钮），那么只需将其更改为 .addClass()。

【讨论】：

@Matt - Welcome :) 稍微编辑了您的问题...仅供将来参考，如果您将 javascript 和 HTML 分成不同的代码块，您将在两者上获得更好的代码突出显示:)

【参考方案2】：

我不会在所有内容上都使用 .removeClass()，而是这样做：

$(this).closest('.box-ul').find('.btn .dot').not(this).removeClass('clicked');

这只会取消选择单击的单选按钮的 .box-ul 中的那些。