clique no botão de rádio javascript jquery

89

Tenho 2 botões de opção e jquery em execução.

<input type="radio" name="lom" value="1" checked> first
<input type="radio" name="lom" value="2"> second

Agora, com um botão, posso definir onClick para executar uma função. Qual é a maneira de fazer com que os botões de rádio executem uma função quando clico em um deles?

javascript jquery

— David19801
fonte

4

Nota. É melhor não fazer com que os elementos do formulário respondam ao clique, pois muitas pessoas navegam nos formulários usando o teclado.

— superluminário de

166

Você pode usar .changepara o que quiser

$("input[@name='lom']").change(function(){
    // Do something interesting here
});

a partir de jQuery 1.3

você não precisa mais do '@'. A maneira correta de selecionar é:

$("input[name='lom']")

— Peter Kelly
fonte

7

Observe que, a partir do jQuery 1.3, você não precisa mais do '@'. A maneira correta de selecionar é:$("input[name='lom']")

— lubar de

4

É possível integrar esta solução com a solução de @JohnIdol abaixo com declarações condicionais baseadas em valores de rádio? ex

$("input[name='lom']").change(function(){ if ($(this).val() === '1') {..... // rest conditional statements based on values here } ;

— LazerSharks

A partir do jQuery 1.3, você não deve usar '@' com a propriedade name. Se você fizer isso, receberá um jquery.self-0a6570c….js?body=1:1464 Uncaught Error: Syntax error, unrecognized expressionerro. Portanto, não é uma questão de escolha.

— assustador

53

Se você tiver seus rádios em um contêiner com id = radioButtonContainerId, você ainda pode usar onClick e, em seguida, verificar qual está selecionado e executar algumas funções de acordo:

$('#radioButtonContainerId input:radio').click(function() {
    if ($(this).val() === '1') {
      myFunction();
    } else if ($(this).val() === '2') {
      myOtherFunction();
    } 
  });

— JohnIdol
fonte

Obrigado. Isso funcionou para mim, porque meu campo era parte de uma matriz e eu não poderia usar a notação de entrada [name = 'xxx'] - <input type = "radio" name = "Need [measure_type]" id = "Need_measure_type" value = "aaa">

— crafter

Isso reage mesmo se você mover a tecla tab para baixo e mover o marcador com as setas?

— Alisso

isso não funcionará no celular # seletor não está funcionando no celular.

— zawhtut

19

<input type="radio" name="radio" value="creditcard" />
<input type="radio" name="radio" value="cash"/>
<input type="radio" name="radio" value="cheque"/>
<input type="radio" name="radio" value="instore"/>

$("input[name='radio']:checked").val()

— Bishoy Hanna
fonte

1

Embora essa resposta não mostre como conectar o código ao evento, gosto que contenha as informações de como recuperar o valor do grupo de botões de opção.

— Manfred,

1

$ ("input [@ name = 'lom']"). change (function () {// Faça algo interessante aqui});

— Bishoy Hanna

11

isso deve ser bom

$(document).ready(function() {
    $('input:radio').change(function() {
       alert('ole');
    });
});

— Adam Lukaszczyk
fonte

Você perdeu a); atrás.

— Biswas Khayargoli

8

Existem várias maneiras de fazer isso. Ter um contêiner ao redor dos botões de rádio é altamente recomendado, mas você também pode colocar uma classe diretamente nos botões. Com este HTML:

<ul id="shapeList" class="radioList">
<li><label>Shape:</label></li>
<li><input id="shapeList_0" class="shapeButton" type="radio" value="Circular" name="shapeList" /><label for="shapeList_0">Circular</label></li>
<li><input id="shapeList_1" class="shapeButton" type="radio" value="Rectangular" name="shapeList" /><label for="shapeList_1">Rectangular</label></li>
</ul>

você pode selecionar por classe:

$(".shapeButton").click(SetShape);

ou selecione por ID de contêiner:

$("#shapeList").click(SetShape);

Em qualquer um dos casos, o evento será disparado ao clicar no botão de opção ou no rótulo dele, embora estranhamente no último caso (selecionando por "#shapeList"), clicar no rótulo irá disparar a função de clique duas vezes por algum motivo, em pelo menos no FireFox; selecionar por classe não fará isso.

SetShape é uma função e se parece com isto:

function SetShape() {
    var Shape = $('.shapeButton:checked').val();
//dostuff
}

Dessa forma, você pode ter rótulos em seus botões e pode ter várias listas de botões de opção na mesma página que fazem coisas diferentes. Você pode até mesmo fazer com que cada botão individual na mesma lista faça coisas diferentes, configurando um comportamento diferente em SetShape () com base no valor do botão.

— ZeroK
fonte

3

é sempre bom restringir a pesquisa DOM. então é melhor usar um pai também, de modo que todo o DOM não seja percorrido.

É MUITO RÁPIDO

<div id="radioBtnDiv">
  <input name="myButton" type="radio" class="radioClass" value="manual" checked="checked"/>
 <input name="myButton" type="radio" class="radioClass" value="auto" checked="checked"/>
</div>



 $("input[name='myButton']",$('#radioBtnDiv')).change(
    function(e)
    {
        // your stuffs go here
    });

— Vins
fonte