cómo ocultar el cuadro de texto cuando la casilla de verificación frontal no está marcada usando jQuery

Tengo una función que se usa para ocultar/mostrar el cuadro de texto justo después de la casilla de verificación, funciona muy bien hasta que un día cambié el grupo de verificación al grupo de botones de opción. La funcion que uso es asi

var U={
HideOptions: function() {
    $(".option").each(function() {
        if ($(this).closest("li").find(".extra").length) {
            if ($(this).find("input").is(":not(:checked)")) $(this).closest("li").find(".extra").hide();
            $(this).find("input").change(function() {
                $(this).closest("li").find(".extra").toggle().find(".checkgroup .extra").each(function() {
                    $(this).hide();
                    if ($(this).closest("li").find(".option input").is(":checked")) $(this).show();
                });
            });
        }
    });
},
ChangeToRadio: function(selector) {
    var $checkbox = $("input[name=" + selector + "]");
    $checkbox.click(function() {
        if ($(this).attr('checked')) {
            $checkbox.removeAttr('checked');
            $(this).attr('checked', true);
        }
    });
  }
}

Mi estructura html es así

<ul class="checkgroup>
    <li>
        <div class="option"> 
             <input id="abc" type="checkbox" value="0" name="chk">Yes
        </div>
        <div class="extra"><input id="abc1"  type="text" value="" > </div>
    </li>
    <li>
        <div class="option"> 
             <input id="edf" type="checkbox" value="1" name="chk"> No   
        </div>
        <div class="extra"> <input id="edf1"  type="text" value="" > </div>
    </li>
    ....
 </ul>

 <script type="javascript">
       U.HideOptions();
       U.ChangeToRadio("chk");
 </scripot>

Por lo general, hay varios

  • en , Después de usar la función ChangeToRadio, descubrí que HideOptions no funciona muy bien. Por ejemplo, la parte "extra" no se ocultará si marca otra "opción".

    ¿Alguna idea?

  • preguntado el 27 de julio de 12 a las 18:07

    Faltan botones de radio en su ejemplo. -

    2 Respuestas

    http://jsfiddle.net/f26Vs/

    $('.option input:checkbox').on('click', function () {
      // you want to use .prop (it returns a boolean and is instant result) 
      //unlike .attr('checked') which has it's issue cross browser checking for true-ness
    
      var checked = $(this).prop('checked'), 
          _txtArea = $(this).closest('li').find('.extra');            
    
      if (checked) {
          _txtArea.show();
      }
    
      else { _txtArea.hide(); }
    });
    

    Respondido 27 Jul 12, 18:07

    En tu condición si dices $(this).attr('checked') pero .attr() devuelve una cadena que no es booleana. cambiar esto a $(this).attr('checked') == "checked" y vuelve a intentarlo.

    Además, si puede, intente publicar un violín para que podamos depurarlo más de un paso a la vez. Gracias :)

    Respondido 27 Jul 12, 18:07

    Sí, como señaló mcpDESIGNS, prop es el método que estaba buscando que devolvería un valor booleano: Zachary Kniebel

    No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.