2

I'm new to jQuery and trying to figure this out.

I have a web page filled with several sets of radio buttons based on several computer components. I have some images at the top of my page that trigger certain radio buttons to be pushed. The JavaScript I have for this is:

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

This works correctly. I also have to change a portion of the page based on which radio button is selected. It looks like this:

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

});

This also works correctly. However, when I use the first piece of code (a user click on img#gaming) to select the automatically select the individual radio buttons, the second piece of code does not trigger (aka a change is not registered).

Is there a different form of .change that will register the new selected radio buttons, or a different way of selecting the radio button that would register the change?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
SupremeGunman
  • 35
  • 1
  • 6
  • For client-side question, there is a useful online tool called http://jsfiddle.net that allow you publish working demonstration about your question. – SaidbakR Dec 09 '12 at 22:35
  • Why not couple your functionality into reusable functions and then simply call them using something like this? https://github.com/rhyneandrew/Conversation.JS It makes it alot easier to maintain and debug when you don't use explicit calls – Andrew Rhyne Dec 09 '12 at 23:22

1 Answers1

3

You can trigger the change event using .trigger():

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

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

Also, don't use input:radio. input:radio isn't a CSS selector and won't be supported by document.querySelector, so it will run slower than input[type="radio"].

I suggest you re-think your layout. You should't have to repeat the same block of code every time with just minor changes.

Blender
  • 289,723
  • 53
  • 439
  • 496
  • You're right, and in any other language I'm used to I wouldn't. I'm still working on a lot of javascript basics like this. Oh, and thanks for the response, and an awesome program. I love blender. – SupremeGunman Dec 09 '12 at 22:45
  • This does get the price to change, but it always gets price off the last radio button in each group, and not the one that is selected. Any thoughts? – SupremeGunman Dec 10 '12 at 21:40
  • @SupremeGunman: That's most likely a problem with your code. You shouldn't have to repeat the same chunks of code that often. – Blender Dec 10 '12 at 22:02