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

在此处查看此工作小提琴：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事件处理程序附加到位于radio内div的{{1}}按钮，标识为#section_div。

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

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

获取已检查单选按钮的值不起作用

5 个答案: