Hoe controleer je een keuzerondje met jQuery?

Ik probeer een keuzerondje te controleren met jQuery. Hier is mijn code:

<form>
    <div id='type'>
        <input type='radio' id='radio_1' name='type' value='1' />
        <input type='radio' id='radio_2' name='type' value='2' />
        <input type='radio' id='radio_3' name='type' value='3' /> 
    </div>
</form>

En het JavaScript:

jQuery("#radio_1").attr('checked', true);

Werkt niet:

jQuery("input[value='1']").attr('checked', true);

Werkt niet:

jQuery('input:radio[name="type"]').filter('[value="1"]').attr('checked', true);

Werkt niet:

Heb je een ander idee? Wat mis ik?


Antwoord 1, autoriteit 100%

Voor versies van jQuery gelijk aan of hoger (>=) 1.6, gebruik:

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

Voor versies ouder dan (<) 1.6, gebruik:

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

Tip:Misschien wilt u daarna ook click()of change()aanroepen op het keuzerondje. Bekijk opmerkingen voor meer info.


Antwoord 2, autoriteit 17%

Probeer dit.

In dit voorbeeld target ik het met de invoernaam en waarde

$("input[name=background][value='some value']").prop("checked",true);

Goed om te weten: in het geval van een waarde met meerdere woorden, werkt het ook vanwege apostrofs.


Antwoord 3, autoriteit 6%

Nog een functie prop() die is toegevoegd in jQuery 1.6, die hetzelfde doel dient.

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

Antwoord 4, autoriteit 6%

Korte en gemakkelijk te lezen optie:

$("#radio_1").is(":checked")

Het geeft true of false terug, dus je kunt het gebruiken in een “if”-statement.


Antwoord 5, autoriteit 2%

Probeer dit.

Gebruik dit om het keuzerondje te controleren met Waarde.

$('input[name=type][value=2]').attr('checked', true); 

Of

$('input[name=type][value=2]').attr('checked', 'checked');

Of

$('input[name=type][value=2]').prop('checked', 'checked');

Gebruik dit om het keuzerondje te controleren met ID.

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

Of

$('#radio_1').prop('checked','checked');

Antwoord 6

Probeer dit:

$("input[name=type]").val(['1']);

http://jsfiddle.net/nwo706xw/


Antwoord 7

De $.propWay is beter:

$(document).ready(function () {                            
    $("#radio_1").prop('checked', true);        
});

en u kunt het als het volgende testen:

$(document).ready(function () {                            
    $("#radio_1, #radio_2", "#radio_3").change(function () {
        if ($("#radio_1").is(":checked")) {
            $('#div1').show();
        }
        else if ($("#radio_2").is(":checked")) {
            $('#div2').show();
        }
        else 
            $('#div3').show();
    });        
});

Antwoord 8

Verrassend, het meest populaire en geaccepteerde antwoord negeert het geschikte gebeurtenis ondanks de opmerkingen. Zorg ervoor dat u zich aanzet .change(), anders zullen alle bindingen “On Change” dit evenement negeren.

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

Antwoord 9

Gebruik prop () mehtod

Source Link

<p>
    <h5>Radio Selection</h5>
    <label>
        <input type="radio" name="myRadio" value="1"> Option 1
    </label>
    <label>
        <input type="radio" name="myRadio" value="2"> Option 2
    </label>
    <label>
        <input type="radio" name="myRadio" value="3"> Option 3
    </label>
</p>
<p>
    <button>Check Radio Option 2</button>
</p>
<script>
    $(function () {
        $("button").click(function () {
            $("input:radio[value='2']").prop('checked',true);
        });
    });
</script>

Antwoord 10

Je moet doen

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

Dat is het HTML-kenmerk


Antwoord 11

Als eigenschap nameniet werkt, vergeet dan niet dat idnog steeds bestaat. Dit antwoord is voor mensen die de idhier willen targeten, hoe je dat doet.

$('input[id=element_id][value=element_value]').prop("checked",true);

