jQuery的触发器方法在文档就绪上无法正常工作

Question

我有一些功能可以根据radio输入的选择更改HTML元素，并且工作正常。然而，对于元素的初始设置，与其再次复制条件和代码，不如调用radio的trigger('change')方法，然后完成所有工作。这似乎无法正常工作（在Firefox或Chrome中）。正如我认为的那样，它总是将文档中的最后一radio视为选中的。

示例如下： http://jsfiddle.net/jydf5gby/

按钮的初始颜色应该是红色，但它显示为蓝色。为什么会这样，解决方案是什么？

.HTML：

<p><input type="radio" name="radio" value="red" checked="checked"/> red</p>
<p><input type="radio" name="radio" value="blue"/> blue</p>
<button>button</button>

Javascript：

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

Answer 1

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

$(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');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><input type="radio" name="radio" value="red" checked="checked"/> red</p>
<p><input type="radio" name="radio" value="blue"/> blue</p>
<button>button</button>

Answer 2

你可以这样使用它：

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

小提琴

---

当您触发应用于radio输入的事件时，您可以像我在答案中输入的那样直接应用这些无线电的值。这会使您的代码更小一些，并且可以节省一些字节。

Answer 3

触发更改事件后，您有不正确的选择器来定位选中的单选按钮值。 您需要使用：

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

工作演示

更新 - 罗里·麦克克罗斯的优化答案

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

优化代码演示

Answer 4

您正在为所有单选按钮调用触发器。您只需要将它们filter()到:checked：

$(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');
});

在这里看到小提琴

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

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

在这里摆弄

Answer 5

试试这个

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><input type="radio" name="radio" value="red" /> red</p>
<p><input type="radio" name="radio" value="blue"/> blue</p>
<button>button</button>