How to uncheck one checkbox after checking other checkboxes?

Question

我正在使用 Symfony 框架，并且有一个由 EasyAdmin 插件自动生成的表单。我需要此表单仅显示无线电输入字段，但无论出于何种原因，EasyAdmin 都会创建复选框，而我还没有找到更改它的方法。

我遇到的问题是，当用户选中其中一个复选框时，必须取消选中所有其他复选框。换句话说，模拟无线电输入。

以下是创建复选框的 HTML：

• 请注意，此复选框已选中。要取消选中复选框，请将属性btn-success更改为btn-danger，并添加另一个名为“off”的属性，第一个 div 的类声明。

<!-- Change btn-success to btn-danger, and add an additional class named &quot;off&quot; to the following div in order to uncheck checkboxes -->
<div class=&quot;toggle btn btn-xs btn-success&quot; data-toggle=&quot;toggle&quot; style=&quot;width: 38px; height: 23px;&quot;>
    <input type=&quot;checkbox&quot; data-toggle=&quot;toggle&quot; data-size=&quot;mini&quot; data-onstyle=&quot;success&quot; data-offstyle=&quot;danger&quot; data-on=&quot;Yes&quot; data-off=&quot;No&quot;>
        <div class=&quot;toggle-group&quot;>
            <label class=&quot;btn btn-success btn-xs toggle-on&quot;>Yes</label>
            <label class=&quot;btn btn-danger btn-xs active toggle-off&quot;>No</label>
            <span class=&quot;toggle-handle btn btn-default btn-xs&quot;></span>
        </div>
</div>

我的代码目前看起来像这样

$('#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");

控制台中没有错误消息；任何帮助是极大的赞赏;过去两天这让我发疯:( });

下面是当前不起作用的表单和 JavaScript：

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

<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;amp;entity=SchoolYear&amp;amp;sortField=id&amp;amp;sortDirection=ASC&amp;amp;page=1&amp;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;amp;entity=SchoolYear&amp;amp;sortField=name&amp;amp;sortDirection=DESC&amp;amp;page=1&amp;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;amp;entity=SchoolYear&amp;amp;sortField=start_date&amp;amp;sortDirection=DESC&amp;amp;page=1&amp;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;amp;entity=SchoolYear&amp;amp;sortField=end_date&amp;amp;sortDirection=DESC&amp;amp;page=1&amp;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;amp;entity=SchoolYear&amp;amp;sortField=current&amp;amp;sortDirection=DESC&amp;amp;page=1&amp;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;amp;entity=SchoolYear&amp;amp;sortField=id&amp;amp;sortDirection=DESC&amp;amp;page=1&amp;amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;amp;id=4"
              target="_self">Edit</a>

            <a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;amp;entity=SchoolYear&amp;amp;sortField=id&amp;amp;sortDirection=DESC&amp;amp;page=1&amp;amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;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;amp;entity=SchoolYear&amp;amp;sortField=id&amp;amp;sortDirection=DESC&amp;amp;page=1&amp;amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;amp;id=3"
              target="_self">Edit</a>

            <a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;amp;entity=SchoolYear&amp;amp;sortField=id&amp;amp;sortDirection=DESC&amp;amp;page=1&amp;amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;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;amp;entity=SchoolYear&amp;amp;sortField=id&amp;amp;sortDirection=DESC&amp;amp;page=1&amp;amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;amp;id=2"
              target="_self">Edit</a>

            <a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;amp;entity=SchoolYear&amp;amp;sortField=id&amp;amp;sortDirection=DESC&amp;amp;page=1&amp;amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;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;amp;entity=SchoolYear&amp;amp;sortField=id&amp;amp;sortDirection=DESC&amp;amp;page=1&amp;amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;amp;id=1"
              target="_self">Edit</a>

            <a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;amp;entity=SchoolYear&amp;amp;sortField=id&amp;amp;sortDirection=DESC&amp;amp;page=1&amp;amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;amp;id=1"
              target="_self">Delete</a>

          </td>
        </tr>
      </tbody>
    </table>
  </div>


</section></code>

Answer 1

You can hook the form and then use it to find the checkboxes. I use the first one checked to set the initial state, but if not, you may need to adjust it.

Probably needs a little more detail, just to make the solution clearer.

Every comment makes it always open. If you wish to turn them on/off programmatically you can change the 'change' event to click

let $mainTable = $('#main').find('table tbody');
$mainTable.on('change', 'input[type="checkbox"]', function(event) {
  let $me = $(this);
  $me.prop("checked", true);
  let $parent = $(event.delegateTarget);
  let checks = $parent.find('input[type="checkbox"]');
  checks.not($me).prop("checked", false);
  checks.not($me).toggleClass('btn-danger off', true);
  $me.toggleClass("btn-success on", true).toggleClass('btn-danger off', false);
  // show the classes when checked/unchecked
  //console.log([...this.classList]);
});
// set up the first one as checked to mimic requirement; could be any one
$mainTable.find('input[type="checkbox"]')
  .first(':checked)')
  .trigger('change');
// now what classes it has we can log those
//console.log([...$mainTable.find('input[type="checkbox"]').first(':checked)')[0].classList]);

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

Answer 2

You can manipulate the checkbox's class in the change event handler. This is not how you check/uncheck a checkbox.

Please read this Check/uncheck checkbox using jquery? and this jQuery. How to uncheck all checkboxes except one (already checked)

The following is the specific operation method:

$('#main').find('table .toggle input[type="checkbox"]').change(function() {
  $('table .toggle input[type="checkbox"]').prop('checked', false);
  $(this).prop('checked', true);
});

Here is a working example: https://jsfiddle.net/fL9dknp7/