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

Jquery get value of text box next to a radio button

本文关键字：文本 获取 单选按钮 Jquery      更新时间：2023-10-20

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

<div class="form-group">
                        <div class="radio">
                            <label>
                                <input type="radio" name="correct_answer_id">
                                Correct
                            </label>
                        </div>
                        <label for="answerswer" class="col-sm-2 control-label">Answer 2</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="answerswer[]"  placeholder="Answer"  required>
                        </div>
                    </div>
表单中有几个单选按钮和文本框对，如上所述。点击单选按钮，我想得到在相应的文本框中写的任何内容

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

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

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

试试这个：找到无线电的父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 );
});

使用parents（）使用以下代码；参见工作小提琴

$('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());
            }
        });

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

例如<input type="radio" name="correct_answer_id" value="correct">

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

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

如果有一些值不想放在value属性中，那么最好在输入元素中引用该值，而不是依赖于特定的文档布局。

试试这个

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

工作演示

如果您可以稍微更改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="answerswer" class="col-sm-2 control-label">Answer 2</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" name="answerswer[]" 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());
    }
});

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

相关文章：