Matt
Matt

Reputation: 1757

Radio buttons uncheck/check

I have a form which is made up of radio buttons. The link is here http://jsfiddle.net/CUTnY/2/

You can see in the result box there are grey headings and some radio buttons under each header. I am trying, which i am very close, to only let a user select one radio button from each row (which works) but as you can see the bottom row of radio buttons under some headings (some there are 3) are to bulk buy you can see these by looking for any of the rows which in the description have the words "save".

At the moment each set of radio buttons under each heading works correctly example the top 3 rows of radio buttons you can select one from each of the top two rows and if you choose one from the "save" row the top two will deselect. But if you then go to the next set of radio buttons and play around with these (if the user has selected "save" form the top options) that option will dissaper?

Basically each set of radio buttons under each grey heading has to in no way affect the other sets which for some reason they are doing.

Upvotes: 0

Views: 348

Answers (1)

Vigrond
Vigrond

Reputation: 8198

It is because anytime you make a selection, .style5 has about 10 handlers that are being called at the same time for input change.

//You have 10 of these declared, that all fire at the same time anytime you click on an input that is a descended of a td with class style5

$('.style5').on('change', 'input', function() {
    if (this.name == "keystage1save") {
        $yearstages.filter('input:checked').prop('checked', false);
    } else {
        $savestages.filter('input:checked').prop('checked', false);
    }
});

You need to sectionalize them by using different classes.

Upvotes: 1

Related Questions