Omdat eigenschap nameniet werkt voor mij. Zorg ervoor dat je iden nameniet tussen dubbele/enkele aanhalingstekens plaatst.

Proost!


Antwoord 12

We zouden willen zeggen dat het een radio-knop is. Probeer het dus met de volgende code.

$("input[type='radio'][name='userRadionButtonName']").prop('checked', true);

Antwoord 13

Ja, het werkte voor mij als een manier:

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

Antwoord 14

Probeer dit

$(document).ready(function(){
    $("input[name='type']:radio").change(function(){
        if($(this).val() == '1')
        {
          // do something
        }
        else if($(this).val() == '2')
        {
          // do something
        }
        else if($(this).val() == '3')
        {
          // do something
        }
    });
});

Antwoord 15

$("input[name=inputname]:radio").click(function() {
    if($(this).attr("value")=="yes") {
        $(".inputclassname").show();
    }
    if($(this).attr("value")=="no") {
        $(".inputclassname").hide();
    }
});

Antwoord 16

Krijg waarde:

$("[name='type'][checked]").attr("value");

Instellen Waarde:

$(this).attr({"checked":true}).prop({"checked":true});

RADIO-knop Klik op ATH bekijk gecontroleerd:

$("[name='type']").click(function(){
  $("[name='type']").removeAttr("checked");
  $(this).attr({"checked":true}).prop({"checked":true});
});

Antwoord 17

Probeer dit met voorbeeld

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radio" value="first"/> 1 <br/>
<input type="radio" name="radio" value="second"/> 2 <br/>
</form>
<script>
$(document).ready(function () {
    $('#myForm').on('click', function () {
        var value = $("[name=radio]:checked").val();
        alert(value);
    })
});
</script>

Antwoord 18

Voor het geval iemand dit probeert dit te bereiken tijdens het gebruik van jQuery UI, moet u ook het UI-selectievakje object vernieuwen om de bijgewerkte waarde weer te geven:

$("#option2").prop("checked", true); // Check id option2
$("input[name='radio_options']").button("refresh"); // Refresh button set

Antwoord 19

Ik gebruik deze code:

Sorry voor Engels.

