javascript - presionar - jQuery marque/desmarque el botón de radio al hacer clic

ocultar boton javascript

Question

Tengo este código para marcar / desmarcar un botón de radio en un clic.

Sé que no es bueno para la interfaz de usuario, pero necesito esto.

$(''#radioinstant'').click(function() {     
  var checked = $(this).attr(''checked'', true);
  if(checked){ 
    $(this).attr(''checked'', false);
  }
  else{ 
    $(this).attr(''checked'', true);
  }
});

La función anterior no está funcionando.

Si hago clic en el botón, nada cambia. Permanece revisado. ¿Por qué? ¿Dónde está el error? No soy un experto en jQuery. Estoy en jQuery 1.3.2

Para que quede claro, #radioinstant es el ID del botón de #radioinstant .

Answer 1

$ (document) .ready (function () {$ ("input: radio: checked"). data ("chk", true);

$("input:radio").click(function(){
    $("input[name=''"+$(this).attr("name")+"'']:radio").not(this).removeData("chk");

    $(this).data("chk",!$(this).data("chk"));

    $(this).prop("checked",$(this).data("chk"));
});

});

Answer 2

Aquí está la solución simple, espero que te ayude. Aquí hay un ejemplo simple para mejorar la respuesta.

$(''[type="radio"]'').click(function () {

            if ($(this).attr(''checked'')) {

                $(this).removeAttr(''checked'');
                $(this).prop(''checked'',false);

            } else {

                $(this).attr(''checked'', ''checked'');

            }
        });

Demo siento por demasiado tarde ... :)

Answer 3

Creo que este es el problema: si tiene más de un botón de opción y se hace clic en uno de ellos, no hay forma de deseleccionarlos. Lo que se necesita es un selector "ninguno o solo uno", por lo que las casillas de verificación no serían apropiadas. Podría tener un botón "claro" o algo así para anular la selección de todo, pero sería bueno hacer clic en el botón de radio seleccionado para deseleccionarlo y volver al estado "ninguno", por lo que no debe saturar su interfaz de usuario. Un control extra.

El problema con el uso de un controlador de clic es que, cuando se llama, el botón de opción ya está marcado. No sabe si este es el clic inicial o un segundo clic en un botón de radio ya marcado. Así que estoy usando dos controladores de eventos, movido hacia abajo para establecer el estado anterior, luego el controlador de clic como se usa arriba:

$("input[name=myRadioGroup]").mousedown(function () 
{
    $(this).attr(''previous-value'', $(this).prop(''checked''));
});

$("input[name=myRadioGroup]").click(function () 
{
    var previousValue = $(this).attr(''previous-value'');

    if (previousValue == ''true'')
        $(this).prop(''checked'', false);
});

Answer 4

Después de haber probado algunas de las soluciones anteriores que no me funcionaron al 100%, decidí crear la mía. Crea nuevos oyentes de clic después de hacer clic en un botón de radio:

/**
 * Radio select toggler
 * enables radio buttons to be toggled when clicked
 * Created by Michal on 09/05/2016.
 */

var radios = $(''input[type=radio]'');

/**
 * Adds click listeners to all checkboxes to unselect checkbox if it was checked already
 */
function updateCheckboxes() {
    radios.unbind(''click'');
    radios.filter('':checked'').click(function () {
        $(this).prop(''checked'', false);
    });
    radios.click(function () {
        updateCheckboxes();
    });
}

updateCheckboxes();

Answer 5

DiegoP,

Estaba teniendo el mismo problema, hasta que me di cuenta de que el control de la casilla no se activa hasta que se elimina el atributo. Eso significa que incluso si el valor marcado se hace falso, permanecerá allí.

Por lo tanto, use la función removeAttr () y elimine el atributo verificado y FUNCIONARÁ DEFINITIVAMENTE.

Answer 6

En lugar de obtener el valor marcado, lo está configurando con:

var checked = $(this).attr(''checked'', true);

Para conseguirlo correctamente:

var checked = $(this).attr(''checked'');

Una solución de trabajo (con múltiples botones de radio que tienen diferentes valores):

// select radio buttons group (same name)
var radioButtons = $("input[type=''radio''][name=''rr'']");
// save initial ckecked states
var radioStates = {};
$.each(radioButtons, function(index, rd) {
    radioStates[rd.value] = $(rd).is('':checked'');
});

