[英]How to check if radio button is selected
如何檢查是否選擇了單選按鈕? 我有以下代碼:
<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頁面。 誰能幫我? 謝謝!
如果您想根據所選值進行重定向,則可以執行以下操作...
$('#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')
});
您可以簡單地做到這一點:
$(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>
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);
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.