Zoek uit of de keuzerondje wordt gecontroleerd met jQuery?

Ik kan een keuzerondje instellen om te controleren, maar wat ik wil doen is een soort ‘luisteraar’ ingesteld die activeert wanneer een bepaalde keuzerondje is aangevinkt.

Neem bijvoorbeeld de volgende code:

$("#element").click(function()
{ 
    $('#radio_button').attr("checked", "checked");
});

Het voegt een gecontroleerd kenmerk toe en alles is goed, maar hoe zou ik gaan
een waarschuwing toevoegen. Dat verschijnt bijvoorbeeld wanneer het keuzerondje wordt gecontroleerd
Zonder de hulp van de klikfunctie?


Antwoord 1, Autoriteit 100%

$('#element').click(function() {
   if($('#radio_button').is(':checked')) { alert("it's checked"); }
});

Antwoord 2, Autoriteit 14%

Als u een groep radioetsen hebt die hetzelfde naamkenmerk en bij verzending of een evenement delen, wilt u controleren of een van deze keuzerondjes is gecontroleerd, kunt u dit eenvoudig doen door de volgende code:

$(document).ready(function(){
  $('#submit_button').click(function() {
    if (!$("input[name='name']:checked").val()) {
       alert('Nothing is checked!');
        return false;
    }
    else {
      alert('One of the radio buttons is checked!');
    }
  });
});

bron

jQuery api ref


Antwoord 3, Autoriteit 4%

Zoals Parag’s oplossing een fout voor mij gooide, is hier mijn oplossing (combineert David Hedlund’s en Parag’s):

if (!$("input[name='name']").is(':checked')) {
   alert('Nothing is checked!');
}
else {
   alert('One of the radio buttons is checked!');
}

Dit werkte prima voor mij!


Antwoord 4, Autoriteit 3%

U zou de klikgewijze gebeurtenis van het selectievakje moeten binden, omdat het evenement van de wijziging niet werkt in IE.

$('#radio_button').click(function(){
    // if ($(this).is(':checked')) alert('is checked'); 
    alert('check-checky-check was changed');
});

Nu, wanneer u de staat programmatisch wijzigt, moet u dit evenement activeren:

$('#radio_button').attr("checked", "checked");
$('#radio_button').click();

Antwoord 5, Autoriteit 2%

// controleer via de les

if($("input:radio[class='className']").is(":checked")) {
     //write your code         
}

// Controleer via naam

if($("input:radio[name='Name']").is(":checked")) {
         //write your code         
}

// Controle via gegevens

if($("input:radio[data-name='value']").is(":checked")) {
         //write your code         
}

Antwoord 6

Nog een manier is om prop(jQuery & GT te gebruiken ; = 1.6) :

$("input[type=radio]").click(function () {
    if($(this).prop("checked")) { alert("checked!"); }
});

Antwoord 7

De oplossing zal eenvoudig zijn, omdat je alleen ‘luisteraars’ nodig hebt als een bepaald keuzerondje is aangevinkt. Doe het:-

if($('#yourRadioButtonId').is(':checked')){ 
// Do your listener's stuff here. 
}

Antwoord 8

… Bedankt jongens… alles wat ik nodig had was de ‘waarde’ van het aangevinkte keuzerondje waarbij elk keuzerondje in de set een andere id had…

var user_cat = $("input[name='user_cat']:checked").val();

werkt voor mij…


Antwoord 9

Werken met alle soorten keuzerondjes en browsers

if($('#radio_button_id')[0].checked) {
   alert("radiobutton checked")
}
else{
   alert("not checked");
}

Hier werkt Jsfiddle


Antwoord 10

Als u geen klikfunctie wilt
gebruik de JQuery-wijzigingsfunctie

$('#radio_button :checked').live('change',function(){
alert('Something is checked.');
});

Dit zou het antwoord moeten zijn dat u zoekt.
als u JQuery-versie boven 1.9.1 gebruikt
proberen te gebruiken omdat de live-functie is verouderd.


Antwoord 11

dynamisch gegenereerd keuzerondje Controleer de waarde van de radio

$("input:radio[name=radiobuttonname:checked").val();

Bij wijziging dynamisch keuzerondje

$('input[name^="radioname"]').change(function () {if (this.value == 2) { }else{}});

Antwoord 12

$(‘.radio-button-class-name’).is(‘checked’) werkte niet voor mij, maar de volgende code werkte goed:

   if(typeof $('.radio-button-class-name:checked').val() !== 'undefined'){
     // radio button is checked
    }

Antwoord 13

probeer dit

   if($('input[name="radiobutton"]:checked').length == 0) {
        alert("Radio buttons are not checked");
    }

Antwoord 14

Probeer dit:

alert($('#radiobutton')[0].checked)

Antwoord 15

jQuery is nog steeds populair, maar als je geen afhankelijkheden wilt hebben, kijk dan hieronder.
Kort & functie wissen om te zien of de radioknop is aangevinkt op de ES-2015:

function getValueFromRadioButton( name ){
  return [...document.getElementsByName(name)]
         .reduce( (rez, btn) => (btn.checked ? btn.value : rez), null)
}
console.log( getValueFromRadioButton('payment') );
<div>  
  <input type="radio" name="payment" value="offline">
  <input type="radio" name="payment" value="online">
  <input type="radio" name="payment" value="part" checked>
  <input type="radio" name="payment" value="free">
</div>

Antwoord 16

ULTIEME OPLOSSING
Detecteren of een keuzerondje is aangevinkt met de onChang-methode
JQUERY > 3.6

        $('input[type=radio][name=YourRadioName]').change(()=>{
             alert("Hello"); });

De waarde van het aangeklikte keuzerondje ophalen

var radioval=$('input[type=radio][name=YourRadioName]:checked').val();

Antwoord 17

Dit werkt in alle versies van jQuery.

//-- Check if there's no checked radio button
if ($('#radio_button').is(':checked') === false ) {
  //-- if none, Do something here    
}

Om een functie te activeren wanneer een bepaald keuzerondje is aangevinkt.

// get it from your form or parent id
    if ($('#your_form').find('[name="radio_name"]').is(':checked') === false ) {
      $('#your_form').find('[name="radio_name"]').filter('[value=' + checked_value + ']').prop('checked', true);
    }

uw html

$('document').ready(function() {
var checked_value = 'checked';
  if($("#your_form").find('[name="radio_name"]').is(":checked") === false) {
      $("#your_form")
        .find('[name="radio_name"]')
        .filter("[value=" + checked_value + "]")
        .prop("checked", true);
    }
  }
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" id="your_form">
  <input id="user" name="radio_name" type="radio" value="checked">
        <label for="user">user</label>
  <input id="admin" name="radio_name" type="radio" value="not_this_one">
    <label for="admin">Admin</label>
</form>

Antwoord 18

$("#radio_1").prop("checked", true);

Voor versies van jQuery vóór 1.6, gebruik:

$("#radio_1").attr('checked', 'checked');

Other episodes