Question

这个问题在此之前已被提出并回答，但代码对我不起作用。这个脚本的目的是生成两个表格字段，高度为英尺和英尺。英寸或单个厘米，基于用户通过单选按钮选择的值。

我有两个单选按钮的HTML：

<form id="post">
   <span id="select_height_unit" style="margin-right: 10px;">Unit of Measure: </span>
   <input type="radio" name="height_unit" value="ft" checked />Feet
   <input type="radio" name="height_unit" value="cm" />Centimeters
</form>

为了测试这个，我有以下jQuery：

(function ($) {
     console.log( $('input[name=height_unit]:checked', '#post').val() );
})(jQuery);

控制台中的结果是$('input[name=height_unit]:checked', '#post').val()未定义。无论有没有#post的范围我都试过这个，并且两种方式都得到相同的结果。

Answer 1

// For this to work the respective <script> should be placed before the closing
// </body> tag, otherwise...
(function ($) {
    // does not means DOM is ready! It's just an IIFE passing jQuery as argument
})(jQuery);

代替：

(function ($) {

    $(function(){
       // DOM is now ready!!
       // jQuery code here  
    });

})(jQuery);

拥有两个没有input属性的广播value是没有意义的。如何区分收到的数据呢？

所以或在您的具体情况下，添加所需的一切：

(function ($) {

    $(function(){
        
       function getUnit() {
          var unit = $('input[name=height_unit]:checked').val();
          console.log( unit );
          return  unit;
       }
       
       getUnit(); // Get on DOM ready
       $("[name=height_unit]").on("change", getUnit); // and on change

    });

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="post">
   <span id="select_height_unit" style="margin-right: 10px;">Unit of Measure:</span>
   
   <!-- For better UX use <label> -->
   
   <label><input type="radio" name="height_unit" value="ft" checked />Feet</label>
   <label><input type="radio" name="height_unit" value="cm" />Centimeters</label>
</form>

Answer 2

console.log('Value is: ' + $('input[name=height_unit]:checked').val() );

//Below will get executed when you click on radio button
$('input[name=height_unit]').on('change', function(){
  console.log('New value is: ' + $(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="post">
   <span id="select_height_unit" style="margin-right: 10px;">Unit of Measure: </span>
   <input type="radio" name="height_unit" checked value='Feet' />Feet
   <input type="radio" name="height_unit" value='Centimeters' />Centimeters
</form>

Answer 3

您的输入没有值属性，因此.val()无法返回任何值。

<form id="post">
   <span id="select_height_unit" style="margin-right: 10px;">Unit of Measure: </span>
   <input type="radio" name="height_unit" value="feet" checked />Feet
   <input type="radio" name="height_unit" value="centimeters" />Centimeters
</form>

在您的脚本中，您可以使用以下选择器选择输入。您通过将'#post'添加到jQuery选择器中选择了两个项目。

(function ($) {
     console.log( $('#post input[name="height_unit"]:checked').val() );
})(jQuery);

在jQuery中获取Checked单选按钮

3 个答案: