在 jquery 数据表中选择单个复选框

Question

我有一个包含一些 json 数据的数据表。我在每一行中添加了一个复选框，但问题是我想一次选择一行。即当我单击一行上的复选框时，其他复选框不会被选中。即表现得像一个单选按钮。我的代码哪里出错了。 表

<div>
    <h1>Accounts Table</h1>
    <table id="employeesTable" class="display">
       <!-- Header Table -->
       <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Amount</th>
                <th>Date</th>
                <th>Description</th>
                <th>Active</th>
            </tr>
        </thead>
        <!-- Footer Table -->
        <tfoot>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Amount</th>
                <th>Date</th>
                <th>Description</th>
                <th>Active</th>
            </tr>
        </tfoot>
    </table>
</div>

jQuery 数据表

$(document).ready( function () {
     var table = $('#employeesTable').DataTable({
            "sAjaxSource": "/account/list",
            "sAjaxDataProp": "",
            "order": [[ 0, "asc" ]],
            "aoColumns": [
                  { "mData": "id"},
                  { "mData": "account_type" },
                  { "mData": "amount" },
                  { "mData": "date" },
                  { "mData": "description" },
                  { "mData": null,
                   className: "center",
                defaultContent:'<input type="checkbox" name="name1"/>' }
            ]
     }

)

     $('input[name="name1"]').on('change', function() {
          var checkedValue = $(this).prop('checked');
            // uncheck other checkboxes (checkboxes on the same row)
            $(this).closest('tr').find('input[name=""]').each(function(){
               $(this).prop('checked',false);
            });
            $(this).prop("checked",checkedValue);
    
        });

Answer 1

您的描述有点不清楚，但如果这是您需要的？ 您的意见：

 $(this).closest('tr').find('input[name=""]')

没有找到任何东西或者可能是它自己。 closest 只找到祖先。

HTML 标记：table > thead OR tfoot > tr > input 你被困在tr 并忽略了thead 和tfoot 你需要找到其中的女巫并在里面找到输入。

$('input[name="name1"]').on('change', function() {
  var section = $(this).parents("tr").parent().get(0).nodeName
  console.clear();
  console.log(section);
  if (section === "THEAD") {
    $("tfoot * input[type='checkbox']").each(function() {
      $(this).prop('checked', false);
    });
  } else if (section === "TFOOT") {
    $("thead * input[type='checkbox']").each(function() {
      $(this).prop('checked', false);
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h1>Accounts Table</h1>
  <table id="employeesTable" class="display">
    <!-- Header Table -->
    <thead>
      <tr>
        <th>Id <input type="checkbox" name="name1" /></th>
        <th>Name <input type="checkbox" name="name1" /></th>
        <th>Amount <input type="checkbox" name="name1" /></th>
        <th>Date <input type="checkbox" name="name1" /></th>
        <th>Description <input type="checkbox" name="name1" /></th>
        <th>Active <input type="checkbox" name="name1" /></th>
      </tr>
    </thead>
    <!-- Footer Table -->
    <tfoot>
      <tr>
        <th>Id <input type="checkbox" name="name1" /></th>
        <th>Name <input type="checkbox" name="name1" /></th>
        <th>Amount <input type="checkbox" name="name1" /></th>
        <th>Date <input type="checkbox" name="name1" /></th>
        <th>Description <input type="checkbox" name="name1" /></th>
        <th>Active <input type="checkbox" name="name1" /></th>
      </tr>
    </tfoot>
  </table>
</div>

Answer 2

您可以通过循环仅选中复选框来编辑属性值：

$('input[name="name1"]:checked').each(function(){
   $(this).prop('checked',false);
});

当从 ajaxcall 获取表值时，在数据表的 initComplete 属性中包含元素的 onchange，.. 如下所示（因为一旦从 ajax 完全加载，数据表复选框 HTML 元素将可访问，直到它无法访问。所以 onchange 为此处未应用复选框...）

"initComplete": function( settings, json ) {
   $('#employeesTable tbody input[name="name1"]').on('change', function() {
var checkedValue = $(this).prop('checked');console.log(checkedValue);
  // uncheck other checkboxes (checkboxes on the same row)
  $('input[name="name1"]:checked').each(function(){
     $(this).prop('checked',false);
  });
  $(this).prop("checked",checkedValue); });  },

$(document).ready( function () {
  var table = $('#employeesTable').DataTable({
     "aaData":[
      {

        "id": "1",
        "description": "Tiger Nixon",
        "account_type": "System Architect",
        "amount": "$320,800",
        "date": "2011/04/25",
         "name": "Tiger Nixon"
      },
      {

        "id": "2",
        "name": "Garrett Winters",
        "description": "Garrett Winters",
        "account_type": "Accountant",
        "amount": "$170,750",
        "date": "2011/07/25"
      }],
    //"sAjaxSource": "http://localhost/test.php",
      "sAjaxDataProp": "",
      "order": [[ 0, "asc" ]],
"initComplete": function( settings, json ) {
   $('#employeesTable tbody input[name="name1"]').on('change', function() {
    var checkedValue = $(this).prop('checked');//console.log(checkedValue);
      // uncheck other checkboxes (checkboxes on the same row)
      $('input[name="name1"]:checked').each(function(){
         $(this).prop('checked',false);
      });
      $(this).prop("checked",checkedValue);

  });
  },
      "aoColumns": [
      { "mData": "sel",
             className: "center",
          defaultContent:'<input type="checkbox" name="name1"/>' 
},
            { "mData": "id"},
            { "mData": "name" },
             { "mData": "description" },
            { "mData": "account_type" },
            { "mData": "amount" },
            { "mData": "date" },                  
      ]
});


  $('#employeesTable tbody').on( 'click', 'tr', function () {
    if ( $(this).hasClass('selected') ) {
        $(this).removeClass('selected');
    }
    else {
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    }
  } );
});

<script src="https://code.jquery.com/jquery-3.5.1.js
"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">

<div>
    <!--<h1>Accounts Table</h1>-->
    <table id="employeesTable" class="display">
       <!-- Header Table -->
       <thead>
            <tr>
            <th></th>
                <th>Id</th>
                <th>Name</th>
                <th>Amount</th>
                <th>Date</th>
                <th>Description</th>
                <th>Active</th>
            </tr>
        </thead>
        <!-- Footer Table -->
        <tfoot>
            <tr>
            <th></th>
                <th>Id</th>
                <th>Name</th>
                <th>Amount</th>
                <th>Date</th>
                <th>Description</th>
                <th>Active</th>
            </tr>
        </tfoot>
    </table>
</div>