Showing posts with label copy checked values to other group. Show all posts
Showing posts with label copy checked values to other group. Show all posts

Friday, 26 August 2011

Copying radio button values to a group of radio buttons

My javascript is a little rusty and I've just spent a few hours trying to solve this problem: How do you copy the checked value of a radio button to a set/group of radio buttons?

I have this radio button group as the master group, the one that when I change what's checked I want it to modify the rest of the other set of radio buttons when a button was clicked:

<input type="radio" name="master" value="1"> Yes
<input type="radio" name="master" value="0"> No
<input type="radio" name="master" value=""> --
<input type="button" name="radiocopy" onclick="copydown()" value="Change All" ></button>

And the other groups are found in some rows of data and one of the columns requires a choice to be made: Yes, No, or missing.

<input type="radio" name="slaveRow1" value="1"> Yes
<input type="radio" name="slaveRow1" value="0"> No
<input type="radio" name="slaveRow1" value=""> --

<input type="radio" name="slaveRow2" value="1"> Yes
<input type="radio" name="slaveRow2" value="0"> No
<input type="radio" name="slaveRow2" value=""> --

<input type="radio" name="slaveRow3" value="1"> Yes
<input type="radio" name="slaveRow3" value="0"> No
<input type="radio" name="slaveRow3" value=""> --

Now what I wanted was that when I set the master to Yes, the rest of the radio buttons would change to Yes as well when I click the Change All button. Here's what I wrote:

function copydown(){
    var fm = document.forms["thenameofyourform"];

    //find out which master radio button is checked and assign value to masterValue
    var masterValue = null;
    for(i = 0; i < fm.elements['master'].length; i++){
        if(fm.elements['master'][i].checked == true)
            masterValue = fm.elements['master'][i].value;
    }

    //loop through all the form elements in the page
    for(i = 0; i < fm.elements.length; i++){
        //select only the radio buttons
        if( fm.elements[i].type == "radio" && fm.elements[i].name.indexOf("slaveRow") != -1){
            //check the value of each slave radio button and if it matches the
            //checked value of the master then check it
            if(fm.elements[i].value == masterValue)
                fm.elements[i].checked = true;
        }
    }
}

That seemed to do the trick. I must admit my Javascript is rusty. If you don't want to implement this with a button you can add a listener to the master radio buttons group.