使用jQuery获取当前选定的复选框值

Question

我需要从table.Below的get selected value复选框中获取当前选中的值，我使用的代码是从checkbox.But获取所有选中的值。我只需要选中的表行值。

​

$.each($('input[type="checkbox"]:checked').closest("td").next("td"), function() {
  values.push($(this).text().trim())

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="DeviceTable" class="table table-bordered">
  <thead>
    <tr class="info">
      <th style="width: 10px;">
        <input type="checkbox" id="check_selectall-custom" onclick="selectAllCustom(this)" />SA</th>

      <th>Device</th>
      <th> Type</th>
      <th> Model</th>
      <th> Status</th>

    </tr>
  </thead>
  <tbody class="parameter_table">

    <tr id="tr_device_id1">
      <td>
        <input type="checkbox" name="checkBox[]" onclick="DeviceClickedBox()">
      </td>

      <td id="macadd" style="word-break:break-all;">
        Mac1
      </td>

      <td style="word-break:break-all;">
        Dev 1
      </td>
      <td style="word-break:break-all;">
        Model 1
      </td>
      <td class="Selected_Device" id="Selected_Device">
        <b id="Selected_Device" style="float: right;"></b>

      </td>
    </tr>
    <tr id="tr_device_id2">
      <td>
        <input type="checkbox" name="checkBox[]" onclick="DeviceClickedBox()">
      </td>

      <td id="macadd" style="word-break:break-all;">
        Mac 2
      </td>

      <td style="word-break:break-all;">
        Parm 2
      </td>
      <td style="word-break:break-all;">
        Model 2
      </td>
      <td class="Selected_Device" id="Selected_Device">
        <b id="Selected_Device" style="float: right;"></b>

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

​

Answer 1

给你的TDs一个类而不是ID

我不知道您要单击什么，但在这里，我单击复选框即可执行此操作

​

$(function() { // assuming jquery is loaded, execute on page load
  $("#check_selectall-custom").on("click", function() {
    var checked = this.checked;
    $("input[type=checkbox]").not(this).prop("checked",checked);
  });
  $("#getval").on("click", function() {
    var values = $("input[type=checkbox]:checked").not(this).map(function() {
      return $(this).closest("tr").find(".macadd").text().trim();
    }).get();
    $("#res").html(values.join("<br/>"))
  });
});

#tr_device_id1 td {
  word-break: break-all
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="DeviceTable" class="table table-bordered">
  <thead>
    <tr class="info">
      <th style="width: 10px;">
        <label><input type="checkbox" id="check_selectall-custom" />SA</label>
      </th>

      <th>Device</th>
      <th> Type</th>
      <th> Model</th>
      <th> Status</th>

    </tr>
  </thead>
  <tbody class="parameter_table">

    <tr id="tr_device_id1">
      <td>
        <input type="checkbox" name="checkBox[]">
      </td>

      <td class="macadd">
        Mac 1
      </td>

      <td class="device">
        Dev 1
      </td>
      <td class="model">
        Model 1
      </td>
      <td class="Selected_Device">
      </td>
    </tr>
    <tr id="tr_device_id2">
      <td>
        <input type="checkbox" name="checkBox[]">
      </td>

      <td class="macadd">
        Mac 2
      </td>

      <td class="device">
        Dev 2
      </td>
      <td class="model">
        Model 2
      </td>
      <td class="Selected_Device">
      </td>
    </tr>
  </tbody>
</table>
<button type="button" id="getval">Show checked</button>
<span id="res"></span>

​

Answer 2

​

var TotalChkBx;

$("input:checkbox").on("click", function() {
  var n = $("input:checkbox").index(this);
  $('#detail').append("Column 1" + $("table#DeviceTable tbody  tr:eq(" + n + ") td:eq(1) ").text() + '<br/>');
  $('#detail').append("Column 2" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(2) ").text() + '<br/>');
  $('#detail').append("Column 3" + $("table#DeviceTable tbody  tr:eq(" + n + ") td:eq(3) ").text() + '<br/>');
  $('#detail').append("Column 4" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(4) ").text() + '<br/>');
});


function CheckAll(CheckBox) {
  $('#detail').html("");
  var TargetBaseControl = document.getElementById("DeviceTable"); // objRef.parentNode.parentNode.parentNode;
  var TargetChildControl = "check";
  //var Check_TEXT = "CHECK_CheckBox"

  var Inputs = TargetBaseControl.getElementsByTagName("input");
  // var Spans = TargetBaseControl.getElementsByTagName("span");
  for (var n = 0; n < Inputs.length; ++n) {
    if ((Inputs[n].type === 'checkbox')) // 
    {
      Inputs[n].Checked = CheckBox.checked;
      $("#" + Inputs[n].id).attr("Checked", CheckBox.checked);

      $('#detail').append("Column 1" + $("table#DeviceTable tbody  tr:eq(" + n + ") td:eq(1) ").text() + '<br/>');
      $('#detail').append("Column 2" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(2) ").text() + '<br/>');
      $('#detail').append("Column 3" + $("table#DeviceTable tbody  tr:eq(" + n + ") td:eq(3) ").text() + '<br/>');
      $('#detail').append("Column 4" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(4) ").text() + '<br/>');
    }
    //  else { $('#detail').html("");}

  }
  Counter = CheckBox.checked ? TotalChkBx : 0;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="DeviceTable" class="table table-bordered">
  <thead>
    <tr class="info">
      <th style="width: 10px;">
        <input type="checkbox" id="check1" name="checkBox" id="check_selectall-custom" onclick="CheckAll(this)" />SA</th>

      <th>Device</th>
      <th> Type</th>
      <th> Model</th>
      <th> Status</th>

    </tr>
  </thead>
  <tbody class="parameter_table">

    <tr id="tr_device_id1">
      <td>
        <input type="checkbox" id="check2" name="checkBox">
      </td>

      <td id="macadd" style="word-break:break-all;">
        Mac1
      </td>

      <td style="word-break:break-all;">
        Dev 1
      </td>
      <td style="word-break:break-all;">
        Model 1
      </td>
      <td class="Selected_Device" id="Selected_Device">
        <b id="Selected_Device" style="float: right;"></b>

      </td>
    </tr>
    <tr id="tr_device_id2">
      <td>
        <input type="checkbox" id="check3" name="checkBox">
      </td>

      <td id="macadd" style="word-break:break-all;">
        Mac 2
      </td>

      <td style="word-break:break-all;">
        Parm 2
      </td>
      <td style="word-break:break-all;">
        Model 2
      </td>
      <td class="Selected_Device" id="Selected_Device">
        <b id="Selected_Device" style="float: right;"></b>

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

<div id="detail"></div>

​