单击时选中的单选框

Posted 2023-03-05

【中文标题】单击时选中的单选框

【英文标题】：radio box checked on click

【发布时间】：2012-02-02 14:54:26

【问题描述】：

我正在尝试使用 jQuery 检查单选框 onClick，我的代码如下：

<ul class="icons clearfix">
    <li>
        <input type="radio" value="123456" name="selecticon"/>
        <label for="select_icon">
            <img src="pics/123456.jpg"    />
        </label>
    </li>
    <li>
        <input type="radio" value="654321" name="selecticon" />
        <label for="select_icon">
            <img src="pics/654321.jpg"    />
        </label>
    </li>
</ul>

和 jQuery 代码...

//onclick select icon
$(document).ready(function()
    $('ul.icons li').click(function() 
    $('ul.icons li.selected').removeClass('selected');
    $(this).addClass('selected').children("input[@type=radio]").attr('checked');
   );
);

但是在点击它的不检查单选按钮时，请提出建议，谢谢。

【参考方案1】：

变化：

.attr('checked')

收件人：

.prop('checked', true)

您也可以使用.attr('checked', 'checked')，但建议将prop() 用于checked 等布尔属性。

您还需要在此处为​​属性值加上引号：

.children('input[@type="radio"]')

演示：http://jsfiddle.net/pUqBB/

另外（不相关），<label> 的 for 属性必须匹配关联输入的 id 而不是 name。

最重要的是：

如果您只是将整个内容包装在 <label> 中，则根本不需要 javascript

演示：http://jsfiddle.net/pUqBB/1/

另见：How can I make an html radiobutton with a big target area?

---

编辑：好的，不确定您是否感兴趣，但我使用<label> 将其重写为可访问版本，并且js 仅用于添加/删除selected 类（因为我们确实需要 javascript 来处理这一点）。我在我的所有网站上都在生产中使用此代码，请随意使用它（或指出改进）：

http://jsfiddle.net/pUqBB/2/

// Add class="selected" to the parent element of checked inputs

// on page load
$("input:checked").parent().addClass('selected');

$(":radio").live('change', function () 
   if ($(this).prop('checked')) 
        $(':radio[name="' + $(this).attr('name') + '"]').parent().removeClass('selected');
        $(this).parent().addClass('selected');
    
);

$(":checkbox").live('change', function () 
    if ($(this).prop('checked')) 
        $(this).parent().addClass('selected');
     else 
        $(this).parent().removeClass('selected');
    
);

【讨论】：

firebug 说 '$(this).addClass("selected").children("input[@type=radio]").prop 不是函数'

我看到了很多其他的错误并编辑了我的帖子，请看一下。您可能根本不需要 javascript。你运行的是什么版本的 jQuery？

属性选择器中不需要@。

@Rocket：你说得对，但我认为它不会影响任何事情（老实说，我什至不知道它的用途）。实际上，您首先不需要 jQuery 或 javascript，所以这是一个有争议的问题。

@Rocket：哦，是的，你是对的，那部分你确实需要 js。将change 事件绑定到输入并从父标签中添加/删除类可能更好，但我现在对这个话题很感兴趣。

【参考方案2】：

问题出在这一行：

$(this).addClass('selected').children("input[@type=radio]").attr('checked');

首先，您应该引用属性选择器，并且不再需要 @。

.children("input[type='radio']")

第二个.attr('checked') 是一个getter，它返回属性的值。如果你想设置它，你需要将值作为第二个参数传递。

.attr('checked', 'checked')

您还可以使用.prop，它允许您使用布尔值而不是'checked'。

.prop('checked', true)

所以，应该是这样的：

$(this).addClass('selected').children("input[type='radio']").prop('checked', true);

注意：<label> 标签用于通过 ID 选择输入字段。因此，您可以使用它们来切换收音机。此外，如果无线电具有相同的名称，则一次只能检查一个。因此，为您的收音机添加唯一 ID，并为其设置标签 for 属性。像这样：

<input type="radio" value="123456" name="selecticon" id="selecticon_01"/>
<label for="selecticon_01">
    <img src="pics/123456.jpg"    />
</label>

那么，你只需要$(this).addClass('selected')。

演示：http://jsfiddle.net/wQS46/

【讨论】：

firebug 说 '$(this).addClass("selected").children("input[@type=radio]").prop 不是函数'

@seoppc：就像我说的，删除@，并引用你的属性选择器。 $(this).addClass("selected").children("input[type='radio']").prop

【参考方案3】：

$(this).addClass('selected').children("input[@type=radio]").attr('checked', 'checked');

添加了工作fiddle。

【参考方案4】：

.children 不工作。 .find 应该可以工作。

<ul class="category-checklist form-no-clear">
    <li>
        <label>
            <input type="radio" name="post_category" value="1" class="post-category">
            <span class="tag-name">Uncategorised</span>
        </label>
    </li>
    <li>
        <label>
            <input type="radio" name="post_category" value="2" class="post-category">
            <span class="tag-name">Basic Statistics</span>
       </label>
    </li>
    <li>
        <label>
            <input type="radio" name="post_category" value="3" class="post-category">
            <span class="tag-name">Advanced Statistics</span>
        </label>
    </li>
</ul>`

$('.category-checklist li').click(function() 
    $('.category-checklist li').removeClass('selected');
    $(this).addClass('selected').find("input[type='radio']").prop('checked', true);
 );