Question

我有一个表格，其中有复选框，可以点击复选框，我想知道2件事

复选框的ID
同一表格行上的隐藏字段的ID

所以我的每一行都有一个隐藏字段，我想知道这个值是什么

我可以从我的小提琴中看到我的复选框是GridView1__ctl3_chkOut然后我想让jquery在同一个表行中找到隐藏字段的值

我看到GridView1__ctl2_hndTxtId的值是3601，但我会有很多行......

小提琴 - ＆gt; http://jsfiddle.net/bthorn/x9fc28nn/2/

jquery的

$('.out').on('change', function () {
    $(this).closest('tr').find('.out').not(this).prop('checked', false);
    console.log(this.id);
    //what is the hidden field value in same row?
});
$('.yesno').on('change', function () {
    $(this).closest('tr').find('.yesno').not(this).prop('checked', false);
     //what is the hidden field value in same row?
});

console.log显示ID

<table>
<tr>
    <td style="width:5px;">
        <input type="hidden" name="GridView1:_ctl2:hndTxtId" id="GridView1__ctl2_hndTxtId" value="3601">
    </td>
    <td style="width:50px;">    <span id="GridView1__ctl2_lblVehicle0">413</span>

    </td>
    <td style="width:150px;"> <span id="GridView1__ctl2_lblName2">LONG</span>

    </td>
    <td style="width:100px;"> <span id="GridView1__ctl2_lblEquip2">BKT/TDR/M</span>

    </td>
    <td style="width:150px;">   <span id="GridView1__ctl2_lblScheduleb">0600-1430</span>

    </td>
    <td style="width:50px;"> <span id="GridView1__ctl2_lblScheduleOrig2">8</span>

    </td>
    <td style="width:150px;"> <span id="GridView1__ctl2_lblTimeOn"></span>

    </td>
    <td style="width:150px;"> <span id="GridView1__ctl2_lblTimeOff"></span>

    </td>
    <td>
        <input id="GridView1__ctl2_chkOut" type="checkbox" name="GridView1:_ctl2:chkOut" checked="checked" class="out">
    </td>
    <td>
        <input id="GridView1__ctl2_chkYes2" type="checkbox" name="GridView1:_ctl2:chkYes2" checked="checked" class="yesno">
    </td>
    <td>
        <input id="GridView1__ctl2_chkNo2" type="checkbox" name="GridView1:_ctl2:chkNo2" class="yesno">
    </td>
    <td style="width:5px;">
        <input type="submit" name="GridView1:_ctl2:AddButton0" value="On" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl2_AddButton0" class="btn-blue">
    </td>
    <td style="width:150px;">
        <input name="GridView1:_ctl2:txtStormTimeOn" type="text" value="9-15-2015 12:00" id="GridView1__ctl2_txtStormTimeOn">
    </td>
    <td style="width:5px;">
        <input type="submit" name="GridView1:_ctl2:OffButton" value="Off" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl2_OffButton" class="btn-blue">
    </td>
    <td style="width:150px;">
        <input name="GridView1:_ctl2:txtStormTimeOff" type="text" value="9-15-2015 12:28" id="GridView1__ctl2_txtStormTimeOff">
    </td>
    <td style="width:500px;"> <span id="GridView1__ctl2_lblComments"></span>

    </td>
    <td style="width:500px;">
        <input name="GridView1:_ctl2:txtStormComments" type="text" value="testfasdfsdfasdfsadfasdfsadf" maxlength="200" id="GridView1__ctl2_txtStormComments" style="width:200px;">
    </td>
</tr>
<tr>
    <td style="width:5px;">
        <input type="hidden" name="GridView1:_ctl2:hndTxtId" id="GridView1__ctl2_hndTxtId" value="3601">
    </td>
    <td style="width:50px;">    <span id="GridView1__ctl3_lblVehicle0">215</span>

    </td>
    <td style="width:150px;"> <span id="GridView1__ctl3_lblName2">MORGAN</span>

    </td>
    <td style="width:100px;"> <span id="GridView1__ctl3_lblEquip2">BKT/TDR</span>

    </td>
    <td style="width:150px;">   <span id="GridView1__ctl3_lblScheduleb">0600-1430</span>

    </td>
    <td style="width:50px;"> <span id="GridView1__ctl3_lblScheduleOrig2">8</span>

    </td>
    <td style="width:150px;"> <span id="GridView1__ctl3_lblTimeOn"></span>

    </td>
    <td style="width:150px;"> <span id="GridView1__ctl3_lblTimeOff"></span>

    </td>
    <td>
        <input id="GridView1__ctl3_chkOut" type="checkbox" name="GridView1:_ctl3:chkOut" class="out">
    </td>
    <td>
        <input id="GridView1__ctl3_chkYes2" type="checkbox" name="GridView1:_ctl3:chkYes2" class="yesno">
    </td>
    <td>
        <input id="GridView1__ctl3_chkNo2" type="checkbox" name="GridView1:_ctl3:chkNo2" class="yesno">
    </td>
    <td style="width:5px;">
        <input type="submit" name="GridView1:_ctl3:AddButton0" value="On" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl3_AddButton0" class="btn-blue">
    </td>
    <td style="width:150px;">
        <input name="GridView1:_ctl3:txtStormTimeOn" type="text" id="GridView1__ctl3_txtStormTimeOn">
    </td>
    <td style="width:5px;">
        <input type="submit" name="GridView1:_ctl3:OffButton" value="Off" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl3_OffButton" class="btn-blue">
    </td>
    <td style="width:150px;">
        <input name="GridView1:_ctl3:txtStormTimeOff" type="text" id="GridView1__ctl3_txtStormTimeOff">
    </td>
    <td style="width:500px;"> <span id="GridView1__ctl3_lblComments"></span>

    </td>
    <td style="width:500px;">
        <input name="GridView1:_ctl3:txtStormComments" type="text" maxlength="200" id="GridView1__ctl3_txtStormComments" style="width:200px;">
    </td>
</tr>
</table>

Answer 1

您已获得checkbox的ID。要获取行的hidden input field的值，请使用以下代码：

$('.yesno').on('change', function () {
    $(this).closest('tr').find('input[type="hidden"]').val()
});

请参阅 JSfiddle demo

Answer 2

您可以在https://api.jquery.com/category/selectors/

找到有关选择器的信息

看看你的小提琴的一部分，它看起来：

$tr = $(this).closest('tr');
hidden = $tr.find('input[type="hidden"]');
console.log(hidden);

Answer 3

使用您正在使用的find方法，但使用'input[type=hidden]'：

$('.out').on('change', function () {
    var $tr = $(this).closest('tr');
    $tr.find('.out').not(this).prop('checked', false);
    console.log(this.id);
    //what is the hidden field value in same row?
    var hiddenVal = $tr.find('input[type=hidden]').val();
    console.log(hiddenVal);
});
$('.yesno').on('change', function () {
    var $tr = $(this).closest('tr');
    $tr.find('.yesno').not(this).prop('checked', false);
    //what is the hidden field value in same row?
    var hiddenVal = $tr.find('input[type=hidden]').val();
    console.log(hiddenVal);
});

Fiddle

Answer 4

您已拥有该复选框的ID。您可以使用以下命令获取隐藏输入元素的ID：

var hiddenID = $(this).closest('tr').find('input[type=hidden]').prop('id');

你可以像这样获得相同字段的值：

var hiddenVal = $(this).closest('tr').find('input[type=hidden]').val();

在复选框的同一表格行中查找隐藏的输入值

4 个答案: