獲取選中的單選按鈕的值不起作用

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/