Question

我正在尝试在选中复选框后获取最接近的Textfield的值。这只是一个简单的HTML示例。在我的项目中，我动态添加了带有多个复选框的列表。我总是需要最接近的Textfield的值 - 类似于表示hte复选框和textfield属于一起的refenrence。谢谢！

HTML：

<input type='checkbox' class='oberpunkte' name='checkbox' value='typo 3'/>
<input type='text' name='text' value='typo3txt'/>
<input type='button' name='test' id='123' value='Alert'/>

JQuery的：

$("#123").click(function(){
$('input:checkbox[class=oberpunkte]:checked').each(function() {
    alert($(this).closest('input[type=text]').attr('value'));
    });
});

小提琴： http://jsfiddle.net/pEb7D/1/

Answer 1

如果你将html包装在<div class="box">中，那么

就会“更好”，但就像你拥有它一样，你可以使用prev或next取决于点击发生的位置：

http://jsfiddle.net/pEb7D/4/

$(".oberpunkte").change(function(){
      alert($(this).next('input').val())
});

$('#123').on('click',function(){
    alert($(this).prev('input').val());
});

将div.box更新为父级 在我看来，这是一个更好的解决方案。你点击的原因无关紧要我们可以从$(this)查看最接近的方框，然后得到我们正在寻找的价值......

http://jsfiddle.net/pEb7D/7/

<script type="text/javascript">
    $("#123, .oberpunkte").on('click', function(){
          alert($(this).closest('.box').children('.needToFind').val())
    });
</script>

<div class="box">
    <input type='checkbox' class='oberpunkte' name='checkbox' value='typo 3'/>
    <input class="needToFind" type='text' name='text' value='typo3txt'/>
    <input type='button' name='test' id='123' value='Alert'/>
</div>

<div class="box">
    <input type='checkbox' class='oberpunkte' name='checkbox' value='typo 3'/>
    <input class="needToFind" type='text' name='text' value='123456'/>
    <input type='button' name='test' id='123' value='Alert'/>
</div>

<div class="box">
    <input type='checkbox' class='oberpunkte' name='checkbox' value='typo 3'/>
    <input class="needToFind" type='text' name='text' value='xxxxxx'/>
    <input type='button' name='test' id='123' value='Alert'/>
</div>

Answer 2

我建议使用parent（）和find（），而不是在它们之间建立连接，所以如果您将来的html更改，则不需要更改javascript。

$("#123").click(function() {
    $(this).parent().find('selectorToInput').DO_STUFF;
}

如何在单击Checkbox - JQuery后获得最接近的Textfield值

2 个答案: