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

Question

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

<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。所以我允许每行检查一个船头。

Answer 1

请使用此代码片段。

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