JQuery 每个复选框行只检查一个复选框

Posted 2023-05-08

【中文标题】JQuery 每个复选框行只检查一个复选框

【英文标题】：JQuery check only one checkbox per checkbox line

【发布时间】：2021-04-04 15:35:40

【问题描述】：

我的页面上有多个复选框行，使用此模板：

<div class="row">
  <div class="col">
    <input type="checkbox" id="ft_checkbox" name="ft_checkbox" value="CSV" checked>
    <label for="ft_checkbox">CSV</label>
    &nbsp;
    <input type="checkbox" id="ft_checkbox" name="ft_checkbox" value="JSON" >
    <label for="ft_checkbox">JSON</label>
    &nbsp;
    <input type="checkbox" id="ft_checkbox" name="ft_checkbox" value="PDF" >
    <label for="ft_checkbox">PDF</label>
    &nbsp;
    <input type="checkbox" id="ft_checkbox" name="ft_checkbox" value="XLSX" >
    <label for="ft_checkbox">XLSX</label>
  </div>
</div>

只允许选中一个复选框，我这样做：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  
  $(document).ready(function()
    $('input:checkbox').click(function() 
      $('input:checkbox').not(this).prop('checked', false);
    );
  );
  
</script>

但是，这会使所有行相互依赖。如果我在第一行选中一个框，它将取消选中整个文档中的所有框。我想将此功能应用于每一行/父 div。所以我允许每行检查一个弓。

【问题讨论】：

你想怎么做？

大声笑我不知道这就是我问的原因。带有“每个 div”的东西，然后独立处理所有 div。我是网络开发的新手，面临荒谬的问题......

【参考方案1】：

请使用此代码 sn-p。

$(document).ready(function()
    $('input:checkbox').click(function() 
        $(this).parent().find('input:checkbox').not(this).prop('checked', false);
    );
  );