CODEWITHSUNDEEP
jquery
cfprabhu
cfprabhu

Reputation: 5352

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

$(".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

Upvotes: 2

Views: 436

Answers (3)

jyrkim
jyrkim

Reputation: 2869

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>

Upvotes: 1

Jamiec
Jamiec

Reputation: 136124

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>

Upvotes: 1

Ram
Ram

Reputation: 144689

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();

Upvotes: 2

Related Questions