如何检查单选按钮是否被选中

Question

How can I check if a radio button is selected? I have this code:

<form id="myForm">
    <p>Select layout grid: </p>
    <div class="cc-selector">
        <input checked="checked" id="visa" type="radio" name="credit-card" value="visa" />
        <label class="drinkcard-cc visa" for="visa"></label>

        <input id="mastercard" type="radio" name="credit-card" value="mastercard" />
        <label class="drinkcard-cc mastercard" for="mastercard"></label>

        <input id="visa1" type="radio" name="credit-card" value="visa" />
        <label class="drinkcard-cc visa1" for="visa1"></label>

        <input id="mastercard1" type="radio" name="credit-card" value="mastercard" />
        <label class="drinkcard-cc mastercard1" for="mastercard1"></label>
    </div>

    <input id="submit" type="submit" value="Submit">
</form>

$(document).ready(function() {
    $('#submit').click(function() {
        if ($('#visa').is(':checked')) { 
            alert("visa's checked"); 
        }
        if ($('#mastercard').is(':checked')) { 
            alert("mastercard's checked"); 
        }
        if ($('#visa1').is(':checked')) { 
            alert("visa1's checked"); 
        }
        if ($('#mastercard1').is(':checked')) { 
            alert("mastercard1's checked"); 
        }  
    });
});

What I want is redirect a another html page if i select a radio button or another one but i need to know the button I'm selecting. Can anyone help me? Thanks!

Answer 1

If you want to do your redirect based on the selected value you could do something like this...

$('#submit').click(function() {
    var creditcard = $('[name="credit-card"]:checked').val();

    switch(creditcard) {
        case 'visa':
            // do something
            break;
        case 'mastercard':
            //do something
            break;
        default:
            // do something
    }
});

If you wish to do your redirect based on which input is selected ...

$('#submit').click(function() {
    var creditcard = $('[name="credit-card"]:checked').attr('id');

    switch(creditcard) {
        case 'visa':
            // do something
            break;
        case 'mastercard':
            //do something
            break;
        case 'visa1':
            // do something
            break;
        case 'mastercard1':
            //do something
            break;
        default:
            // do something
    }
});

Or if you add a data attribute to your inputs, you could simply do this...

HTML:

<input checked="checked" id="visa" type="radio" name="credit-card" value="visa" data-url="/some/url/" />

JS:

$('#submit').click(function() {
    window.location = $('[name="credit-card"]:checked').data('url')
});

Answer 2

You can simply do this:

 $(document).ready(function() { $('#submit').click(function(e) { e.preventDefault(); var radio = $('.cc-selector').find('input[type=radio]:checked'); alert(radio.val() + "'s checked and you should pay at /this/url/" + radio.val()+'/'); // window.location.href = "some/specific/payment/path"+ radio.val(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="myForm"> <p>Select layout grid:</p> <div class="cc-selector"> <input checked="checked" id="visa" type="radio" name="credit-card" value="visa" /> <label class="drinkcard-cc visa" for="visa"></label> <input id="mastercard" type="radio" name="credit-card" value="mastercard" /> <label class="drinkcard-cc mastercard" for="mastercard"></label> <input id="visa1" type="radio" name="credit-card" value="visa" /> <label class="drinkcard-cc visa1" for="visa1"></label> <input id="mastercard1" type="radio" name="credit-card" value="mastercard" /> <label class="drinkcard-cc mastercard1" for="mastercard1"></label> </div> <input id="submit" type="submit" value="Submit"> </form> 

Answer 3

The method uses "is" selector and it returns true and false based on radio button status.

 $(document).ready(function() { $('#btnStatus').click(function(){ var isChecked = $('#rdSelect').is(':checked'); alert(isChecked); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <b> <input type="radio" id="rdSelect"/> Select/Deselect </b> <br/><br/> <input type="button" id="btnStatus" value="Get Radio Button status" /> 

  $(document).ready(function() {
   $('#btnStatus').click(function(){
      var isChecked = $('#rdSelect').is(':checked');
      alert(isChecked);
   });
});