Question

我正在创建一个包含多个单选按钮和文本框的表单。每个文本框都在单选按钮旁边，如下所示：

＆＃13;

<div class="form-group">
                        <div class="radio">
                            <label>
                                <input type="radio" name="correct_answer_id">
                                Correct
                            </label>
                        </div>
                        <label for="answer" class="col-sm-2 control-label">Answer 2</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="answer[]"  placeholder="Answer"  required>
                        </div>
                    </div>

＆＃13;

＆＃13; 表格中有几个单选按钮和文本框对。单击单选按钮，我想获得在相应文本框

中写入的内容

我正在尝试使用Jquery的next（）函数，如下所示：

＆＃13;

$('input[type="radio"]').click(function(){
                if ($(this).is(':checked'))
                {

                   console.log($(this).next('input[type="text"]').val());
                   
                }
            });

＆＃13;

但我的日志显示未定义。我做错了什么？

Answer 1

试试这个：找到广播的父div并执行next().next()以获取输入框div，然后找到输入框以获取值。

注意 - 您无需检查if ($(this).is(':checked'))，因为当您点击单选按钮时，它将始终被检查。

$('input[type="radio"]').click(function(){
var value =  $(this).closest('.radio').next().next('.col-sm-10').find('input[type=text]').val();
  console.log(value );
});

Answer 2

使用parent（）使用下面的代码;见工作fiddle

$('input[type="radio"]').click(function(){
            if ($(this).is(':checked'))
            {
               console.log($(this).parents('div.radio').next().next('div.col-sm-10').find('input[type="text"]').val());

            }
        });

Answer 3

您应该将要提交的值放在value元素的input属性中。

e.g。 <input type="radio" name="correct_answer_id" value="correct">

您的点击处理程序将更改为：

$('input[type="radio"]').click(function(){
  if ($(this).is(':checked'))
  {
    console.log($(this).val());
  }
});

如果您不想将某个值放在value属性中，那么最好还是对input元素中的值进行引用，而不是依赖于特定的文档布局。

Answer 4

试试这个

    $('input[type="radio"]').click(function(){
       if ($(this).is(':checked'))
         {
        console.log($(this).parent().parent().siblings().find('input[type="text"]').val());

          }
      });

Working Demo

Answer 5

如果你可以稍微更改一下html，这里有一个不同的方法http://jsfiddle.net/xa9cjLd9/1/

<div class="form-group">
    <div class="radio">
        <label data-for='answer[]'>
            <input type="radio" name="correct_answer_id" />Correct</label>
    </div>
    <label for="answer" class="col-sm-2 control-label">Answer 2</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" name="answer[]" placeholder="Answer" required />
    </div>
</div>


$('input[type="radio"]').click(function () {
    if ($(this).is(':checked')) {
        var data = $(this).closest('label').attr('data-for');

        console.log($('input[name=' + '"' + data + '"' + ']').val());

    }
});

只需为标签定义数据属性，该标签包含相关输入的名称。

Jquery获取单选按钮旁边的文本框的值

5 个答案: