jquery获取以前的输入文本值

I have the following html in my form:

我的表单中有以下html:

    <div>
    <input type="text" style="margin-top: 10px; float: none;" class="validate[required] span3 m-wrap answopts answerdets" placeholder="Answer Options" id="answeroptions" name="answeroptions[0]">
    <img class="removeanswer" style="width: 50px; margin-top: 9px;" src="../images/remove.png">
</div>
<p class="disoptinputs">
    <input type="radio" style="margin:-85px 0 0 !important;" class="validate[required] coranschk"  id="questionoption" name="questionoption[0][]">
</p>


<div>
    <input type="text" style="margin-top: 10px; float: none;" class="validate[required] span3 m-wrap answopts answerdets0" placeholder="Answer Options" id="answeroptions1" name="answeroptions[0][]">
    <img id="1" class="removeanswer" style="width: 50px; margin-top: 9px;" src="../images/remove.png"></div>
<p class="disoptinputs0">
    <input type="radio" class="coranschk validate[required]" cntr="7" atrid="0" id="questionoption7" name="questionoption[0][]">
</p>

<div>
    <input type="text" style="margin-top: 10px; float: none;" class="validate[required] span3 m-wrap answopts answerdets0" placeholder="Answer Options" id="answeroptions2" name="answeroptions[0][]">
    <img id="2" class="removeanswer" style="width: 50px; margin-top: 9px;" src="../images/remove.png">
</div>
<p class="disoptinputs0">
    <input type="radio" class="coranschk validate[required]" cntr="7" atrid="0" id="questionoption7" name="questionoption[0][]">
</p>

This div and p tag is multiple. Now what i want is when user clicks on any radio button i want the value of the input box which is before the radio button inside div. I'd tried this $(this).prev().prev().val() but it is not working. Any help will be appreciated. Thanks in Advance.

这个div和p标签是多个。现在我想要的是当用户点击任何单选按钮时,我想要输入框的值在div中的单选按钮之前。我试过这个$(this).prev()。prev()。val()但它没有用。任何帮助将不胜感激。提前致谢。

4 个解决方案

#1

You can use .closest() or .parent() to first select the parent of the clicked radio before using .prev() to locate the div. And you do also need to use .find() to locate the input element.

在使用.prev()定位div之前,可以使用.closest()或.parent()首先选择单击的无线电的父节点。而且你还需要使用.find()来定位输入元素。

$(this).closest('.disoptinputs').prev().find('input').val();

NOTE: Since there are multiple input elements you do not need the ids as they should be unique.

注意:由于有多个输入元素,因此您不需要ID,因为它们应该是唯一的。

UPDATE

If the p elements do not have a common class, this code would not work. In that case then you would have to replace .disoptinputs with p as in the demo below.

如果p元素没有公共类,则此代码不起作用。在这种情况下,你将不得不用p替换.disoptinputs,如下面的演示。

$(function() {
    $('p > :radio').on('change', function() {
        var ival = $(this).closest('p').prev().find('input').val();
        alert( ival );
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <input type="text" style="margin-top: 10px; float: none;" class="validate[required] span3 m-wrap answopts answerdets0" placeholder="Answer Options" id="answeroptions2" name="answeroptions[0][]">
    <img id="2" class="removeanswer" style="width: 50px; margin-top: 9px;" src="../images/remove.png">
</div>
<p class="disoptinputs0">
    <input type="radio" class="coranschk validate[required]" cntr="7" atrid="0" id="questionoption7" name="questionoption[0][]">
</p>

#2

Try:

$(this).parent().prev().find('input').val()

#3

As you stated you have multiple div and p tag element like that, which results to duplication of id for radio buttons and input. IDs must be unique. you can rather use same class.

如你所说,你有多个div和p标签元素,这导致单选按钮和输入的重复。 ID必须是唯一的。你可以宁愿使用同一个班级。

And for traversing, You can traverse to closest p tag and then to its previous sibling div and find element in it:

对于遍历,您可以遍历到最近的p标记,然后遍历其先前的兄弟div并在其中查找元素:

$('.disoptinputs :radio').click(function(){
   var previnp = $(this).closest('.disoptinputs').prev().find('input').val();
});

#4

$('input[type="radio"]').click(function() {
   var getPrevText = $(this).parent().prev().find("input[type=text]:first").val();
   alert(getPrevText); //returns with the prev Val
});

Try the above code, to see it working :)

试试上面的代码,看看它有效:)

$(this) to target current element. (radio button)

$(this)以当前元素为目标。 (单选按钮)

parent() to target current element's parent (here it is P tag)

parent()以当前元素的父元素为目标(这里是P标记)

prev() to target previous element of P tag (div)

prev()目标P标签的前一个元素(div)

find("input[type=text]") to target input tag within prev div

find(“input [type = text]”)到prev div中的目标输入标签

#1