Javascript jQuery'；s触发方法不'；在文件准备就绪时不能正常工作

我有一些功能，可以根据

radio

输入的选择更改HTML元素，这很好。但是，对于元素的初始设置，不需要再次复制条件和代码，只需调用

radio

的

触发器（'change'）

方法，即可完成所有工作。这似乎不能正常工作（在Firefox或Chrome中）。正如我所想，它总是将文档中最后一个

单选电台

视为选中的电台

样本如下：

按钮的初始颜色应为红色，但显示为蓝色。为什么会这样，解决办法是什么

HTML:

---

触发更改事件后，您的选择器不正确，无法将选中的单选按钮值作为目标。您需要使用：

$('input[name=radio]').change(function () {
    if ( $('input[name=radio]:checked').val() == 'red') {
        $('button').css('background', 'red');
    } else {
        $('button').css('background', 'blue');
    }
}).trigger('change');

更新-Rory McCrossan的优化答案

$(document).ready(function () {
  $('input[name=radio]').change(function () {
      $('button').css('background',  $('input[name=radio]:checked').val());
  }).trigger('change');
});

---

您正在触发所有单选按钮上的事件，而不仅仅是所选按钮。尝试：

$（文档）.ready（函数（）{
$（'input[name=radio]'）。更改（函数（）{
if（$（this）.val（）=='red'）{
$（'button'）.css（'background'，'red'）；
}否则{
$（'button'）.css（'background'，'blue'）；
}
}).filter（“：checked”）.trigger（'change'）；
});

红色的

蓝色的

按钮
您可以这样使用它：

$(document).ready(function () {
    $('input[name=radio]').change(function () {
        $('button').css('background', $('input[name=radio]:checked').val());
    }).trigger('change');
});


当您触发应用于
无线电
输入的事件时，您可以在我输入答案时直接应用这些无线电的值。这会使代码变得更小，并且可以节省一些字节。
您正在为所有单选按钮调用触发器。您只需将它们添加到一个：


您还可以优化实际处理程序，将背景色设置为当前val（）

试试这个


$（文档）.ready（函数（）{
$（'input[name=radio]'）。绑定（“change”，function（）{
if（$（this）.val（）=='red'）{
$（'button'）.css（'background'，'red'）；
}否则{
$（'button'）.css（'background'，'blue'）；
}
});
$（'input[name=radio]：first'）。单击（）；
});

红色的

蓝色的

按钮
您正在触发所有单选按钮上的事件，而不仅仅是所选按钮。加上一个按钮，尽管您也可以缩短此逻辑以删除
if
语句：Right。。。谢谢（我必须等10分钟才能接受你的回答）。@ImNotMike：是的。但他的方法最适合您所提供的情况。不确定这是否“优化”，因为您正在搜索整个文档以查找选中的单选按钮，而您已经在
中找到了它，并且在doc ready上，对屏幕上的每个单选按钮进行测试。我说的是设置背景值。太好了！这值得-1而不作任何评论。
$(document).ready(function () {
  $('input[name=radio]').change(function () {
      $('button').css('background',  $('input[name=radio]:checked').val());
  }).trigger('change');
});

$(document).ready(function () {
    $('input[name=radio]').change(function () {
        $('button').css('background', $('input[name=radio]:checked').val());
    }).trigger('change');
});

$(document).ready(function () {
    $('input[name=radio]').change(function () {
        if ($(this).val() == 'red') {
            $('button').css('background', 'red');
        } else {
            $('button').css('background', 'blue');
        }
    }).filter(':checked').trigger('change');
});

$(document).ready(function () {
    $('input[name=radio]').change(function () {
        $('button').css('background', $(this).val());
    }).filter(':checked').trigger('change');
});