1

Tengo un grupo radio con una función para mostrar el texto del Valor. Puse para que por defecto tenga una opción seleccionada. Quiero que el texto de esa opción aparezca también por defecto, sin embargo no pude.

Pensé que podría ese mismo texto estar escrito, aparte del texto del input, y que cambie al seleccionarse por el de la opción seleccionada.

Este es el código:

$(function() {
  var $radBtn = $("#odontologia");
  $radBtn.click(function() {
    var $radChecked = $radBtn.find(':radio:checked');
    $("#forro").text('')
      .append($radChecked.val());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<span class="ef-example-1-rating" id="odontologia">
               <input type="radio" class="ef-example-1-rating-input" id="ef-example-1-rating-input-1-5" name="ef-example-1-rating-input-1" value="Hello5" >
           <label for="ef-example-1-rating-input-1-5" class="ef-example-1-rating-star"></label>
               <input type="radio" class="ef-example-1-rating-input" id="ef-example-1-rating-input-1-4" name="ef-example-1-rating-input-1" value="Hello4">
    <label for="ef-example-1-rating-input-1-4" class="ef-example-1-rating-star"></label>
    <input type="radio" class="ef-example-1-rating-input" id="ef-example-1-rating-input-1-3" name="ef-example-1-rating-input-1" value="Hello3">
    <label for="ef-example-1-rating-input-1-3" class="ef-example-1-rating-star"></label>
    <input type="radio" class="ef-example-1-rating-input" id="ef-example-1-rating-input-1-2" name="ef-example-1-rating-input-1" value="Hello2">
    <label for="ef-example-1-rating-input-1-2" class="ef-example-1-rating-star"></label>
    <input type="radio" class="ef-example-1-rating-input" id="ef-example-1-rating-input-1-1" name="ef-example-1-rating-input-1" value="Hello1" checked="yes">
    <label for="ef-example-1-rating-input-1-1" class="ef-example-1-rating-star"></label>
    <br />
    <p id="forro" style="color:red;"></p>
    </span>

1

3 respuestas 3

0

Una opción es que deje por defecto el texto quemado en la etiqueta p, tal como muestro en el siguiente código:

$(function() {
  var $radBtn = $("#odontologia");
  $radBtn.click(function() {
    var $radChecked = $radBtn.find(':radio:checked');
    $("#forro").text('')
      .append($radChecked.val());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<span class="ef-example-1-rating" id="odontologia">
               <input type="radio" class="ef-example-1-rating-input" id="ef-example-1-rating-input-1-5" name="ef-example-1-rating-input-1" value="Hello5" >
           <label for="ef-example-1-rating-input-1-5" class="ef-example-1-rating-star"></label>
               <input type="radio" class="ef-example-1-rating-input" id="ef-example-1-rating-input-1-4" name="ef-example-1-rating-input-1" value="Hello4">
    <label for="ef-example-1-rating-input-1-4" class="ef-example-1-rating-star"></label>
    <input type="radio" class="ef-example-1-rating-input" id="ef-example-1-rating-input-1-3" name="ef-example-1-rating-input-1" value="Hello3">
    <label for="ef-example-1-rating-input-1-3" class="ef-example-1-rating-star"></label>
    <input type="radio" class="ef-example-1-rating-input" id="ef-example-1-rating-input-1-2" name="ef-example-1-rating-input-1" value="Hello2">
    <label for="ef-example-1-rating-input-1-2" class="ef-example-1-rating-star"></label>
    <input type="radio" class="ef-example-1-rating-input" id="ef-example-1-rating-input-1-1" name="ef-example-1-rating-input-1" value="Hello1" checked="yes">
    <label for="ef-example-1-rating-input-1-1" class="ef-example-1-rating-star"></label>
    <br />
    <p id="forro" style="color:red;">Hello1</p>
    </span>

Otra opción es modificar el código onclick en una función separada y que, al cargar la página, llame a esta función.

0

Hola debes agregar esto en tu jquery:

$("#forro").text('')
        .append($('input:radio[name=ef-example-1-rating-input-1]:checked').val());

$(function() {

  $("#forro").text('')
            .append($('input:radio[name=ef-example-1-rating-input-1]:checked').val());

    var $radBtn = $("#odontologia");
    $radBtn.click(function() {
        var $radChecked = $radBtn.find(':radio:checked');
        $("#forro").text('')
            .append($radChecked.val());
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="ef-example-1-rating" id="odontologia">
           <input type="radio" class="ef-example-1-rating-input" id="ef-example-1-rating-input-1-5" name="ef-example-1-rating-input-1" value="Hello5" >
       <label for="ef-example-1-rating-input-1-5" class="ef-example-1-rating-star"></label>
           <input type="radio" class="ef-example-1-rating-input" id="ef-example-1-rating-input-1-4" name="ef-example-1-rating-input-1" value="Hello4">
<label for="ef-example-1-rating-input-1-4" class="ef-example-1-rating-star"></label>
<input type="radio" class="ef-example-1-rating-input" id="ef-example-1-rating-input-1-3" name="ef-example-1-rating-input-1" value="Hello3">
<label for="ef-example-1-rating-input-1-3" class="ef-example-1-rating-star"></label>
<input type="radio" class="ef-example-1-rating-input" id="ef-example-1-rating-input-1-2" name="ef-example-1-rating-input-1" value="Hello2">
<label for="ef-example-1-rating-input-1-2" class="ef-example-1-rating-star"></label>
<input type="radio" class="ef-example-1-rating-input" id="ef-example-1-rating-input-1-1" name="ef-example-1-rating-input-1" value="Hello1" checked="yes">
<label for="ef-example-1-rating-input-1-1" class="ef-example-1-rating-star"></label>
<br />
<p id="forro" style="color:red;"></p>
</span>

2
  • Hola, resuelto . Muchas gracias
    – Hernan527
    Commented el 13 ago. 2018 a las 22:42
  • Que bueno, no olvides votar por la respuesta, saludos. Commented el 13 ago. 2018 a las 22:43
0

Haces la búsqueda del :radio:checked al inicio e inicias el valor del texto a #forro.

Además podes colgarte del evento change de cada radio y si está checked le aplicas el valor de ese radio al texto de #forro al cual para no repetir y buscar cada vez lo pones en una variable.

$(function() {
  var $radBtn = $("#odontologia");
  var $forro = $("#forro");

  // valor inicial el que esté checked
  $forro.text($radBtn.find(':radio:checked').val());

  // cuando cambia algun radio usar el valor del mismo si es que está checked
  $radBtn.find(':radio').on("change", function() {
    if ($(this).attr("checked")) {
      $forro.text($(this).val());
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<span class="ef-example-1-rating" id="odontologia">
               <input type="radio" class="ef-example-1-rating-input" id="ef-example-1-rating-input-1-5" name="ef-example-1-rating-input-1" value="Hello5" >
           <label for="ef-example-1-rating-input-1-5" class="ef-example-1-rating-star"></label>
               <input type="radio" class="ef-example-1-rating-input" id="ef-example-1-rating-input-1-4" name="ef-example-1-rating-input-1" value="Hello4">
    <label for="ef-example-1-rating-input-1-4" class="ef-example-1-rating-star"></label>
    <input type="radio" class="ef-example-1-rating-input" id="ef-example-1-rating-input-1-3" name="ef-example-1-rating-input-1" value="Hello3">
    <label for="ef-example-1-rating-input-1-3" class="ef-example-1-rating-star"></label>
    <input type="radio" class="ef-example-1-rating-input" id="ef-example-1-rating-input-1-2" name="ef-example-1-rating-input-1" value="Hello2">
    <label for="ef-example-1-rating-input-1-2" class="ef-example-1-rating-star"></label>
    <input type="radio" class="ef-example-1-rating-input" id="ef-example-1-rating-input-1-1" name="ef-example-1-rating-input-1" value="Hello1" checked="yes">
    <label for="ef-example-1-rating-input-1-1" class="ef-example-1-rating-star"></label>
    <br />
    <p id="forro" style="color:red;">ASDFASDFASDFA</p>
    </span>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.