问：

我尝试使用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);

不起作用：

你还有别的想法吗？我错过了什么？

JavaScript jQuery 单选按钮

1赞 Alexis 4/15/2011

感谢您的回复！我发现了问题所在。实际上，第两种方法是有效的。关键是我使用 jqueryUI 将一组 3 个单选按钮转换为一个按钮集，代码如下： jQuery（“#type”）.buttonset（）;但是在检查收音机之前进行此更改会损坏收音机（不知道为什么）。最后，我在检查收音机后拨打了按钮，它的工作无可挑剔。

答：

1677赞 Mike Thomsen 4/14/2011 #1

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

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

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

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

提示：您可能还想在之后致电或点击单选按钮。有关详细信息，请参阅评论。click()change()

84赞 installero 3/16/2013

在 jQuery 1.9 或更高版本中，此解决方案不起作用。使用 $（“#radio_1”）.prop（“checked”， true）;相反。

44赞 Foxinni 9/17/2013

添加到末尾以触发页面上的任何其他事件很有帮助。.change()

34赞 Paul LeBeau 3/29/2016

如果您希望单选按钮组中的其他单选按钮正确更新，请使用$("#radio_1").prop("checked", true).trigger("click");

9赞 JohnP 4/14/2011 #2

你必须做

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

这就是 HTML 属性

3赞 dominicbri7 4/14/2011 #3

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

2赞 JohnP 4/14/2011

$("#radio_1").attr('checked', true);这是行不通的。正如OP所提到的

2赞 SomeKittens 4/13/2014

请在您的答案中解释代码，并阅读问题（这已经尝试过了）

98赞 Umesh Patil 1/3/2012 #4

jQuery 1.6 中添加的另一个函数 prop（）具有相同的目的。

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

15赞 Pascal 2/26/2013

jQuery 1.9 停止为我工作，这就是解决方案！attr('checked', true)

100赞 Petr Lazarev 10/17/2012 #5

简短易读的选项：

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

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

7赞 Bampfer 5/15/2015

谢谢！这就是我一直在寻找的，但是（仅供参考）OP 询问如何设置单选按钮，而不是获取值。（“检查”这个词使问题变得混乱。

301赞 Vladimir Djuricic 11/16/2012 #6

试试这个。

在此示例中，我使用其输入名称和值来定位它

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

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

0赞 Michael K 4/15/2022

出于某种原因，当仅使用 ID 不起作用时，这个对我在一个麻烦的无线电组中起作用。

0赞 Vladimir Djuricic 4/16/2022

@MichaelK也许还有另一个元素具有相同的 id，但它不是输入类型？

0赞 Michael K 4/20/2022

我找了那个，但没有其他相同的 id。这很奇怪。我注意到在源代码中，我已经“检查”了最初选中的单选按钮。但是在检查器中，我看到它被检查=“”，所以我想知道这种差异是否意味着什么。

36赞 Lakshmana Kumar 12/20/2012 #7

试试这个。

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

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

4赞 user2190046 3/20/2013 #8

试试这个

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

17赞 Amin Saqi 7/19/2013 #9

方法更好：$.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();
    });        
});

2赞 pst 4/24/2014 #10

试试这个

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

如果选中返回如果未选中返回TrueFalse

jQuery v1.10.1

1赞 user3721473 6/9/2014 #11

试试这个：

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

0赞 Nathan 1/2/2015

如果不包含插件的文件，这将不起作用，当您可以使用jQuery的内置函数来完成此操作时，这是毫无意义的（请参阅公认的答案）。checkboxradio

7赞 Anjana Silva 8/1/2014 #12

如果属性不起作用，请不要忘记它仍然存在。这个答案是为那些想在这里定位你如何做的人准备的。nameidid

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

因为财产对我不起作用。确保不要用双引号/单引号括起来。nameidname

干杯！

2赞 Pankaj Bhagwat 9/17/2014 #13

有时上述解决方案不起作用，那么您可以尝试以下方法：

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

1赞 Denilson Sá Maia 9/20/2014

