如何使用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);

不起作用：你还有其他主意吗？我想念什么？

已邀请:

30 个回复

乐遣杀屎

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

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

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

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

提示：您可能还需要随后在单选按钮上调用click()或change()。查看评论以获取更多信息。

敦肌

尝试这个。在此示例中，我以其输入名称和值作为目标

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

提提您：在使用多字值的情况下，它也会因撇号而起作用。

期差骇蓟

jQuery 1.6中添加的另一个功能prop（）达到了相同的目的。

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

傻寺俊擒

简短易读的选项：

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

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

柑恫祟

尝试这个。要使用“值”检查单选按钮，请使用此选项。

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

谷靛

尝试这个：

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

http://jsfiddle.net/nwo706xw/

babsoft

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

席酱

你必须做

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

这就是HTML属性

傻寺俊擒

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

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

搜洼挂时

如果属性name不起作用，请不要忘记id仍然存在。此答案适用于想要在此处针对ѭ23的人。

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

因为财产name对我不起作用。确保不要用双引号或单引号将id和name包围。干杯!

撵穆

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

味芯憨

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

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

壬驴拿歪竞

万一有人在尝试使用jQuery UI来实现此目的，您还需要刷新UI复选框对象以反映更新后的值：

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

秃拳割

获得价值：

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

搜洼挂时

我使用以下代码：对不起，英语。

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>

很缴

尝试这个

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

娠侈脚惮顽

尝试这个

var isChecked = $(\"#radio_1\")[0].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)
});

镶骄册筷

出乎意料的是，尽管有评论，但最流行和最受欢迎的答案忽略了触发适当事件。确保调用“ 42”，否则所有“更改时”绑定都将忽略此事件。

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

嗜蒂谷尘旱

我有一些相关示例需要增强，如果我想添加新条件，例如，如果我想在单击项目状态值（摊铺机和铺路板除外）后隐藏颜色方案，该怎么办。示例在这里：

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

容淑阔九

我用的是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

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>

田眯衅

尝试这个

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

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

jQuery v1.10.1

惭法搽

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

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(){
  $(\"#Id\").prop(\"checked\", true).checkboxradio(\'refresh\');
});

筷啸够对铅

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

.click()

如果在调用函数后刷新收音机，则任何其他解决方案都可以使用。

峨躬坎抬焚

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

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

玩翁文醚碱

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

犯痪桂涛杭

attr接受两个字符串。正确的方法是：

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

田损比报

如果您不想为这种简单的事情包括像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检查单选按钮？

30 个回复

发起人

jquery

radio_button

forms

javascript

问题状态

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

与内容相关的链接

30 个回复

发起人

jquery

radio_button

forms

javascript

问题状态