如何通过JQuery中的复选框获取选定列的值

How to get a value of selected column by checkbox in JQuery?

本文关键字:获取 复选框 何通过 JQuery      更新时间:2023-09-26

当前我从该行获得所有输出。是否可以仅获取所选"点"的值。我该怎么做?

检查时的预期输出:SF01SF02SF03

检查时的电流输出:SF0111.53.5328120.3359

<table border="1" width="100%" id="selectTable" name="selectTable">
    <legend>Display Data Points</legend>
    <tr>
        <th></th>
        <th width="40%">Point</th>
        <th width="20%">Depth</th>
        <th width="20%">Lat</th>
        <th width="20%">Long</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="checkBox" name="checkBox[]" />
        </td>
        <td>SF01</td>
        <td>11.5</td>
        <td>3.5328</td>
        <td>120.3359</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="checkBox" name="checkBox[]" />
        </td>
        <td>SF02</td>
        <td>41.5</td>
        <td>6.5328</td>
        <td>113.3359</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="checkBox" name="checkBox[]" />
        </td>
        <td>SF03</td>
        <td>82.1</td>
        <td>5.2828</td>
        <td>721.9059</td>
    </tr>
</table>
<script type="text/javascript">
    function clickedBox() {
        var values = new Array();
        $.each($("input[name='checkBox[]']:checked").closest("td").siblings("td"), function() {
            values.push($(this).text());
        });
        document.getElementById("boxArea").value = "=====Results====='n" + values.join("'n");
    }
    $(document).ready(function() {
        $("#selectPoint").click(clickedBox);
    });
</script>

siblings('td')更改为next('td'),我希望您需要将event绑定到checkbox

$.each($("input[name='checkBox[]']:checked").closest("td").next("td"), function () {
                                                         //^^^^here
    values.push($(this).text());
});

演示

当您说siblings时,它将获取第一个的所有siblingstd,这就是您获得所有值的原因。

为了让它更简单-

使用元素上的data属性设置您的值。

<input type="checkbox" data-value="SF02"/>

jQuery-

$(function(){
  values= new Array();
  $.each($('input[type="checkbox"]:checked'),function(index,item){
    values.push(item.data('value');
  });
});