我尝试使用 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);
不起作用:
你有别的想法吗?我错过了什么?
对于等于或高于 (>=) 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);
很高兴知道:在多字值的情况下,它也会因为撇号而起作用。
简短易读的选项:
$("#radio_1").is(":checked")
它返回真或假,因此您可以在“if”语句中使用它。
在 jQuery 1.6 中添加的另一个函数 prop() 用于相同的目的。
$("#radio_1").prop("checked", true);
attr('checked', true)
停止使用 jQuery 1.9 为我工作,这就是解决方案!
尝试这个。
要使用值检查单选按钮,请使用此选项。
$('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');
使用 prop() 方法
https://i.stack.imgur.com/Ofzab.gif
来源Link
<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>
$.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();
});
});
令人惊讶的是,尽管有评论,但最受欢迎和接受的答案却忽略了触发适当的事件。 确保调用 .change()
,否则所有“on change”绑定都会忽略此事件。
$("#radio_1").prop("checked", true).change();
你所要做的
jQuery("#radio_1").attr('checked', 'checked');
那是 HTML 属性
尝试这个
$(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
}
});
});
如果属性 name
不起作用,请不要忘记 id
仍然存在。此答案适用于希望在此处定位 id
的人。
$('input[id=element_id][value=element_value]').prop("checked",true);
因为属性 name
对我不起作用。确保不要用双引号/单引号将 id
和 name
括起来。
干杯!
我们应该告诉它是一个 radio
按钮。所以请尝试使用以下代码。
$("input[type='radio'][name='userRadionButtonName']").prop('checked', true);
是的,它对我有用:
$("#radio_1").attr('checked', 'checked');
用例子试试这个
<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>
$("input[name=inputname]:radio").click(function() {
if($(this).attr("value")=="yes") {
$(".inputclassname").show();
}
if($(this).attr("value")=="no") {
$(".inputclassname").hide();
}
});
获取价值:
$("[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});
});
以防万一有人在使用 jQuery UI 时尝试实现这一点,您还需要刷新 UI 复选框对象以反映更新后的值:
$("#option2").prop("checked", true); // Check id option2
$("input[name='radio_options']").button("refresh"); // Refresh button set
我使用这段代码:
对不起英语。
var $j = jQuery.noConflict(); $j(function() { // 添加处理程序 $j('#radio-1, #radio-2').click(function(){ // 查找所有选中并取消选中 $j('input:radio:checked ').prop('checked', false); // 这个收音机添加检查 $j(this).prop('checked', true); }); });
这个答案要感谢 a comment 中的 Paul LeBeau。我想我会把它写成一个正确的答案,因为令人惊讶的是没有一个。
唯一对我有用的东西(jQuery 1.12.4,Chrome 86)是:
$(".js-my-radio-button").trigger("click");
这完成了我想要的一切——更改哪个单选按钮看起来被选中(视觉和编程)并触发单选按钮上的 change
等事件。
仅按照其他答案的建议设置“已检查”属性不会更改为我选择的单选按钮。
尝试这个
var isChecked = $("#radio_1")[0].checked;
我刚刚遇到了类似的问题,一个简单的解决方案就是使用:
.click()
如果您在调用函数后刷新收音机,任何其他解决方案都将起作用。
function rbcitiSelction(e) {
debugger
$('#trpersonalemail').hide();
$('#trcitiemail').show();
}
function rbpersSelction(e) {
var personalEmail = $(e).val();
$('#trpersonalemail').show();
$('#trcitiemail').hide();
}
$(function() {
$("#citiEmail").prop("checked", true)
});
$("#radio_1").attr('checked', true);
//or
$("#radio_1").attr('checked', 'checked');
$("#radio_1").attr('checked', true);
这行不通。正如OP所述
我有一些相关的例子需要增强,如果我想添加一个新的条件,比如说,如果我想在我点击项目状态值后隐藏配色方案,除了摊铺机和铺路板。
示例在这里:
$(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/
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');
我使用了 jquery-1.11.3.js
基本启用和禁用
Tips 1:(单选按钮类型常用Disable & Enable)
$("input[type=radio]").attr('disabled', false);
$("input[type=radio]").attr('disabled', true);
Tips 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);
Tips 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>
尝试这个
$("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);
jQuery.uniform.update()
是解决方案!
.change()
添加到末尾以触发页面上的任何其他事件很有帮助。$("#radio_1").prop("checked", true).trigger("click");