How to select the last element in div based on checked check box

Question

$(".a").on('click',function(){
   alert($(this).next('input[type="hidden"]').attr('value'))

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id">
    <div>
        <strong><input type="checkbox" value="1" class="a"> chbox1</strong>
         <input type="hidden" value="1">   
    </div>    
    <div>
        <strong><input type="checkbox" value="1" class="a"> chbox1</strong>
         <input type="hidden" value="2">   
    </div>    
</div>

How can i get the hidden element value when i change the check box status?
anyone knows let me know?
Thank you

@j08691 its `strong` when the `r` key on your keyboard is stuck. — Jamiec, Jan 12 '15 at 15:59

score 2 · Accepted Answer · answered Jan 12 '15 at 15:56

2

The hidden input in your code is not sibling of your checkboxes, your should at first select the parent element, using $(this).parent() or $(this.parentNode).

$(this.parentNode).next('input[type="hidden"]').val();

answered Jan 12 '15 at 15:56

Ram

143,282
16
168
197

score 1 · Answer 2 · answered Jan 12 '15 at 16:02

The input is a sibling of your parent strong element, so first get the parent and then look for .next('input[type="hidden"]').

Also, you could use .val() in place of .attr('value').

$(".a").on('click',function(){
   alert($(this).parent().next('input[type="hidden"]').val())

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id">
    <div>
        <strong><input type="checkbox" value="1" class="a"> chbox1</strong>
         <input type="hidden" value="1">   
    </div>    
    <div>
        <strong><input type="checkbox" value="1" class="a"> chbox1</strong>
         <input type="hidden" value="2">   
    </div>    
</div>

$(this.parentNode).next('input[type="hidden"]').val();
thank you for your answer. — cfprabhu, Jan 12 '15 at 18:09

score 1 · Answer 3 · edited May 23 '17 at 11:50

1

Here is the div element looked for with two parent method calls, and then find is used to search for the hidden element. I just discovered (in another stack post) that also change can be used to detect checkbox select change.

$(".a").on('click',function(){
   alert($(this).parent().parent().find('input[type="hidden"]').attr('value'))

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="id">
    <div>
        <stong><input type="checkbox" value="1" class="a"> chbox1</stong>
         <input type="hidden" value="1">   
    </div>    
    <div>
        <stong><input type="checkbox" value="1" class="a"> chbox1</stong>
         <input type="hidden" value="2">   
    </div>    
</div>

edited May 23 '17 at 11:50

Community

1
1

answered Jan 12 '15 at 16:03

jyrkim

2,849
1
24
33

$(this.parentNode).next('input[type="hidden"]').val();
thank you for your answer. – cfprabhu Jan 12 '15 at 18:08
1

@prabhu My pleasure :-) I learned also something, the chosen answer used $(this.parentNode) which is probably the first time I've seen jQuery selector: $(..) applied in that way – jyrkim Jan 13 '15 at 10:09

How to select the last element in div based on checked check box

3 Answers3