jQuery-显示单选按钮选择的标签值

Question

我正在投票应用程序。 如何显示用户选择的值？

在线演示

详细说明：默认情况下，选定的值div（ <div class="your-answer"> ）将被隐藏，如果用户选择任何答案，则div随文本一起可见：

<div class="your-answer">
  <h3>You answer is: <span></span></h3>
</div>

在<span></span>标记内，我想显示用户选择的单选标签。

我能够实现上半年我在jQuery中最小的知识，但无法显示内选择的值span标签，但我得到的警报值:(

HTML结构

<div id="livepoll">
  <div class="question">
    <h1>Lorem ipsum dolar sit amet lieu?</h1>
  </div>
  <div class="question-options">
    <ul>
      <li>
          <input type="radio" name="radiog" id="radio1">
          <label for="radio1">Terrible</label>
      </li>
      <li>
        <input type="radio" name="radiog" id="radio2">
        <label for="radio2">Needs Improvement</label>
      </li>
      <li>
        <input type="radio" name="radiog" id="radio3">
        <label for="radio3">Average</label>
      </li>
      <li>
        <input type="radio" name="radiog" id="radio4">
        <label for="radio4">Good</label>
      </li>
      <li>
        <input type="radio" name="radiog" id="radio5">
        <label for="radio5">Excellent</label>
      </li>
    </ul>
    <div class="your-answer">
      <h3>You answer is: <span></span></h3>
    </div>
  </div>
  <div class="vb-container">
    <input type="submit" value="Vote Now" id="votenow" class="btn btn-vote">
  </div>
</div>

jQuery的

$(document).ready(function() {
  $('.btn').addClass("disabled");
  $(".question-options .your-answer").hide();
  $('input[type="radio"]').click(function() {
    if($(this).attr('name') == 'radiog') {
      $('.btn').removeClass("disabled").addClass("reddy");
      $(".question-options .your-answer").slideDown("slow");
      //alert(  $(this).next('label').text() );
      $(".question-options .your-answer h3 span").text = $(".question-options li input[type='radio']").next('label').text();
    }
  });

});

Answer 1

你可以做类似的事情

 $(document).ready(function() { var $btn = $('.btn').addClass("disabled").prop('disabled', true); //also set the disabled property to true var $yans = $(".question-options .your-answer"); //add the name also to the element selector $('input[type="radio"][name="radiog"]').click(function() { $btn.removeClass("disabled").addClass("reddy").prop('disabled', false); $yans.slideDown("slow"); //you need to set the content as the text of next sibling elemnet of the radio $yans.find("h3 span").text($(this).next().text()) }) }); 

 /*Use a simple css rule to set the initial display status*/ .question-options .your-answer { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="livepoll"> <div class="question"> <h1>Lorem ipsum dolar sit amet lieu?</h1> </div> <div class="question-options"> <ul> <li> <input type="radio" name="radiog" id="radio1"> <label for="radio1">Terrible</label> </li> <li> <input type="radio" name="radiog" id="radio2"> <label for="radio2">Needs Improvement</label> </li> <li> <input type="radio" name="radiog" id="radio3"> <label for="radio3">Average</label> </li> <li> <input type="radio" name="radiog" id="radio4"> <label for="radio4">Good</label> </li> <li> <input type="radio" name="radiog" id="radio5"> <label for="radio5">Excellent</label> </li> </ul> <div class="your-answer"> <h3>You answer is: <span></span></h3> </div> </div> <div class="vb-container"> <input type="submit" value="Vote Now" id="votenow" class="btn btn-vote"> </div> </div>