var $j = jQuery.noConflict();
$j(function() {
    // add handler
    $j('#radio-1, #radio-2').click(function(){
        // find all checked and cancel checked
        $j('input:radio:checked').prop('checked', false);
        // this radio add cheked
        $j(this).prop('checked', true);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="section">
  <legend>Radio buttons</legend>
  <label>
    <input type="radio" id="radio-1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
  <br>
  <label>
    <input type="radio" id="radio-2">
    Option two can be something else
  </label>
</fieldset>

Antwoord 20

Probeer dit

var isChecked = $("#radio_1")[0].checked;

Antwoord 21

function rbcitiSelction(e) {
     debugger
    $('#trpersonalemail').hide();
    $('#trcitiemail').show();
}
function rbpersSelction(e) {
    var personalEmail = $(e).val();
    $('#trpersonalemail').show();
    $('#trcitiemail').hide();
}
$(function() {  
    $("#citiEmail").prop("checked", true)
});

Antwoord 22

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

Antwoord 23

Ik heb een gerelateerd voorbeeld dat moet worden verbeterd, wat als ik een nieuwe voorwaarde wil toevoegen, laten we zeggen, als ik wil dat het kleurenschema wordt verborgen nadat ik op de projectstatuswaarde heb geklikt, behalve straatstenen en straatplaten.

Voorbeeld staat hier:

$(function () {
    $('#CostAnalysis input[type=radio]').click(function () {
        var value = $(this).val();
        if (value == "Supply & Lay") {
            $('#ul-suplay').empty();
            $('#ul-suplay').append('<fieldset data-role="controlgroup"> \

http://jsfiddle.net/m7hg2p94/4/


Antwoord 24

Ik heb net een soortgelijk probleem, een eenvoudige oplossing is om gewoon het volgende te gebruiken:

.click()

Elke andere oplossing werkt als u de radio ververst nadat u de functie hebt aangeroepen.


Antwoord 25

Bovendien kunt u controleren of het element is aangevinkt of niet:

if ($('.myCheckbox').attr('checked'))
{
   //do others stuff
}
else
{
   //do others stuff
}

U kunt gecontroleerd op ongecontroleerd element:

$('.myCheckbox').attr('checked',true) //Standards way

U kunt ook op deze manier uitschakelen:

$('.myCheckbox').removeAttr('checked')

U kunt op het keuzerondje controleren:

Voor versies van jQuery gelijk of hoger (& GT; =) 1.6, gebruik:

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

Voor versies voorafgaand aan (& LT;) 1.6, gebruik:

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

Antwoord 26

Ik heb jQuery-1.11.3.js

gebruikt

Basic Action & AMP; Uitschakelen

Tips 1: (Radio-knop Type Gemeenschappelijk Uitschakelen & Amp; Inschakelen)

$("input[type=radio]").attr('disabled', false);
$("input[type=radio]").attr('disabled', true); 

Tips 2: (ID-selector met prop () of attract ())

$("#paytmradio").prop("checked", true);
$("#sbiradio").prop("checked", false);
jQuery("#paytmradio").attr('checked', 'checked'); // or true this won't work
jQuery("#sbiradio").attr('checked', false);

Tips 3: (Klasseekiezer met Prop () of Arrt ())

$(".paytm").prop("checked", true);
$(".sbi").prop("checked", false);
jQuery(".paytm").attr('checked', 'checked'); // or true
jQuery(".sbi").attr('checked', false);

ANDERE TIPS

$("#paytmradio").is(":checked")   // Checking is checked or not
$(':radio:not(:checked)').attr('disabled', true); // All not check radio button disabled
$('input[name=payment_type][value=1]').attr('checked', 'checked'); //input type via checked
 $("input:checked", "#paytmradio").val() // get the checked value

index.html

<div class="col-md-6">      
    <label class="control-label" for="paymenttype">Payment Type <span style="color:red">*</span></label>
    <div id="paymenttype" class="form-group" style="padding-top: inherit;">
        <label class="radio-inline" class="form-control"><input  type="radio" id="paytmradio"  class="paytm" name="paymenttype" value="1" onclick="document.getElementById('paymentFrm').action='paytmTest.php';">PayTM</label>
        <label class="radio-inline" class="form-control"><input  type="radio" id="sbiradio" class="sbi" name="paymenttype" value="2" onclick="document.getElementById('paymentFrm').action='sbiTest.php';">SBI ePAY</label>
    </div>
</div>

Antwoord 27

Dit antwoord is te danken aan Paul LeBeau in een opmerking. Ik dacht dat ik het als een goed antwoord zou opschrijven, omdat er verrassend genoeg geen was.

Het enige dat voor mij werkte (jQuery 1.12.4, Chrome 86) was:

$(".js-my-radio-button").trigger("click");

Dit doet alles wat ik wil – verandert welk keuzerondje geselecteerd lijkt (zowel visueel als programmatisch) en activeert gebeurtenissen zoals changeop het keuzerondje.

Het instellen van het kenmerk ‘aangevinkt’, zoals andere antwoorden suggereren, zou niet veranderen welk keuzerondje voor mij is geselecteerd.


Antwoord 28

probeer dit

$("input:checked", "#radioButton").val()

indien aangevinkt retourneert True
indien niet aangevinkt retourneert False

jQuery v1.10.1

Antwoord 29

Soms werken bovenstaande oplossingen niet, dan kunt u het hieronder proberen:

jQuery.uniform.update(jQuery("#yourElementID").attr('checked',true));
jQuery.uniform.update(jQuery("#yourElementID").attr('checked',false));

Een andere manier om het te proberen is:

jQuery("input:radio[name=yourElementName]:nth(0)").attr('checked',true);

Antwoord 30

Probeer dit:

$(document).ready(function(){
  $("#Id").prop("checked", true).checkboxradio('refresh');
});

Other episodes