如何使用jQuery检查单选按钮？

我尝试用jQuery检查单选按钮。这是我的代码：

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

还有JavaScript： 

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

不工作：

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

不工作：

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

不工作：

你有别的主意吗？我错过了什么？

1709903 次浏览
小开
最佳答案

对于等于或高于（>=）1.6的jQuery版本，请使用：

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

对于（<）1.6之前的版本，请使用：

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

提示：您可能还想在之后的单选按钮上调用click()或change()。

小开

你必须做 

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

那是超文本标记语言属性

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

jQuery 1.6中添加的另一个函数prop（），用于相同的目的。

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

简短易读的选项：

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

它返回true或false，因此您可以在“if”语句中使用它。

小开

试试这个。

在这个例子中，我用它的输入名称和值来定位它

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

很高兴知道：在多词值的情况下，它也会因为撇号而起作用。

小开

试试这个。

要使用值检查单选按钮，请使用此。

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

或

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

或

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

要使用ID检查单选按钮，请使用此。

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

或

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

试试这个

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

$.prop的方法更好：

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

你可以像下面这样测试它：

$(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();});});
小开

试试这个 

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

如果选中返回True如果未选中，则返回False

jQuery v1.10.1
小开

试试这个：

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

如果属性name不起作用，不要忘记id仍然存在。这个答案是为那些想在这里瞄准id的人准备的。

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

因为属性name对我不起作用。确保不要用双引号/单引号包围id和name。

干杯！

小开

上面的解决方案有些时候不起作用，那么你可以试试下面的方法：

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

您可以尝试的另一种方法是：

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

试试这个

$(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}});});
小开

我得到了一些相关的例子来增强，如果我想添加一个新的条件，让我们说，如果我想隐藏配色方案后，我点击项目状态值除摊铺机和铺路板。

例子在这里：

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

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

试试这个：

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

http://jsfiddle.net/nwo706xw/

小开

获取值：

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

设置值： 

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

单选按钮单击添加ATR选中：

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

我们应该告诉它是一个radio按钮。所以请尝试以下代码。

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

我只是有一个类似的问题，一个简单的解决方案是只使用：

.click()

如果您在调用函数后刷新无线电，任何其他解决方案都将起作用。

小开

是的，它对我来说就像一种方式：

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

我使用这个代码：

我很抱歉英语。

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>

小开

试试这个例子

<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>
小开

如果有人在使用jQuery UI时试图实现这一点，您还需要刷新UI复选框对象以反映更新后的值：

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

attr接受两个字符串。

正确的做法是：

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

此外，您可以检查元素是否被选中：

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

您可以检查未检查的元素：

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

您也可以通过这种方式取消选中：

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

您可以检查单选按钮：

对于等于或高于（>=）1.6的jQuery版本，请使用：

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

对于（<）1.6之前的版本，请使用：

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

令人惊讶的是，最受欢迎和接受的答案忽略了触发适当的事件，尽管有注释。确保你调用.change()，否则所有“更改”绑定都将忽略此事件。

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

如果您不想为如此简单的东西包含像jQuery这样的大型库，这里有一个使用内置DOM方法的替代解决方案：

// Check checkbox by id:document.querySelector('#radio_1').checked = true;
// Check checkbox by value:document.querySelector('#type > [value="1"]').checked = true;
// If this is the only input with a value of 1 on the page, you can leave out the #type >document.querySelector('[value="1"]').checked = true;
<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>

小开

我用了jquery-1.11.3.js

基本启用和禁用

提示1：（单选按钮类型常见禁用和启用）

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

提示2：（ID选择器使用prop（）或attr（））

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

提示3：（使用prop（）或arrt（）的类选择器）

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

其他贴士

$("#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>
小开

使用prop（） mehtod

在此处输入图片描述

Source链接 

<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>
小开

最短

radio_1.checked

checkBtn.onclick = e=> {console.log( radio_1.checked );}
Select first radio and click button<!-- Question html --><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>
<!-- Test html --><button id="checkBtn">Check</button>

jsfiddle代码段这里

小开

这个答案要归功于一条评论中的Paul LeBeau。我想我会把它写成一个合适的答案，因为令人惊讶的是没有答案。

唯一对我有用的东西（jQuery 1.12.4，Chrome86）是：

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

这完成了我想要的一切-更改单选按钮的外观（视觉上和编程上）并触发单选按钮上的change等事件。

只是像其他答案建议的那样设置“选中”属性不会改变为我选择的单选按钮。


提交答案