javascript - Getting the value of checkbox from the table cell using Jquery - Stack Overflow

admin管理员组

文章数量:1399958

I need to obtain the value of the checkbox when "expand" is clicked, I have tried the following this looks clumsy and when the DOM is modified then it may render undefined instead of the expect value CBVALUE

<tr>
    <td class="first"><input class="selects" type="checkbox" value="CBVALUE" id="r0"></td>
    <td class="second"><a target="_blank" href="rGjgODop0">Somevalue</a></td>
    <td class="third"><a class="option s" id="option_0">Expand</a> <a href=""></a></td>
    <td class="fourth">2018-08-31T08:25:09.617Z</td>
</tr> 

$('.option').click(function(e) {
    e.preventDefault();
    alert($(this).parent().prev().prev().children().first().val()); //should alert as CBVALUE 
});

Is there an easier solution than traversing with relative elements?

I need to obtain the value of the checkbox when "expand" is clicked, I have tried the following this looks clumsy and when the DOM is modified then it may render undefined instead of the expect value CBVALUE

<tr>
    <td class="first"><input class="selects" type="checkbox" value="CBVALUE" id="r0"></td>
    <td class="second"><a target="_blank" href="rGjgODop0">Somevalue</a></td>
    <td class="third"><a class="option s" id="option_0">Expand</a> <a href=""></a></td>
    <td class="fourth">2018-08-31T08:25:09.617Z</td>
</tr> 

$('.option').click(function(e) {
    e.preventDefault();
    alert($(this).parent().prev().prev().children().first().val()); //should alert as CBVALUE 
});

Is there an easier solution than traversing with relative elements?

• javascript
• jquery
• html

Share Improve this question Follow edited Aug 31, 2018 at 8:50 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Aug 31, 2018 at 8:42 Code GuyCode Guy 3,19855 gold badges4242 silver badges9797 bronze badges 1

• $('.option').click(function(e) { e.preventDefault(); alert($(this).parent().find('input.selects').val()); //should alert as CBVALUE }); – yjs Commented Aug 31, 2018 at 9:05

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

You can try below logic where find parent tr and then find checkbox to read value

$(function(){
$('.option').on('click', function(e) {
    e.preventDefault();
    var value = $(this).closest('tr').find('input:checkbox').val();
    alert(value);
});
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
    <td class="first"><input class="selects" type="checkbox" value="CBVALUE" id="r0"></td>
    <td class="second"><a target="_blank" href="rGjgODop0">Somevalue</a></td>
    <td class="third"><a class="option s" id="option_0">Expand</a> <a href=""></a></td>
    <td class="fourth">2018-08-31T08:25:09.617Z</td>
</tr> 
</table>

Try $.parents() instead:

$(this).parents('tr').find('input[type=checkbox]').val()

You can use jQuery's $(...).siblings() method and pass it a selector:

$('.option').click(function(e) {
    e.preventDefault();
    alert($(this).siblings("#r0[type='checkbox']").val()); 
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
    <td class="first"><input class="selects" type="checkbox" value="CBVALUE" id="r0"></td>
    <td class="second"><a target="_blank" href="rGjgODop0">Somevalue</a></td>
    <td class="third"><a class="option s" id="option_0">Expand</a> <a href=""></a></td>
    <td class="fourth">2018-08-31T08:25:09.617Z</td>
</tr>

for me, .find() method seems to return an array of checkbox objects, I need to add [0] to the end to be able to apply .val() method, otherwise I got 'on' all times. Example:

var value = $(this).closest('tr').find('input:checkbox')[0].val()

Yo can do by using filtering. See this demo link

$(this).closest('td').parent().find('input[type=checkbox]').val()

本文标签： javascriptGetting the value of checkbox from the table cell using JqueryStack Overflow