Uniform 是一个 jQuery 插件，它使表单更漂亮，但它通过添加额外的元素来实现这一点。每当我更新检查值时，额外的元素状态都不会更新，从而导致未选中的不可见输入，但具有看起来已选中的可见背景元素。是解决方案！jQuery.uniform.update()

7赞 Jordan Jelinek 10/22/2014 #14

试试这个

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

3赞 azim hamdan 10/27/2014 #15

我有一些相关的示例需要增强，如果我想添加一个新条件，比如说，如果我希望在单击项目状态值后隐藏配色方案，除了摊铺机和铺路板。

示例在这里：

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

http://jsfiddle.net/m7hg2p94/4/

7赞 Eray 11/26/2014 #16

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

17赞 user4457035 1/15/2015 #17

试试这个：

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

http://jsfiddle.net/nwo706xw/

0赞 Bob Stein 9/15/2016

重要的是不是.val(['1']).val('1')

6赞 Naim Serin 3/19/2015 #18

获取价值：

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

设定值：

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

单选按钮单击添加属性已选中：

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

7赞 UWU_SANDUN 7/9/2015 #19

我们应该说它是一个按钮。因此，请尝试使用以下代码。radio

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

4赞 espace 10/5/2015 #20

我刚刚遇到了一个类似的问题，一个简单的解决方案就是使用：

.click()

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

1赞 Astolfo Hoscher 10/28/2016

呼叫点击有时在 IE9 中令人头疼

7赞 Anjan Kant 10/27/2015 #21

是的，它对我有用：

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

4赞 MadhaviLatha Bathini 12/18/2015 #22

function rbcitiSelction(e) {
     debugger
    $('#trpersonalemail').hide();
    $('#trcitiemail').show();
}

function rbpersSelction(e) {
    var personalEmail = $(e).val();
    $('#trpersonalemail').show();
    $('#trcitiemail').hide();
}

$(function() {  
    $("#citiEmail").prop("checked", true)
});

5赞 kendar 3/21/2017 #23

我使用以下代码：

对不起英语。

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>

6赞 saroj 6/21/2017 #24

用例子试试这个

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

6赞 Colin R. Turner 8/16/2017 #25

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

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

3赞 keroles Monsef 9/21/2018 #26

attr 接受两个字符串。

正确的方法是：

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

4赞 Majedur 1/17/2019 #27

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

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

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

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

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

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

您可以检查单选按钮：

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

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

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

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

16赞 apatsekin 2/20/2019 #28

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

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

1赞 CertainPerformance 5/21/2019 #29

如果你不想为这么简单的东西包含像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>

3赞 venkatskpi 8/2/2019 #30

我使用了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 work
jQuery("#sbiradio").attr('checked', false);

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

$(".paytm").prop("checked", true);
$(".sbi").prop("checked", false);

jQuery(".paytm").attr('checked', 'checked'); // or true
jQuery(".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

索引.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>

24赞 Code Spy 2/7/2020 #31

使用 prop（） mehtod

源链接

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

-4赞 Kamil Kiełczewski 6/25/2020 #32

最短

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 代码片段在这里

0赞 Kamil Kiełczewski 2/2/2022

有些人不加评论就给减分 - 但这个简短的解决方案实际上有效

9赞 Henrik N 11/27/2020 #33

这个答案要感谢 Paul LeBeau 在评论中。我以为我会把它写成一个正确的答案，因为令人惊讶的是没有一个。

唯一对我有用的（jQuery 1.12.4，Chrome 86）是：

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

这可以做我想要的一切——更改哪个单选按钮看起来被选中（视觉上和编程上）并触发事件，例如在单选按钮上。change

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

上一个：尝试使用 Flask API 和 MySQL 连接器从 MySQL 数据库检索数据时遇到问题

下一个：无法编辑以 MVC 模式放置的数据库

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

How to check a radio button with jQuery?

评论

评论

评论

评论

评论

评论

评论

评论

评论

评论

我使用以下代码：

最短

评论