jQuery不会触发单选按钮更改

时间:2012-12-09 22:30:25

标签: javascript jquery javascript-events

很抱歉打扰,但我是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会注册新选择的单选按钮?或者选择注册变更的单选按钮的不同方式?

1 个答案:

答案 0 :(得分:3)

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

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

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

另外,请勿使用input:radioinput:radio不是CSS选择器,document.querySelector不支持,因此它的运行速度会慢于input[type="radio"]

我建议你重新考虑你的布局。您不必每次只需稍作更改就重复相同的代码块。