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

Question

我在 jquery 中遇到了一些挑战。

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

它工作得很好，但我遇到的是我想获取选中的单选按钮的值，然后提醒它。

我为获取选中的单选按钮的值而编写的代码仅在这些单选按钮放置在 div 之外时才有效，但是当它们放置在 div 内时，它会提醒一个空值。

这是我的 jquery sn-p:

<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

在这里检查这个工作小提琴：fiddle

如果你使用：

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

即使单选按钮在 div 内，也会提醒选择。

Answer 2

尝试摆脱重复的 id，jQuery 选择器不喜欢这些。当我使用 jQuery attribute selectors 时，它对我有用。

这里：

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

Here is a working codepen

Answer 3

对于附加到id 的无线电元素和事件，您得到相同的id，因此它会导致问题。

您可以使用类更新 html 并在类上添加事件，或者使用无线电的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

试试这个fiddle here，我在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 事件处理程序附加到位于div 内的radio 按钮，ID 为#section_div。

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

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