获取选中的单选按钮的值不起作用

Question

我在jquery中遇到一些挑战。

在我的jquery代码中，我做的第一件事是，每当加载页面时，它都应该隐藏div的内容，并且每当单击按钮时，都应该显示div的内容。

它工作正常，但是我遇到的是我想获取选中的单选按钮的值，然后发出警报。

我编写的用于获取选中的单选按钮的值的代码仅在那些单选按钮位于div之外时才起作用，但是当它们置于div内时，它将警告一个空值。

这是我的jquery片段：

<script type='text/javascript'>

$(document).ready(function() {

   $("#section_div").hide();

   $("#show").click(function() {
       $("#section_div").fadeIn(1000);
   });

   $("#option:checked").live('change', function() {
     var selected_option = $('input[name=option]').filter(':checked').val();
    alert(selected_option);
   });                                                                          

});

</script>

这是HTML：

<div id='section_div'>
    <input type='radio' name='option' id='option' value='yes'/>Yes
    <input type='radio' name='option' id='option' value='no'/>No
</div>
<button id='show'> Show div </button>

Answer 1

在这里检查此工作小提琴： 小提琴

如果您使用：

 $("input[name=option]").on('change', function() {
    var selected_option = $('input[name=option]').filter(':checked').val();
    alert(selected_option);
  });

即使单选按钮位于div内，也会警告该选择。

Answer 2

尝试摆脱重复的ID，jQuery选择器不支持这些ID。 当我使用jQuery属性选择器时，它对我有用。

这里：

$(document).ready(function() {
   $("#section_div").hide();

   $("#show").click(function() {
       $("#section_div").fadeIn(1000);
   });

   $("input[name='option']").on('click', function(event) {
     var selected_option = event.target;
     alert(selected_option.value)
   });     
});

这是一个工作中的codepen

Answer 3

您为无线电元素和附加到id事件都获得了相同的id ，因此这引起了问题。

您可以使用class更新html并在class上添加事件，也可以使用radio name更新现有事件。 使用唯一名称更新每个无线电的ids ，以用于不同用途。

 $("input[name=option]").on('change', function() {
 var selected_option = $('input[name=option]').filter(':checked').val();
 alert(selected_option);
 });   

JSFiddle https://jsfiddle.net/qfttmona/

Answer 4

在这里尝试这个小提琴 ，我在html中的每个输入上将id="option"更改为id="option1"和id="option2" ，还在javascript中更改了input[name=option]选择器。

<div id='section_div'>
  <input type='radio' name='option' id='option1' value='yes' />
  <label for="option1">Yes</label>
  <input type='radio' name='option' id='option2' value='no' />
  <label for="option2">No</label>
</div>
<button id='show'> Show div </button>
<script>
$(function() {
  $("#section_div").hide();
  $("#show").click(function() {
    $("#section_div").fadeIn(1000);
  });
  $("input[name=option]").on('change', function() {
    var selected_option =
      $('input[name=option]').filter(':checked').val();
    alert(selected_option);
  });
});
</script>

Answer 5

实际上，您实际上需要将click事件处理程序附加到ID为#section_div的div内的radio按钮。

    $("#section_div input:radio").on('click', function() {
     var selected_option = $(this).val();
    alert(selected_option);
   });  

工作示例： https : //jsfiddle.net/DinoMyte/s0duxn5f/5/