Question

我正在进行投票申请。如何显示用户选择的值？

Online Demo

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

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

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

我能够用jQuery中的最小知识实现上半部分，但无法在span标记内显示所选值，尽管我通过Alert得到了值：（

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>

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

1 个答案: