如何檢查單選按鈕是否被選中

Question

如何檢查單選按鈕是否被選中？我有這樣的代碼：

<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"); 
     } 
    }); 
}); 

我要的是重定向另一個HTML頁面，如果我選擇一個單選按鈕或者一個又一個，但我需要知道我的選擇按鈕。誰能幫我？謝謝！

Answer 1

如果你想要做的基礎上，選擇值您的重定向你可以做這樣的事情...

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

如果您希望基於選擇哪個輸入上做你的重定向...

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

或者，如果你添加一個數據屬性，以便您的輸入，你可以簡單地做到這一點...

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

您可以簡單地這樣做：

$(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>