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

Question

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

Online Demo

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

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

Inside <span></span>标记，我想显示用法r选定的无线电标签。

我能够实现上半年我在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>