Comment afficher la valeur sélectionnée de type = "radio" sur populate?

Question

En cliquant sur le Populate bouton Valeurs de la div en dessous du bouton doit remplir les valeurs des boutons radio sélectionnés des endroits préférés et à la maison respectivement

Je veux le faire discrètement, sans ligne JavaScript

<div id="form_block"> 
    <div class="home-location"> 
     <ul> 
      <li>Home Location</li> 
      <li> 
       <input type="radio" name="home-location" value="india" class="radio" id="home-india" /><label 
        for="home-india">India</label></li> 
      <li> 
       <input type="radio" name="home-location" value="usa" class="radio" id="home-usa" /><label 
        for="home-usa">USA</label></li> 
     </ul> 
    </div> 
    <div class="prefer-location"> 
     <ul> 
      <li>Preferred Location</li> 
      <li> 
       <input type="radio" name="home-preferred" value="india" class="radio" id="preferred-india" /><label 
        for="preferred-india">India</label></li> 
      <li> 
       <input type="radio" name="home-preferred" value="usa" class="radio" id="preferred-usa" /><label 
        for="preferred-usa">USA</label></li> 
     </ul> 
    </div> 
    <div class="result"> 
     My Home Location is: <span class="home-location-result"></span>and my preferred 
     location is: <span class="home-location-result"></span> 
    </div> 
    <input type="submit" value="Populate Values" id="ss" class="submit" /> 

Answer 1

Modifié votre code HTML. Fourni un attribut id pour votre résultat couvre

$(function(){ 
    $("#ss").click(function(){ 
     // Find all input elements with type radio which are descendants of element with id `form` 
     var filt = $("#form_block input:radio"); 
     // Apply a filter to the above object with `name='home-location'` and checked and get the value 
     var homeVal = filt.filter("[name='home-location']:checked").val(); 
     // same as above 
     var preferredVal = filt.filter("[name='home-preferred']:checked").val(); 
     // Set the text of the element width id `home-location-result' with the computed value 
     $("#home-location-result").text(homeVal); 
     // same as above 
     $("#preferred-location-result").text(preferredVal); 

     return false; 
    }); 
}); 

Voir un working demo

Answer 2

utilisation des œuvres de ce pour moi il

<script> 
function test() 
{ 
    var home= $('input:radio[name=home-location]:checked').val(); 
    document.getElementById("h1").innerHTML=home; 
    var preferred= $('input:radio[name=home-preferred]:checked').val(); 
    document.getElementById("h2").innerHTML=preferred; 
    return false; 

} 


</script> 
<form onsubmit="return test();"> 
<div id="form_block"> 
    <div class="home-location"> 
     <ul> 
      <li>Home Location</li> 
      <li> 
       <input type="radio" name="home-location" value="india" class="radio" id="home-india" /><label 
        for="home-india">India</label></li> 
      <li> 
       <input type="radio" name="home-location" value="usa" class="radio" id="home-usa" /><label 
        for="home-usa">USA</label></li> 
     </ul> 
    </div> 
    <div class="prefer-location"> 
     <ul> 
      <li>Preferred Location</li> 
      <li> 
       <input type="radio" name="home-preferred" value="india" class="radio" id="preferred-india" /><label 
        for="preferred-india">India</label></li> 
      <li> 
       <input type="radio" name="home-preferred" value="usa" class="radio" id="preferred-usa" /><label 
        for="preferred-usa">USA</label></li> 
     </ul> 
    </div> 
    <div class="result"> 
     My Home Location is: <span class="home-location-result" id="h1"></span>and my preferred 
     location is: <span class="home-location-result" id='h2'></span> 
    </div> 
    <input type="submit" value="Populate Values" id="ss" class="submit" /> 
</form>