SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2008
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Select All Radio Buttons

    I have a form that looks like this:

    HTML Code:
    Active <input type="radio" name="configID[1]" value="0" checked> Inactive <input type="radio" name="configID[1]" value="1"> Approval Pending <input type="radio" name="configID[1]" value="2">
    
    Active <input type="radio" name="configID[2]" value="0" checked> Inactive <input type="radio" name="configID[2]" value="1"> Approval Pending <input type="radio" name="configID[2]" value="2">
    
    
    Active <input type="radio" name="configID[3]" value="0" checked> Inactive <input type="radio" name="configID[3]" value="1"> Approval Pending <input type="radio" name="configID[3]" value="2">
    How can I have it so that if a person clicks a activate all or deactive all it changes from the selected radio to the appropriate radio? Ive tried some examples from google but cant get any to work. Thanks.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Here is the html form that I will be using for the test. The radio buttons have been reorganised because it is a very bad user interface experience to have the radio button text come before the radios themself.

    Code html4strict:
    <form id="myForm">
    	<p>
    		<input type="radio" name="configID[1]" value="0" checked> Active
    		<input type="radio" name="configID[1]" value="1"> Inactive
    		<input type="radio" name="configID[1]" value="2"> Approval Pending
    	</p>
    	<p>
    		<input type="radio" name="configID[2]" value="0" checked> Active
    		<input type="radio" name="configID[2]" value="1"> Inactive
    		<input type="radio" name="configID[2]" value="2"> Approval Pending
    	</p>
    	<p>
    		<input type="radio" name="configID[3]" value="0" checked> Active
    		<input type="radio" name="configID[3]" value="1"> Inactive
    		<input type="radio" name="configID[3]" value="2"> Approval Pending
    	</p>
    </form>

    Adding the links via javascript has two benefits, one being that it's easier to attach events on to them and secondly, the links won't be sitting there uselessly doing nothing when there is no javascript support available. They just won't be there at all.

    Code javascript:
    var form = document.getElementById('myForm');
    var links = document.createElement('p');
    links.appendChild(createEventLink('Activate All', activateRadios));
    links.appendChild(createEventLink('Deactivate All', deactivateRadios));
    form.insertBefore(links, form.firstChild);
     
    function createEventLink(text, fn) {
        var el = document.createDocumentFragment();
        var link = createLink('#', text);
        link.onclick = fn;
        el.appendChild(link);
        el.appendChild(document.createTextNode(' '));
        return el;
    }
    function createLink(href, text) {
        var a = document.createElement('a');
        a.href = href;
        a.appendChild(document.createTextNode(text));
        return a;
    }

    By inserting the paragraph (containing the links) inside the form, we should be able to easily set things up so that only the radio buttons inside that form are affected.

    Please be aware that the above script requires that access to the page is available. This normally means putting the script at the bottom of the body which is one of the best practices for speeding up your web site.

    If instead you want to run the script from the head of the page, you'll need to use some kind of onload technique, such as:

    Code javascript:
    window.onload = function () {
        ...
    }

    Now we just need to work on activating and deactivating the radio buttons.

    Activating or deactivating all radios is comparatively easy. You just need to walk through them all, and if they have the appropriate value you then set the checked property on it.

    Code javascript:
    function activateRadios() {
    	var form = upTo('form', this);
    	checkAllRadiosByValue(form, '0');
    	return false;
    }
    function deactivateRadios() {
    	var form = upTo('form', this);
    	checkAllRadiosByValue(form, '1');
    	return false;
    }
    function upTo(tag, el) {
    	el = el.parentNode;
    	tag = tag.toUpperCase();
    	while (el.nodeName !== tag && el.nodeName !== 'body') {
    		el = el.parentNode;
    	}
    	return el;
    }
    function checkAllRadiosByValue(form, value) {
    	var inputs = form.getElementsByTagName('input');
    	var input, i;
    	for (i = 0; i < inputs.length; i += 1) {
    		input = inputs[i];
    		if (input.type === 'radio' && input.value === value) {
    			input.checked = 'checked';
    		}
    	}
    }

    Here is the test code that I was using while developing this.

    Code html4strict:
    <html>
    <head>
    </head>
    <body>
    <form id="myForm">
    	<p>
    		<input type="radio" name="configID[1]" value="0" checked> Active
    		<input type="radio" name="configID[1]" value="1"> Inactive
    		<input type="radio" name="configID[1]" value="2"> Approval Pending
    	</p>
    	<p>
    		<input type="radio" name="configID[2]" value="0" checked> Active
    		<input type="radio" name="configID[2]" value="1"> Inactive
    		<input type="radio" name="configID[2]" value="2"> Approval Pending
    	</p>
    	<p>
    		<input type="radio" name="configID[3]" value="0" checked> Active
    		<input type="radio" name="configID[3]" value="1"> Inactive
    		<input type="radio" name="configID[3]" value="2"> Approval Pending
    	</p>
    </form>
    <script>
    var form = document.getElementById('myForm');
    var links = document.createElement('p');
    links.appendChild(createEventLink('Activate All', activateRadios));
    links.appendChild(createEventLink('Deactivate All', deactivateRadios));
    form.insertBefore(links, form.firstChild);
     
    function createEventLink(text, fn) {
        var el = document.createDocumentFragment();
        var link = createLink('#', text);
        link.onclick = fn;
        el.appendChild(link);
        el.appendChild(document.createTextNode(' '));
        return el;
    }
    function createLink(href, text) {
        var a = document.createElement('a');
        a.href = href;
        a.appendChild(document.createTextNode(text));
        return a;
    }
    function activateRadios() {
    	var ACTIVATE = '0';
    	var form = upTo('form', this);
    	checkAllRadiosByValue(form, '0');
    	return false;
    }
    function deactivateRadios() {
    	var DEACTIVATE = '1';
    	var form = upTo('form', this);
    	checkAllRadiosByValue(form, '1');
    	return false;
    }
    function upTo(tag, el) {
    	el = el.parentNode;
    	tag = tag.toUpperCase();
    	while (el.nodeName !== tag && el.nodeName !== 'body') {
    		el = el.parentNode;
    	}
    	return el;
    }
    function checkAllRadiosByValue(form, value) {
    	var inputs = form.getElementsByTagName('input');
    	var input, i;
    	for (i = 0; i < inputs.length; i += 1) {
    		input = inputs[i];
    		if (input.type === 'radio' && input.value === value) {
    			input.checked = 'checked';
    		}
    	}
    }
    </script>
    </body>
    </html>
    Last edited by paul_wilkins; Oct 24, 2008 at 17:28.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2008
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, thanks for typing the code. I lost this thread :S. The code works perfectly but is there a way I can have links that I create for the activate and deactive? I would like to place them in a specified spot. Thanks again!

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The createEventLink function is how the links are created, so just add the links to whereever you desire.

    Code javascript:
    document.getElementById('aSpecifiedSpot').appendChild(
        createEventLink('Activate All', activateRadios)
    );

    What the createEventLink function does is the equivalent of the following:

    Code html4strict:
    <div id="aSpecifiedSpot">
        <a href="#" onclick="activateRadios.call(this)">Activate All</a>
    </div>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2008
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much! Works like a charm. I must say I love how skillful and patient the members on these forums are. Thanks again!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •