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

Posted 2023-05-09

【中文标题】如何检查单选按钮是不是被选中

【英文标题】：How to check if radio button is selected如何检查单选按钮是否被选中

【发布时间】：2016-01-11 04:47:27

【问题描述】：

如何检查单选按钮是否被选中？我有这个代码：

<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 页面，但我需要知道我正在选择的按钮。谁能帮我？谢谢！

【问题讨论】：

挂钩到电台上的change() 事件并询问checked 属性。如果是true，则该项目已被选中，您可以进行重定向。

【参考方案1】：

如果你想根据选择的 value 进行重定向，你可以这样做......

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

【参考方案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>

【参考方案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);
   );
);