logo标签列表

.attr('checked','checked')无效

jquery
41
我会尽力帮助您翻译以下内容：

我正在尝试检查单选框。以下两种方法都不起作用：

[编辑]

$('selector').attr('checked','checked');
$('selector').attr('checked',true);

以下代码中的两个alert()分别显示"1"和"a"。我期望第二个alert()显示"b"。
Opera浏览器确实会选中第二个单选框，但其元素检查工具Dragonfly显示DOM没有改变。
[编辑结束]
在发布此问题之前，我已阅读了常见问题解答。

http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_check.2Funcheck_a_checkbox_input_or_radio_button.3F

非常感谢您的帮助！

提前致谢。

以下是xhtml页面和代码：

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Weird Behavior</title>
<script type="text/javascript" src="scripts/jquery.js"/>
<script type="text/javascript">
function clickme(){
    alert($('input[name="myname"][value="b"]').length);
    $('input[name="myname"][value="b"]').attr('checked','checked');
    $('#b').attr('checked',true);
    alert($('input[name="myname"][checked]').val());
};
</script>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>Why check is not switched?</legend>
            <input type="radio" name="myname" value="a" id="a" checked="checked"/>A
            <input type="radio" name="myname" value="b" id="b"/>B
        </fieldset>
    </form>
    <p>
    <button type="button" onclick="clickme()">click me</button>
    </p>
</body>
</html>
你如何检查生成的DOM源代码？ - Sander
2
$('some element selector').attr('checked','checked'); - S L
@experimentX：这不就是示例源代码中的内容吗？ - BoltClock
7个回答
162
 $('.checkbox').attr('checked',true);

这段代码在 jQuery 1.6 及以上版本中将不再生效。

相反，应使用 

$('.checkbox').prop('checked',true);
$('.checkbox').prop('checked',false);

完整的解释、示例和演示可以在jQuery API文档中找到。 https://api.jquery.com/attr/
16
非常感谢这个提示！我的头发正在脱落。 - ellmo
18

使用jQuery时，永远不要使用内联的onclick JavaScript。保持低调。相反地，请使用以下方法，并完全删除onclick。

此外，请注意在最后一行中使用了:checked 伪选择器。原因是当页面加载后，HTML和表单元素的实际状态可能会不同。打开Web检查工具，您可以单击其他单选按钮，而HTML仍将显示第一个被选中。：checked选择器过滤实际选中的元素，而不管HTML最初是什么样子。

$('button').click(function() {
    alert($('input[name="myname"][value="b"]').length);
    $('input[name="myname"][value="b"]').attr('checked','checked');
    $('#b').attr('checked',true);
    alert($('input[name="myname"]:checked').val());
});

http://jsfiddle.net/uL545/1/

是的，使用jQuery添加事件监听器更好，但您的解释是错误的。函数已被找到，您的演示仍然回显“a”（应该回显“b”）。 - Felix Kling
@Squeegy：伪选择器:checked确实起到了作用。非常感谢！虽然我已经让代码运行起来了，但我仍然不理解单选框的行为。它似乎与其他属性的checked行为不同。如下面的示例所示，第二个alert()正确地显示了b，但第一个alert()弹出了a，这超出了我的预期。您能否为我更详细地解释一下？$('#b').attr('checked',true); $('#b').addClass('test'); alert($('input[name="myname"][checked]').val()); alert($('[class="test"]').val()); - Masao Liu
@Masao Liu：实际上，我在我的回答中已经尝试解释了。你理解了吗？有什么不清楚的地方吗？ - Felix Kling
表单元素是特殊的情况。当它们的值改变时，DOM 不会更新。使用属性选择器 [someattr] 检查实际的 DOM 而不是当前值。看看这个例子：http://jsfiddle.net/Squeegy/h8T97/ 如果你改变文本框的值并点击按钮，你会注意到 HTML 没有改变，但是值与属性所说的不同。所以在处理所有表单字段时，你需要意识到它们的当前状态可能与 DOM 所说的不同。你需要询问元素的值而不是解析属性。 - Alex Wayne
@Felix Kling，@Squeegy：我已经反复阅读了Felix Kling的解释，但由于添加$('#a').removeAttr('checked');并没有解决我的原始问题，所以我无法理解你们的观点。感谢Squeegy最新的解释，现在我猜测我知道表单元素的微妙行为了——改变它们的值不会改变DOM内容。再次感谢！ - Masao Liu
@fizer-khan应该被接受为答案吗？$('.checkbox').prop('checked',true); - Simon Hutchison
13
$('.checkbox').prop('checked',true); 
$('.checkbox').prop('checked',false);

...与jquery1.9.1完美配合

11

为什么不尝试使用IS呢？

$('selector').is(':checked') /* result true or false */

看一下常见问题解答：jQuery .is()，希望对你有所帮助 ;-)

2
$("input:radio").attr("checked",true); //for all radio inputs

或者
$("your id or class here").attr("checked",true); //for unique radios

同样的方法适用于 ("checked","checked")。
1

我认为你不能称之为

$.attr('checked',true);

因为首先没有元素选择器。$ 必须跟随 $('selector_name')。祝好运！

1

它可以工作，但是

$('input[name="myname"][checked]').val()

将返回具有属性checked的第一个元素的值。并且a单选按钮仍然具有此属性（并且在b按钮之前）。选择b不会从a中删除checked属性。

您可以使用jQuery的:checked：

$('input[name="myname"]:checked').val()

演示

进一步说明：

  • 使用$('b').attr('checked',true);就足够了。
  • 正如其他人所提到的，不要使用内联事件处理程序，而是使用jQuery添加事件处理程序。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接