代码之家 › 专栏 › 技术社区 › Synthaze

JQuery每个复选框行只选中一个复选框

checkbox jquery html

Synthaze · 技术社区 · 5 年前

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

<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>

1 回复 | 直到 5 年前

Ved Singhal 5 年前

请使用此代码段。

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

推荐文章

Mickey Vershbow · 无法获取复选框的“checked”属性

4 年前

XAZG ÐÐµÐ¸Ð·Ð²ÐµÑÑÐ½ÑÐ¹ · 如何在for js之后重置字符串变量

4 年前

SãOãNã JãOãã · Google sheets复选标记条件格式化

4 年前

Ranjith Raina · 在jquery中,可以将所有复选框值转换为逗号分隔的字符串

4 年前

Alex · 引导对齐表单开关左侧的标签

4 年前

Khilen Maniyar · 角度2:带有复选框的阵列工作不正常

8 年前

Yash Saraiya · jQuery datatable:在每个分页上启用几个文本框

8 年前

Kais · 带有输入复选框的表格选中/取消选中

8 年前

Silu K · 单击复选框后,如何将之前的所有复选框设置为在angular 4中选中

8 年前

yuggmeister · 如何使自定义复选框可访问?

8 年前