Как выбрать последний элемент DIV на основе проверенного флажка

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>

Как я могу получить скрытое значение элемента, когда я изменить статус флажка?
Кто-нибудь знает, дайте мне знать?
Спасибо

Answer 1

Скрытый ввод в вашем коде не является родственным вашим ячейкам, ваш должен сначала выбрать родительский элемент, используя $(this).parent() или $(this.parentNode).

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

Answer 2

input является родственником вашего родительского strong элемента, поэтому сначала получить родитель, а затем искать .next('input[type="hidden"]').

Кроме того, вы можете использовать .val() вместо .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>

Answer 3

Вот элемент DIV искал с двумя parent вызова метода, а затем find используется для поиска скрытого элемента. Я только что обнаружил (в другом stack post), который также можно изменить, чтобы определить изменение выбора флажка.

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