如何在选中一个复选框后取消选中其他复选框?
P粉436688931
2023-09-02 19:15:42
<p>我正在使用 Symfony 框架,并且有一个由 EasyAdmin 插件自动生成的表单。我需要此表单仅显示无线电输入字段,但无论出于何种原因,EasyAdmin 都会创建复选框,而我还没有找到更改它的方法。</p>
<p>我遇到的问题是,当用户选中其中一个复选框时,必须取消选中所有其他复选框。换句话说,模拟无线电输入。</p>
<p>以下是创建复选框的 HTML:</p>
<ul>
<li>请注意,此复选框已选中。要取消选中复选框,请将属性<strong>btn-success</strong>更改为<strong>btn-danger</strong>,并添加另一个名为“<strong>off</strong>”的属性,第一个 div 的类声明。</li>
</ul>
<pre class="brush:php;toolbar:false;"><!-- Change btn-success to btn-danger, and add an additional class named "off" to the following div in order to uncheck checkboxes -->
<div class="toggle btn btn-xs btn-success" data-toggle="toggle" style="width: 38px; height: 23px;">
<input type="checkbox" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No">
<div class="toggle-group">
<label class="btn btn-success btn-xs toggle-on">Yes</label>
<label class="btn btn-danger btn-xs active toggle-off">No</label>
<span class="toggle-handle btn btn-default btn-xs"></span>
</div>
</div></pre>
<p>我的代码目前看起来像这样</p>
<pre class="brush:php;toolbar:false;">$('#main').find('table .toggle input[type="checkbox"]').change(function() {
$('#main').find('div .toggle .btn .btn-xs .btn-success').not($(this)).removeClass("on").removeClass("btn-success").addClass("btn-danger").addClass("off");</pre>
<p>控制台中没有错误消息;任何帮助是极大的赞赏;过去两天这让我发疯:(
});</p>
<p>下面是当前不起作用的表单和 JavaScript:</p>
<p>
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('#main').find('table .toggle input[type="checkbox"]').change(function() {
$('#main').find('div .toggle .btn .btn-xs .btn-success').not($(this)).removeClass("on").removeClass("btn-success").addClass("btn-danger").addClass("off");
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="main" class="content">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th data-property-name="id" class="sorted integer ">
<a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=ASC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
<i class="fa fa-caret-down"></i> ID
</a>
</th>
<th data-property-name="name" class=" string ">
<a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=name&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
<i class="fa fa-sort"></i> Name
</a>
</th>
<th data-property-name="start_date" class=" date ">
<a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=start_date&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
<i class="fa fa-sort"></i> Start date
</a>
</th>
<th data-property-name="end_date" class=" date ">
<a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=end_date&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
<i class="fa fa-sort"></i> End date
</a>
</th>
<th data-property-name="current" class=" toggle ">
<a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=current&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
<i class="fa fa-sort"></i> Current
</a>
</th>
<th>
<span>Actions</span>
</th>
</tr>
</thead>
<tbody>
<tr data-id="4">
<td data-label="ID" class="sorted integer ">
4
</td>
<td data-label="Name" class=" string ">
<span title="SY 2022-2023">SY 2022-2023</span>
</td>
<td data-label="Start date" class=" date ">
<time datetime="2022-07-01T00:00:00-04:00" title="Fri, 01 Jul 2022 00:00:00 -0400">2022-07-01</time>
</td>
<td data-label="End date" class=" date ">
<time datetime="2023-06-30T00:00:00-04:00" title="Fri, 30 Jun 2023 00:00:00 -0400">2023-06-30</time>
</td>
<td data-label="Current" class=" toggle ">
<div class="toggle btn btn-success btn-xs" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" checked="" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No">
<div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
</div>
</td>
<td data-label="Actions" class="actions">
<a href="http://localhost:8000/view-program/4">View</a>
<a class="text-primary action-edit" title="" href="/admin/?action=edit&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=4"
target="_self">Edit</a>
<a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=4"
target="_self">Delete</a>
</td>
</tr>
<tr data-id="3">
<td data-label="ID" class="sorted integer ">
3
</td>
<td data-label="Name" class=" string ">
<span title="SY 2021-2022">SY 2021-2022</span>
</td>
<td data-label="Start date" class=" date ">
<time datetime="2021-07-01T00:00:00-04:00" title="Thu, 01 Jul 2021 00:00:00 -0400">2021-07-01</time>
</td>
<td data-label="End date" class=" date ">
<time datetime="2022-06-30T00:00:00-04:00" title="Thu, 30 Jun 2022 00:00:00 -0400">2022-06-30</time>
</td>
<td data-label="Current" class=" toggle ">
<div class="toggle btn btn-danger off btn-xs" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No">
<div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
</div>
</td>
<td data-label="Actions" class="actions">
<a href="http://localhost:8000/view-program/3">View</a>
<a class="text-primary action-edit" title="" href="/admin/?action=edit&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=3"
target="_self">Edit</a>
<a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=3"
target="_self">Delete</a>
</td>
</tr>
<tr data-id="2">
<td data-label="ID" class="sorted integer ">
2
</td>
<td data-label="Name" class=" string ">
<span title="SY 2019-2020">SY 2019-2020</span>
</td>
<td data-label="Start date" class=" date ">
<time datetime="2019-07-01T00:00:00-04:00" title="Mon, 01 Jul 2019 00:00:00 -0400">2019-07-01</time>
</td>
<td data-label="End date" class=" date ">
<time datetime="2020-06-30T00:00:00-04:00" title="Tue, 30 Jun 2020 00:00:00 -0400">2020-06-30</time>
</td>
<td data-label="Current" class=" toggle ">
<div class="toggle btn btn-danger off btn-xs" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No">
<div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
</div>
</td>
<td data-label="Actions" class="actions">
<a href="http://localhost:8000/view-program/2">View</a>
<a class="text-primary action-edit" title="" href="/admin/?action=edit&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=2"
target="_self">Edit</a>
<a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=2"
target="_self">Delete</a>
</td>
</tr>
<tr data-id="1">
<td data-label="ID" class="sorted integer ">
1
</td>
<td data-label="Name" class=" string ">
<span title="SY 2020-2021">SY 2020-2021</span>
</td>
<td data-label="Start date" class=" date ">
<time datetime="2020-07-01T00:00:00-04:00" title="Wed, 01 Jul 2020 00:00:00 -0400">2020-07-01</time>
</td>
<td data-label="End date" class=" date ">
<time datetime="2021-06-30T00:00:00-04:00" title="Wed, 30 Jun 2021 00:00:00 -0400">2021-06-30</time>
</td>
<td data-label="Current" class=" toggle ">
<div class="toggle btn btn-xs btn-danger off" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No" checked="checked">
<div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
</div>
</td>
<td data-label="Actions" class="actions">
<a href="http://localhost:8000/view-program/1">View</a>
<a class="text-primary action-edit" title="" href="/admin/?action=edit&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=1"
target="_self">Edit</a>
<a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=1"
target="_self">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</section></code></pre>
</p>
您可以挂钩表格,然后使用它来查找复选框。我使用第一个检查的来设置初始状态,但如果没有,您可能需要调整它。
可能需要更详细一点,只是为了使解决方案更加清晰。
每一条评论都使其始终处于开启状态。如果您希望以编程方式打开/关闭它们,您可以将
'change'
事件更改为click
您可以在更改事件处理程序中操作复选框的类。这不是选中/取消选中复选框的方式。
请阅读此使用 jquery 选中/取消选中复选框? 和这个 jQuery。如何取消选中除一个(已选中)之外的所有复选框
以下是具体操作方法:
这是工作示例:https://jsfiddle.net/fL9dknp7/