Question

我必须找到id列的值，其复选框在列名的基础上在同一行中被选中，因为id列位置不固定。它可以是表中的第一个，最后一个或中间的。我已应用以下代码：

<table id="rowclick2" border="1">
    <tr>
        <th>Select</th>
        <th>Des</th>
        <th>ID</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="vehicle" value="Bike">
        </td>
        <td>col 2, row 1</td>
        <td>col 3, row 1</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="vehicle" value="Car"> </td>
        <td>col 2, row 2</td>
        <td>col 3, row 2</td>
    </tr>
</table>

我的jquery是：

$("input[name='vehicle']").click(function() {
    alert("djb");

    if ($(this).is(':checked')) {
        alert("dj");

        if ($(this).closest('table').next('tr').find('th:contains(Jan 3)') == 'true') {
            alert("bhh");
        } else {
            alert("cbjhj");
        }
    }
});

请帮助查找选中其复选框的ID值。我是jquery，javascript的新手。

Answer 1

我建议采用以下方法：

// binding a change event-handler to <input type="checkbox" /> elements:
$('input[type=checkbox]').change(function() {
  // assuming you want this to run only when the checkbox is checked:
  if (this.checked) {
    // find the <th> elements:
    var ID = $('th').filter(function() {
        // find those <th> elements whose trimmed-text is exactly 'ID':
        return $.trim($(this).text()) === 'ID';
      // get the cellIndex property of that element (or the first matched element):
      }).prop('cellIndex'),
      // find the closest <tr> element from the checked <input />:
      IDVal = $(this).closest('tr')
      // find the descendant <td> elements:
      .find('td')
      // find the <td> with the same cellIndex as the <th>
      .eq(ID)
      // retrieve the text:
      .text();
    console.log(IDVal);
  }
});

＆＃13;

$('input[type=checkbox]').change(function() {
  if (this.checked) {
    var ID = $('th').filter(function() {
        return $.trim($(this).text()) === 'ID';
      }).prop('cellIndex'),
      IDVal = $(this).closest('tr').find('td').eq(ID).text();
    console.log(IDVal);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="rowclick2" border="1">
  <tr>
    <th>Select</th>
    <th>Des</th>
    <th>ID</th>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="vehicle" value="Bike">
    </td>
    <td>col 2, row 1</td>
    <td>col 3, row 1</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="vehicle" value="Car">
    </td>
    <td>col 2, row 2</td>
    <td>col 3, row 2</td>
  </tr>
</table>

＆＃13;

但是，如果您使用类名来标识哪些单元格包含＆＃39; id＆＃39;相关的值，例如<td class="id"></td>，这一切都变得更加简单：

$('input[type=checkbox]').on('change', function() {
  if (this.checked) {
    // find the closest <tr> element from the :checked <input />:
    var idValue = $(this).closest('tr')
      // find the element with the class of 'id':
      .find('.id')
      // retrieve the text of that element:
      .text();
    console.log(idValue);
  }
});

＆＃13;

$('input[type=checkbox]').on('change', function() {
  if (this.checked) {
    var idValue = $(this).closest('tr').find('.id').text();
    console.log(idValue);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="rowclick2" border="1">
  <tr>
    <th>Select</th>
    <th>Des</th>
    <th class="id">ID</th>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="vehicle" value="Bike">
    </td>
    <td>col 2, row 1</td>
    <td class="id">col 3, row 1</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="vehicle" value="Car">
    </td>
    <td>col 2, row 2</td>
    <td class="id">col 3, row 2</td>
  </tr>
</table>

＆＃13;

参考文献：

JavaScript的：
- cellIndex。
jQuery的：
- closest()。
- eq()。
- filter()。
- find()。
- jQuery.trim()。
- on()。
- prop()。

Answer 2

我希望这会有所帮助。请参阅演示。

根据我的理解，请帮助查找已选中复选框的 值。

$(document).ready(function(){
    $(":checkbox").click(function(){
        alert( $(this).val() );
    });
});

http://jsfiddle.net/silkherb/tx2asmg6/2/

Answer 3

在复选框id="first"和id="second"中添加ID以获取元素：

    <tr>
    <td><input type="checkbox" name="vehicle" value="Bike" id="first"></td>
    <td>col 2, row 1</td>
    <td>col 3, row 1</td>
</tr>`enter code here`
<tr>
    <td><input type="checkbox" name="vehicle" value="Car" id="second"> </td>
    <td>col 2, row 2</td>
    <td>col 3, row 2</td>
</tr>

之后，您可以使用简单的JavaScript。 .checked检查复选框是否已标记。

if(document.getElementById("first").checked == true){
  console.log("do something here 1");
}
if(document.getElementById("second").checked == true){
  console.log("do something here 2");
}

如果根据列名称ID选中复选框，则查找id列的值

3 个答案: