仅选中一个复选框并取消选中其他复选框答案

【问题标题】：Check only one checkbox and unchek others仅选中一个复选框并取消选中其他复选框
【发布时间】：2023-04-05 15:25:01
【问题描述】：

我当时试图只选中一个复选框，而其他复选框则取消选中，但是当我想选中新的 chekcbox 时，pervious 将取消选中等等。

我试过这个代码：

JS 文件

$('input[type="checkbox"]').click(function() {
$(".check_class").attr("checked", false);
$(this).attr("checked", true);    
});

HTML 文件

    <ons-list-header>Takistused</ons-list-header>
    <ons-list-item modifier="tappable">
      <label class="checkbox checkbox--noborder checkbox--list-item">
        <input type="checkbox" id="example">
        <div class="checkbox__checkmark checkbox--noborder__checkmark checkbox--list-item__checkmark"></div>
        vihmaveerenn
      </label>
    </ons-list-item>
    <ons-list-item modifier="tappable">
      <label class="checkbox checkbox--noborder checkbox--list-item" id="test">
        <input type="checkbox" id="example">
        <div class="checkbox__checkmark checkbox--noborder__checkmark checkbox--list-item__checkmark" ></div>
        äärekivi
      </label>
    </ons-list-item>
    <ons-list-item modifier="tappable" >
      <label class="checkbox checkbox--noborder checkbox--list-item" id="test1">
        <input type="checkbox" id="example">
        <div class="checkbox__checkmark checkbox--noborder__checkmark checkbox--list-item__checkmark"></div>
        munakivi tee
      </label>
    </ons-list-item>
  </ons-list>

我做错了什么？我尝试了不同的方法，但它在现场使用时不起作用。

【问题讨论】：

为什么不只使用单选按钮？这就是它们的用途:)（如果您坚持，您可以随时将它们设置为看起来像复选框）
请注意，您的示例是无效的 HTML，因为您有重复的 ID
TrueBlueAussie TNX 为您提供建议。
您需要使用单选按钮，这就是它们的用途。
TrueBlueAussie，感谢您的帮助，您的问题是您提到的最好的原因，我必须使用单选按钮而不是复选框:)

标签： jquery onsen-ui

【解决方案1】：

试试.not(this)，如下所示：

$(document).on('click', 'input[type="checkbox"]', function() {      
    $('input[type="checkbox"]').not(this).prop('checked', false);      
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="one" />
<input type="checkbox" id="two" />
<input type="checkbox" id="three" />
<input type="checkbox" id="four" />

【讨论】：

TNX :) 寻求帮助，我忘记了 html id 规则 :)
如果你像@TrueBlueAussie 所说的那样使用收音机会更好
另请注意：这里不需要if 检查，因为它不能处于可能重要的状态。

【解决方案2】：

对于这种类型的功能，您确实应该使用单选按钮，但是您可以使用 not 从一组匹配项中简单地排除一个项目，如下所示：

$('input[type="checkbox"]').click(function() {
   $('input[type="checkbox"]').not(this).prop("checked", false);
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/4n2e31oq/

请注意，对于某些属性，例如 checked，您需要使用 prop 而不是 attr。

您可以通过缓存复选框的选择来提高效率：

var $checks = $('input[type="checkbox"]');
$checks.click(function() {
   $checks.not(this).prop("checked", false);
});

http://jsfiddle.net/TrueBlueAussie/4n2e31oq/1/

【讨论】：

【解决方案3】：

 $(function () {
        $('input[type=checkbox]').click(function () {
             var chkBox = document.getElementById('<%= chkBranchRoleTransaction.ClientID %>');
            var chks = chkBox.getElementsByTagName('INPUT');
             for (i = 0; i < chks.length; i++) {
                 chks[i].checked = false;
             }
             $(this)[0].checked = true;
         });
    });

【讨论】：

请编辑更多信息。仅代码和“试试这个”的答案是 discouraged，因为它们不包含可搜索的内容，也没有解释为什么有人应该“试试这个”。

【解决方案4】：

如果你想使用类来做到这一点。除了当前元素之外，您已经添加了类并删除了。

jQuery(document).on('click', '.esg-filterbutton', function() { 
    jQuery(this).addClass('selected');     
    jQuery('.esg-filterbutton').not(this).removeClass('selected');  
});

【讨论】：