Finden Sie heraus, ob das Optionsfeld mit JQuery aktiviert ist.

584

Ich kann ein Optionsfeld so einstellen, dass es gut aktiviert ist. Ich möchte jedoch eine Art "Listener" einrichten, der aktiviert wird, wenn ein bestimmtes Optionsfeld aktiviert ist.

Nehmen Sie zum Beispiel den folgenden Code:

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

Es fügt ein geprüftes Attribut hinzu und alles ist in Ordnung, aber wie würde ich vorgehen, um eine Warnung hinzuzufügen? Wird dies beispielsweise angezeigt, wenn das Optionsfeld ohne die Hilfe der Klickfunktion aktiviert wird?

Keith Donegan
quelle
2
Mögliches Duplikat der Überprüfung eines bestimmten Optionsfelds ist aktiviert
Felix Kling
1
verwandte Monitoring when a radio button is unchecked stackoverflow.com/questions/5824639/…
Adrien Be

Antworten:

1082
$('#element').click(function() {
   if($('#radio_button').is(':checked')) { alert("it's checked"); }
});
David Hedlund
quelle
Bingo! danke David. Muss ich also eine Aktion aufrufen (klicken usw.), um die Warnung anzuzeigen? Gibt es eine Möglichkeit, dies zu tun, ohne zu klicken?
Keith Donegan
3
Dies löst nicht das "ohne die Hilfe der Klickfunktion", oder?
Znarkus
5
@Znarkus: OP scheint zufrieden zu sein. Würden Sie argumentieren, dass Ihre eigene Nutzung ('#radio_button').clickohne ist click?
David Hedlund
3
@David Die zweite Zeile sollte lauten if ($('#radio_button').is(':checked'))) { alert("it's checked"); }: Sie haben das jQuery $ -Zeichen vergessen und müssen es dann in weitere Klammern setzen.
zuallauz
2
@zua: du hast recht! Es gab sogar einen Syntaxfehler wie zuvor (nicht übereinstimmende Klammern). behoben
David Hedlund
154

Wenn Sie eine Gruppe von Optionsfeldern mit demselben Namensattribut haben und beim Senden oder bei einem Ereignis überprüfen möchten, ob eines dieser Optionsfelder aktiviert wurde, können Sie dies einfach mit dem folgenden Code tun:

$(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!');
    }
  });
});

Quelle

jQuery API Ref

Parag
quelle
Das hat bei mir nicht funktioniert. Wenn ich alarmiere ($ ("Eingabe [@ name = 'Versandmethode']: aktiviert"). Val ()); Es gibt mir immer noch den Wert, auch wenn das Optionsfeld nicht ausgewählt ist.
AndrewC
1
Hinweis: Wenn Sie mehrere Formulare mit Gruppen von Optionsfeldern haben, die denselben Namen verwenden, müssen Sie sicherstellen, dass nur die Formulare des übermittelten Formulars überprüft werden. Eine Möglichkeit, dies zu tun, ist die Verwendung der Suchmethode auf dem Formular: $('#myform').submit(function(event){ if (!$(this).find("input[name='name']:checked").val()) {
Benjamin
41

Da Parags Lösung einen Fehler für mich verursachte, ist hier meine Lösung (Kombination von David Hedlunds und Parags):

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

Das hat bei mir gut funktioniert!

Patrick DaVader
quelle
32

Sie müssten das Klickereignis des Kontrollkästchens binden, da das Änderungsereignis im IE nicht funktioniert.

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

Wenn Sie nun den Status programmgesteuert ändern, müssen Sie dieses Ereignis auch auslösen:

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

// Klasse durchchecken

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

// Überprüfen Sie den Namen

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

// Daten durchsehen

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

Eine andere Möglichkeit ist die Verwendung von (jQuery> = 1.6) :prop

$("input[type=radio]").click(function () {
    if($(this).prop("checked")) { alert("checked!"); }
});
Saeb Amini
quelle
In der Tat .prop()ist viel schneller und einfach einfacher zu tippen.
März 2377
10

Die Lösung wird einfach sein, da Sie nur "Zuhörer" benötigen, wenn ein bestimmtes Optionsfeld aktiviert ist. Tu es :-

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

Wenn Sie keine Klickfunktion wünschen, verwenden Sie die JQuery-Änderungsfunktion

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

Dies sollte die Antwort sein, nach der Sie suchen. Wenn Sie eine Jquery-Version über 1.9.1 verwenden, versuchen Sie, diese zu verwenden, da die Live-Funktion veraltet ist.

iCezz
quelle
6

... Danke Jungs ... alles was ich brauchte war der 'Wert' des aktivierten Optionsfelds, bei dem jedes Optionsfeld im Set eine andere ID hatte ...

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

funktioniert bei mir...

Bill Warren
quelle
Nützlichste Antwort
amal50
5

Arbeiten mit allen Arten von Optionsfeldern und Browsern

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

Jsfiddle hier arbeiten

Thyagarajan C.
quelle
3

dynamisch erzeugter Optionsfeld Überprüfen Sie den Radio-Abrufwert

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

Beim Ändern des dynamischen Optionsfelds

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

$ ('. Optionsfeld-Klassenname'). ist ('markiert') hat bei mir nicht funktioniert, aber der nächste Code hat gut funktioniert:

    if(typeof $('.radio-button-class-name:checked').val() !== 'undefined'){
     // radio button is checked
    }
Jokerius
quelle
1
Da Sie es mit einer Klasse anstelle einer ID verwendet haben, hätte es anstelle eines Elements eine Knotenliste zurückgegeben. $('.radio-button-class-name').first().is(':checked')hätte funktionieren sollen.
Levi Johansen
2

Versuche dies

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

Versuche dies:

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

jQuery ist immer noch beliebt, aber wenn Sie keine Abhängigkeiten haben möchten, siehe unten. Kurz- und Löschfunktion, um herauszufinden, ob das Optionsfeld auf ES-2015 aktiviert ist:

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>

MaxWall
quelle
-3
$("#radio_1").prop("checked", true);

Verwenden Sie für Versionen von jQuery vor 1.6:

$("#radio_1").attr('checked', 'checked');
Jayendra Manek
quelle
2
Dies setzt den Wert der checkedEigenschaft, anstatt es zu abfragt.
März 2377