如何在 jQuery 中使用选中的单选按钮执行功能答案

【问题标题】：How to perform a function with a checked radio button in jQuery如何在 jQuery 中使用选中的单选按钮执行功能
【发布时间】：2012-08-05 02:45:36
【问题描述】：

我想在 jQuery 中使用选中的单选按钮执行一些操作，但我不太确定如何执行此操作。

我有一组单选按钮，我使用以下代码获得选中的单选按钮：

var solid_checked = ($('#solidcolor input[name=asw_options[box_background_color]]:checked').val());

我现在怎么能说向选中的单选按钮添加一个 CSS 类。我只想将 CSS 类添加到选中的单选按钮而不是其他单选按钮。

试图做这样的事情：

$(this).addClass('selected').siblings().removeClass('selected');

编辑

我正在做的是使用 CSS 和 jQuery 将图像用作单选按钮。您单击图像以选择它，最终会在其周围出现橙色边框。然后保存设置。

当页面重新加载时，我希望选中的单选按钮（图像）保持橙色边框，但我无法让它工作。

这是我最初用来突出显示单选按钮（图像）的 jQuery

$('#solidcolor input:radio').addClass('input_hidden');
$('#solidcolor label').click(function() {
    $(this).addClass('selected').siblings().removeClass('selected');
});

我现在如何添加：

$(this).addClass('selected');

对脚本进行分类，以便突出显示选中的单选按钮？

想尝试实现这样的目标：

if($("input[name='asw_options[box_background_color]']").is(':checked')) {
$(this).css("border", "solid 3px orange");
}

或

if($("input[name='asw_options[box_background_color]']").is(':checked')) {
$(this).addClass('selected');
}

但这些都不起作用。

【问题讨论】：

那么什么不起作用？还发布您的 html 代码，演示会更好。
如果您想“保存”设置以便页面在重新加载时记住它，那么您需要这样做：保存它。将设置发布到您的服务器并保存（可能使用 ajax），然后在您的加载页面方法中，加载设置并将其附加到目标元素
我可以保存设置没问题。当页面重新加载时，我可以看到选中的单选按钮（如果我注释掉第一行 jQuery 代码）。我只想为那个选中的单选按钮添加一个 CSS 类。

标签： jquery function radio-button checked

【解决方案1】：

你可以试试change事件：

$('#solidcolor input[name^="asw_options"]').change(function(){
    $(this).addClass('selected').siblings().removeClass('selected');
})

【讨论】：

【解决方案2】：

要将类添加到单选组的选中元素，请使用:checked 仅选择选中元素，然后添加类：

$('input[name=radiogroup]:checked').addClass('classname');

http://api.jquery.com/checked-selector/

【讨论】：

我阅读了 jQuery 网站，但是该网站给出了关于“点击”事件的示例。我想在页面加载时实现jQuery。
@Jason 在页面加载时运行代码（或绑定事件），将其放入 $(document).ready(function() { /* ... */ });。这是你的意思吗？
我在包装器中有 jQuery。我只是把包装器放在外面以缩短代码。