javascript - jQuery 不会在单选按钮更改时触发

Question

我是 jQuery 的新手，正在尝试解决这个问题。

我有一个网页，其中包含基于多个计算机组件的多组单选按钮。我的页面顶部有一些图像可以触发某些单选按钮被按下。我为此使用的 JavaScript 是:

$( document ).ready( function() {
$('img#gaming').click(function () {
    $('.small_image').attr("src","../img/GamingPlain.png");
    $('input:radio[name=chasis]')[2].checked = true;
    $('input:radio[name=cpu]')[1].checked = true;
    $('input:radio[name=mobo]')[1].checked = true;
    $('input:radio[name=ram]')[1].checked = true;
    $('input:radio[name=gpu]')[1].checked = true;
    $('input:radio[name=psu]')[1].checked = true;
    $('input:radio[name=hdd]')[2].checked = true;
});
.
.
.
});

这工作正常。我还必须根据选择的单选按钮更改页面的一部分。它看起来像这样:

$( document ).ready( function() {
$('input[name=chasis]').change(function()  {
    var txt = $(this).parent().text();
    var price = txt.match(/(\$)([\d]+)/)
    $('span#chasisprice').text(price[0]);
});

$('input[name=cpu]').change(function()  {
    var txt = $(this).parent().text();
    var price = txt.match(/(\$)([0-9]+)/)
    $('span#cpuprice').text(price[0]);
});
.
.
.

});

这也能正常工作。但是，当我使用第一段代码(用户单击 img#gaming)来选择自动选择单个单选按钮时，第二段代码不会触发(又名更改不是已注册)。

是否有不同形式的 .change 可以注册新选择的单选按钮，或者有不同的选择单选按钮的方式来注册更改？

Answer 1

您可以使用 .trigger() 触发更改事件:

...
$('input:radio[name=psu]')[1].checked = true;
$('input:radio[name=hdd]')[2].checked = true;

$('input:radio').trigger('change');

另外，不要使用input:radio。 input:radio 不是 CSS 选择器，document.querySelector 不支持它，因此它的运行速度会比 input[type="radio"]。

我建议您重新考虑您的布局。您不必每次都重复相同的代码块，只需进行微小的更改。