// handle click event
radioButtons.click(function() {

    // check/unchek radio button
    var val = $(this).val();  
    $(this).prop(''checked'', (radioStates[val] = !radioStates[val]));    

    // update other buttons checked state
    $.each(radioButtons, function(index, rd) {
        if(rd.value !== val) {
            radioStates[rd.value] = false; 
        }
    });
});

PS: $().attr debe usarse en lugar de $().prop para jquery <1.6

Demo: jsFiddle

Answer 7

Esta última solución es la que funcionó para mí. Tuve un problema con Undefined y el objeto objeto o siempre devolví falso y siempre volví verdadero, pero esta solución funciona cuando se verifica y se desmarca.

Este código muestra los campos cuando se hace clic y oculta los campos cuando se desmarca:

$("#new_blah").click(function(){
   if ($(this).attr(''checked'')) {

            $(this).removeAttr(''checked'');
    var radioValue = $(this).prop(''checked'',false);
    // alert("Your are a rb inside 1- " + radioValue);
    // hide the fields is the  radio button is no     
    $("#new_blah1").closest("tr").hide();
    $("#new_blah2").closest("tr").hide();

    } 
    else {

    var radioValue =  $(this).attr(''checked'', ''checked'');
    // alert("Your are a rb inside 2 - " + radioValue);
    // show the fields   when radio button is set to  yes
    $("#new_blah1").closest("tr").show();
    $("#new_blah2").closest("tr").show();

}

Answer 8

Esta función agregará un check / unchecked a todos los botones de radio

jQuery(document).ready(function(){
jQuery('':radio'').click(function()
{
if ((jQuery(this).attr(''checked'') == ''checked'') && (jQuery(this).attr(''class'') == ''checked''))
{   
    jQuery(this).attr(''class'',''unchecked'');
    jQuery(this).removeAttr(''checked'');
} else {
jQuery(this).attr(''class'',''checked'');
}//or any element you want

});
});

Answer 9

He ampliado las sugerencias anteriores. Esto funciona para mí, con múltiples radios acopladas por el mismo nombre.

$("input[type=''radio'']").click(function()
{
  var previousValue = $(this).attr(''previousValue'');
  var name = $(this).attr(''name'');

  if (previousValue == ''checked'')
  {
    $(this).removeAttr(''checked'');
    $(this).attr(''previousValue'', false);
  }
  else
  {
    $("input[name="+name+"]:radio").attr(''previousValue'', false);
    $(this).attr(''previousValue'', ''checked'');
  }
});

Answer 10

La mejor y más corta solución. Funcionará para cualquier grupo de radios (con el mismo nombre).

$(document).ready(function(){
    $("input:radio:checked").data("chk",true);
    $("input:radio").click(function(){
        $("input[name=''"+$(this).attr("name")+"'']:radio").not(this).removeData("chk");
        $(this).data("chk",!$(this).data("chk"));
        $(this).prop("checked",$(this).data("chk"));
        $(this).button(''refresh''); // in case you change the radio elements dynamically
    });
});

Más información, here .

Disfrutar.

Answer 11

Las soluciones que intenté con esta pregunta no funcionaron para mí. De las respuestas que funcionaron parcialmente, aún encontré que tuve que hacer clic dos veces en el botón de opción que no había sido seleccionado previamente solo para que lo revisaran nuevamente. Actualmente estoy usando jQuery 3+.

Después de perder el tiempo tratando de hacer que esto funcionara utilizando atributos de datos u otros atributos, finalmente descubrí la solución utilizando una clase.

Para su entrada de radio verificada, déle la clase checked por ejemplo:

<input type="radio" name="likes_cats" value="Meow" class="checked" checked>

Aquí está la jQuery:

$(''input[type="radio"]'').click(function() {
    var name = $(this).attr(''name'');

    if ($(this).hasClass(''checked'')) {
        $(this).prop(''checked'', false);
        $(this).removeClass(''checked'');
    }
    else {
        $(''input[name="''+name+''"]'').removeClass(''checked'');
        $(this).addClass(''checked'');
    }
});

Answer 12

Si todavía estás buscando más respuestas, he encontrado que esto funciona con todos los botones de radio:

<script type="text/javascript">
        jQuery(document).ready(function ($){
                    var allRadios = $(''input[type=radio]'')
                    var radioChecked;

                    var setCurrent = 
                                    function(e) {
                                        var obj = e.target;

                                        radioChecked = $(obj).attr(''checked'');
                                 }

                    var setCheck = 
                                function(e) {

                                    if (e.type == ''keypress'' && e.charCode != 32) {
                                        return false;
                                    }

                                    var obj = e.target;

                         if (radioChecked) {
                         $(obj).attr(''checked'', false);
                         } else {
                         $(obj).attr(''checked'', true);
                         }
                             }    

                    $.each(allRadios, function(i, val){        
                         var label = $(''label[for='' + $(this).attr("id") + '']'');

                     $(this).bind(''mousedown keydown'', function(e){
                            setCurrent(e);
                        });

                        label.bind(''mousedown keydown'', function(e){
                            e.target = $(''#'' + $(this).attr("for"));
                            setCurrent(e);
                        });

                     $(this).bind(''click'', function(e){
                            setCheck(e);    
                        });

                    });
        });
</script>

Answer 13

Si todo lo que quieres hacer es tener una casilla de verificación que marque, no te preocupes por hacerlo con JQuery. Esa es la funcionalidad por defecto de una casilla de verificación al hacer clic. Sin embargo, si desea hacer cosas adicionales, puede agregarlas con JQuery. Antes de jQuery 1.9, puede usar use $(this).attr(''checked''); para obtener el valor en lugar de $(this).attr(''checked'', true); , como el segundo establecerá el valor.

Here hay una demostración de violín que muestra la funcionalidad predeterminada de la casilla de verificación frente a lo que está haciendo con JQuery.

Nota: Después de JQuery 1.6 , debe usar $(this).prop; en lugar de $(this).attr en los tres lugares (gracias @Whatevo por señalarlo y ver más detalles aquí ).

ACTUALIZAR:

Lo sentimos, se perdió el requisito de que tenía que ser un botón de radio. Es posible que desee considerar la casilla de verificación, pero here está el código actualizado para la versión de entrada de radio. Funciona al establecer el valor previousValue como un atributo en la casilla de verificación, ya que no creo que la prop sea ​​compatible con 1.3.2. También puede hacer esto en una variable con ámbito, ya que a algunas personas no les gusta establecer atributos aleatorios en los campos. here está el nuevo ejemplo.

ACTUALIZACIÓN 2:

Como Josh señaló, la solución anterior solo funcionaba con un botón de radio. Aquí hay una función que hace que un grupo de radios sea deseleccionado por su nombre, y un fiddle :

var makeRadiosDeselectableByName = function(name){
    $(''input[name='' + name + '']'').click(function() {
        if($(this).attr(''previousValue'') == ''true''){
            $(this).attr(''checked'', false)
        } else {
            $(''input[name='' + name + '']'').attr(''previousValue'', false);
        }

        $(this).attr(''previousValue'', $(this).attr(''checked''));
    });
};

Answer 14

Si usa el botón de hacer clic y solo verifica si la radio está marcada y luego deselecciona, nunca la revisará. Así que quizás lo más fácil es usar nombres de clase como este:

if($(this).hasClass(''alreadyChecked'')) {//it is already checked
        $(''.myRadios'').removeClass(''alreadyChecked'');//remove from all radios
        $(this).prop(''checked'', false);//deselect this
    }
    else {
        $(''.myRadios'').removeClass(''alreadyChecked'');//remove from all
        $(this).addClass(''alreadyChecked'');//add to only this
    }

Answer 15

Tenía un problema relacionado. Tenía que abrir un cuadro de diálogo desde el menú desplegable basado en la selección del menú desplegable. Mostraré uno o dos botones de opción. Solo se puede activar un botón de radio a la vez.

• La opción 1 mostrará dos botones de radio con la primera radio seleccionada
• La opción 2 mostrará el segundo botón de radio y se seleccionará.

La secuencia de comandos funciona algún tiempo alguna vez, inyecta la casilla de verificación marcada pero aún sin marcar

Fui a jQuery .prop() , parece que jquery .prop() .attr() tiene alguna complicación con los botones de radio al usar attr o prop. Entonces, lo que hice en su lugar es activar el clic en el botón de radio basado en Seleccionar valor.

Eso resuelve la necesidad de usar attr o prop o usar código off off.

myForm = $("#myForm");

if (argument === ''multiple'') {
            myForm.find(''#radio1'').parent(''li'').hide();
            myForm.find(''#radio2'').trigger(''click'');
    }
    else{
        myForm.find(''#radio1'').trigger(''click'');
         myForm.find(''#radio1'').parent(''li'').show();
    }

No estoy seguro si esto es una buena práctica pero funciona como un encanto

Answer 16

Tengo un escenario relacionado pero diferente. Lo siguiente es lo que estoy haciendo:

Nota: el código para seleccionar / deseleccionar todos los botones de opción de la clase ''containerRadio'' cuando se selecciona el botón de opción principal.

CÓDIGO

        $(''#selectAllWorkLot'').click (function ()
        {

              var previousValue = $(this).attr(''previousValue'');

              if (previousValue == ''checked'')
              {
                resetRadioButtonForSelectAll();

                //Unselect All
                unSelectAllContainerRadioButtons();
              }
              else
              {
                $(this).attr(''previousValue'', ''checked'');

                //Select All
                selectAllContainerRadioButtons();
              }
        });


        function resetRadioButtonForSelectAll()
        {
            $(''#selectAllWorkLot'').removeAttr(''checked'');
            $(''#selectAllWorkLot'').attr(''previousValue'', false);
            //$(''#selectAllWorkLot'').prop(''checked'', false);
        }


        function selectAllContainerRadioButtons()
        {
            $(''.containerRadio'').prop(''checked'', true);
        }

        function unSelectAllContainerRadioButtons()
        {
            $(''.containerRadio'').prop(''checked'', false);
        }

Answer 17

Tomé https://.com/a/13575528/80353 y lo adapté de esta manera

$(document).ready(function() {

        $(''body'').on(''click'', ''input[type="radio"]'', function() {
            changeCheckedAttributes($(this));
        });
        function changeCheckedAttributes(elt) {
            $("input[name=''"+$(elt).attr("name")+"'']:radio").not($(elt)).removeData("chk");
            $("input[name=''"+$(elt).attr("name")+"'']:radio").not($(elt)).removeAttr("checked");
            $("input[name=''"+$(elt).attr("name")+"'']:radio").not($(elt)).prop("checked", false);
            $(elt).data("chk",!$(elt).data("chk"));
            $(elt).prop("checked", true);
            $(elt).attr("checked", $(elt).data("chk"));
        }

    });

Answer 18

Versión mejorada de respuesta de Jurrie

$(''#myRadio'').off(''click'').on(''click'', function() {
  if ($(this).data(''checked'')) {
    $(this).removeAttr(''checked'');
    $(this).data(''checked'', false);
  } else {
    $(this).data(''checked'', true);
  }
});

Demo en vivo

Answer 19

Yo sugeriría esto:

$(''input[type="radio"].toggle'').click(function () {
    var $rb = $(this);

    if ($rb.val() === ''on'') {
        $rb.val(''off'');
        this.checked = false;
    }
    else {
        $rb.val(''on'');
        this.checked = true;
    }
});

Tu HTML se vería así:

<input type="radio" class="toggle" value="off" />

Answer 20

toggleAttr() es proporcionado por este plugin muy agradable y pequeño .

Código de muestra

$(''#my_radio'').click(function() {
    $(this).toggleAttr(''checked'');
});

/**
 * toggleAttr Plugin
 */
jQuery.fn.toggleAttr = function(attr) {
    return this.each(function() {
        var $this = $(this);
        $this.attr(attr) ? $this.removeAttr(attr) : $this.attr(attr, attr);
    });
};

Aún más divertido, demo

Puedes colocar el botón de radio dentro de la etiqueta o las etiquetas de los botones y hacer algunas cosas buenas.

Answer 21

- EDITAR -

Seguro que parece que tu código está obligando a una entrada de radio a comportarse como una entrada de casilla de verificación. Podría pensar en usar una casilla de verificación sin la necesidad de jQuery. Sin embargo, si desea forzar, como dijo @manji, necesita almacenar el valor fuera del controlador de clic y luego establecerlo en cada clic en el opuesto de lo que es en ese momento. La respuesta de @manji es correcta. Simplemente agregaría que debería almacenar en caché objetos jQuery en lugar de volver a consultar el DOM:

var $radio = $("#radioinstant"),
    isChecked = $radio.attr("checked");

$radio.click(function() {

    isChecked = !isChecked;
    $(this).attr("checked", isChecked);

});