jQuery的觸發方法在准備好文檔后無法正常工作

Question

我有一些功能可以根據radio輸入的選擇來更改HTML元素，並且可以正常工作。 但是，對於元素的初始設置，與其再次復制條件和代碼，不如直接調用radio的trigger('change')方法來完成所有工作，它將變得更短，更清晰。 這似乎無法正常工作（在Firefox或Chrome中）。 據我所知，它總是將文檔中的最后一個radio視為已選中的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');

工作演示

更新-Rory McCrossan的優化答案

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

在這里看到小提琴

您還可以優化您的實際處理程序，僅將background-color設置為當前的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>