Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Enabling/Disabling Multiple Checkboxes...

    Need a way to check if any or all checkboxes are checked or not. If any of the checkboxes are checked, I need to keep the None checkbox unchecked. If none of the checkboxes are checked, I need to check the None checkbox. Having a problem creating a method to cycle through the checkboxes to check if any, all, or none of the checkboxes are checked or not. Any help would be much appreciated. Thank you in advance.

    The None checkbox should be set as default. When multiple checkboxes are checked and you try to remove one, the None checkbox becomes checked. This is wrong because the None chekbox is checked along with an Item checkbox. The None checkbox should only be checked if none of the checkboxes are selected.

    Code:
    <html>
    
    <head>
    
    <title>Checkbox Test</title>
    
    <script type="text/javascript">
    
    function display_item1( checkbox ) {
    
        var item1Div = document.getElementById("id_item1");
        if ( checkbox.checked == true ) {
            unsetNoneCheckbox();
            item1Div.style.display = "block";
        } else {
            item1Div.style.display = "none";
            setNoneCheckbox();
        }
    
    }
    
    function display_item2( checkbox ) {
        var item2Div = document.getElementById("id_item2");
        if ( checkbox.checked == true ) {
            unsetNoneCheckbox();
            item2Div.style.display = "block";
        } else {
            item2Div.style.display = "none";
            setNoneCheckbox();
        }
    }
    
    function display_item3( checkbox ) {
        var item3Div = document.getElementById("id_item3");
        if ( checkbox.checked == true ) {
            unsetNoneCheckbox();
            item3Div.style.display = "block";
        } else {
            item3Div.style.display = "none";
            setNoneCheckbox();
        }
    }
    
    function display_none( checkbox ) {
        var item1Chkd = document.getElementById("chkItem1");
        var item2Chkd = document.getElementById("chkItem2");
        var item3Chkd = document.getElementById("chkItem3");
        var i1 = document.getElementById("id_item1");
        var i2 = document.getElementById("id_item2");
        var i3 = document.getElementById("id_item3");
    
        if ( checkbox.checked == true ) {
            setNoneCheckbox();
    
            item1Chkd.checked=false;
            i1.style.display="none";
    
            item2Chkd.checked=false;
            i2.style.display="none";
    
            item3Chkd.checked=false;
            i3.style.display="none";
        } else {
            unsetNoneCheckbox();
        }
    }
    
    function unsetNoneCheckbox() {
        var noneChecked = document.getElementById("chkNone");
        noneChecked.checked=false;
        noneChecked.removeAttribute('disabled');
    }
    
    function setNoneCheckbox() {
        var noneChecked = document.getElementById("chkNone");
        noneChecked.checked=true;
        noneChecked.setAttribute('disabled', 'disabled');
    }
    
    </script>
    
    </head>
    
    <body>
    
    <p style="color:blue; font-weight:bold">Checkbox Testing</p>
    <p style="color:red"><u>Issue:</u> Need a way to check if any or all checkboxes are checked or not. If any of the checkboxes are checked, I need to keep the None checkbox unchecked. If none of the checkboxes are checked, I need to check the None checkbox. Having a problem creating a method to cycle through the checkboxes to check if any, all, or none of the checkboxes are checked or not. Any help would be much appreciated. Thank you in advance.</p>
    <p style="color:red"><u>Observations:</u> The None checkbox should be set as default. When multiple checkboxes are checked and you try to remove one, the None checkbox becomes checked. This is wrong because the None chekbox is checked along with an Item checkbox. The None checkbox should only be checked if none of the checkboxes are selected.</p>
    
    <form id="itemForm">
    
    <input type="checkbox" id="chkItem1" property="chkItem1" value="yes" onclick="display_item1(this);" />Item 1
    <input type="checkbox" id="chkItem2" property="chkItem2" value="yes" onclick="display_item2(this);" />Item 2
    <input type="checkbox" id="chkItem3" property="chkItem3" value="yes" onclick="display_item3(this);" />Item 3
    <input type="checkbox" id="chkNone" property="chkNone" value="chkd" onclick="display_none(this);" />None
    
    <div id="id_item1" style="display:none">
        <p>Item 1</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In odio lorem, tincidunt et, ultricies vitae, dapibus ut, tellus. Cras facilisis, sem quis iaculis vulputate, lorem tellus aliquet leo, et rhoncus sapien nulla eu odio. Integer ac magna nec dui dictum laoreet. Sed iaculis. Proin eget justo id neque ornare tempus. Maecenas malesuada lobortis augue. Donec vel purus. Vivamus tellus purus, fringilla vitae, tristique nec, rutrum a, tellus. Phasellus condimentum condimentum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus cursus sapien tempor ligula. In dictum lectus vitae urna. In hendrerit, nisl quis varius iaculis, lectus nisl fermentum metus, eu blandit turpis enim vel nisl. Praesent ullamcorper tristique dui. Curabitur nulla leo, posuere vitae, ultricies vel, vehicula eget, turpis. Donec vestibulum nunc a lectus. Morbi nisl tellus, blandit sed, faucibus nec, convallis vel, neque. Sed blandit viverra libero. Vestibulum sit amet erat sed dolor convallis rutrum. In fringilla purus sit amet massa.</p>
    </div>
    
    <div id="id_item2" style="display:none">
        <p>Item 2</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In odio lorem, tincidunt et, ultricies vitae, dapibus ut, tellus. Cras facilisis, sem quis iaculis vulputate, lorem tellus aliquet leo, et rhoncus sapien nulla eu odio. Integer ac magna nec dui dictum laoreet. Sed iaculis. Proin eget justo id neque ornare tempus. Maecenas malesuada lobortis augue. Donec vel purus. Vivamus tellus purus, fringilla vitae, tristique nec, rutrum a, tellus. Phasellus condimentum condimentum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus cursus sapien tempor ligula. In dictum lectus vitae urna. In hendrerit, nisl quis varius iaculis, lectus nisl fermentum metus, eu blandit turpis enim vel nisl. Praesent ullamcorper tristique dui. Curabitur nulla leo, posuere vitae, ultricies vel, vehicula eget, turpis. Donec vestibulum nunc a lectus. Morbi nisl tellus, blandit sed, faucibus nec, convallis vel, neque. Sed blandit viverra libero. Vestibulum sit amet erat sed dolor convallis rutrum. In fringilla purus sit amet massa.</p>
    </div>
    
    <div id="id_item3" style="display:none">
        <p>Item 3</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In odio lorem, tincidunt et, ultricies vitae, dapibus ut, tellus. Cras facilisis, sem quis iaculis vulputate, lorem tellus aliquet leo, et rhoncus sapien nulla eu odio. Integer ac magna nec dui dictum laoreet. Sed iaculis. Proin eget justo id neque ornare tempus. Maecenas malesuada lobortis augue. Donec vel purus. Vivamus tellus purus, fringilla vitae, tristique nec, rutrum a, tellus. Phasellus condimentum condimentum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus cursus sapien tempor ligula. In dictum lectus vitae urna. In hendrerit, nisl quis varius iaculis, lectus nisl fermentum metus, eu blandit turpis enim vel nisl. Praesent ullamcorper tristique dui. Curabitur nulla leo, posuere vitae, ultricies vel, vehicula eget, turpis. Donec vestibulum nunc a lectus. Morbi nisl tellus, blandit sed, faucibus nec, convallis vel, neque. Sed blandit viverra libero. Vestibulum sit amet erat sed dolor convallis rutrum. In fringilla purus sit amet massa.</p>
    </div>
    
    </form>
    
    </body>
    
    </html>

  • #2
    New Coder
    Join Date
    Jan 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb checkCheckboxes Method...

    I found one possible way of achieving a fix to this issue, check out the checkCheckboxes() method. Any ideas on better performance would be greatly appreciated.

    Code:
    <html>
    
    <head>
    
    <title>Checkbox Test</title>
    
    <script type="text/javascript">
    
    function display_item1( checkbox ) {
    
        var item1Div = document.getElementById("id_item1");
        if ( checkbox.checked == true ) {
            unsetNoneCheckbox();
            item1Div.style.display = "block";
        } else {
            item1Div.style.display = "none";
    //        setNoneCheckbox();
            checkCheckboxes();
        }
    
    }
    
    function display_item2( checkbox ) {
        var item2Div = document.getElementById("id_item2");
        if ( checkbox.checked == true ) {
            unsetNoneCheckbox();
            item2Div.style.display = "block";
        } else {
            item2Div.style.display = "none";
    //        setNoneCheckbox();
            checkCheckboxes();
        }
    }
    
    function display_item3( checkbox ) {
        var item3Div = document.getElementById("id_item3");
        if ( checkbox.checked == true ) {
            unsetNoneCheckbox();
            item3Div.style.display = "block";
        } else {
            item3Div.style.display = "none";
    //        setNoneCheckbox();
            checkCheckboxes();
        }
    }
    
    function display_none( checkbox ) {
        var item1Chkd = document.getElementById("chkItem1");
        var item2Chkd = document.getElementById("chkItem2");
        var item3Chkd = document.getElementById("chkItem3");
        var i1 = document.getElementById("id_item1");
        var i2 = document.getElementById("id_item2");
        var i3 = document.getElementById("id_item3");
    
        if ( checkbox.checked == true ) {
            setNoneCheckbox();
    
            item1Chkd.checked=false;
            i1.style.display="none";
    
            item2Chkd.checked=false;
            i2.style.display="none";
    
            item3Chkd.checked=false;
            i3.style.display="none";
        } else {
            unsetNoneCheckbox();
        }
    }
    
    function unsetNoneCheckbox() {
        var noneChecked = document.getElementById("chkNone");
        noneChecked.checked=false;
        noneChecked.removeAttribute('disabled');
    }
    
    function setNoneCheckbox() {
        var noneChecked = document.getElementById("chkNone");
        noneChecked.checked=true;
        noneChecked.setAttribute('disabled', 'disabled');
    }
    
    function checkCheckboxes() {
        var it1 = document.getElementById("chkItem1");
        var it2 = document.getElementById("chkItem2");
        var it3 = document.getElementById("chkItem3");
        if ( ( it1.checked) || ( it2.checked) || ( it3.checked) ) {
            unsetNoneCheckbox();
        } else {
            setNoneCheckbox();
        }
    }
    
    </script>
    
    </head>
    
    <body>
    
    <p style="color:blue; font-weight:bold">Checkbox Testing</p>
    <p style="color:red"><u>Issue:</u> Need a way to check if any or all checkboxes are checked or not. If any of the checkboxes are checked, I need to keep the None checkbox unchecked. If none of the checkboxes are checked, I need to check the None checkbox. Having a problem creating a method to cycle through the checkboxes to check if any, all, or none of the checkboxes are checked or not.</p>
    <p style="color:red"><u>Observations:</u> The None checkbox should be set as default. When multiple checkboxes are checked and you try to remove one, the None checkbox becomes checked. This is wrong because the None chekbox is checked along with an Item checkbox. The None checkbox should only be checked if none of the checkboxes are selected.</p>
    
    <form id="itemForm">
    
    <input type="checkbox" id="chkItem1" property="chkItem1" value="yes" onclick="display_item1(this);" />Item 1
    <input type="checkbox" id="chkItem2" property="chkItem2" value="yes" onclick="display_item2(this);" />Item 2
    <input type="checkbox" id="chkItem3" property="chkItem3" value="yes" onclick="display_item3(this);" />Item 3
    <input type="checkbox" id="chkNone" property="chkNone" value="chkd" onclick="display_none(this);" />None
    
    <div id="id_item1" style="display:none">
        <p>Item 1</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In odio lorem, tincidunt et, ultricies vitae, dapibus ut, tellus. Cras facilisis, sem quis iaculis vulputate, lorem tellus aliquet leo, et rhoncus sapien nulla eu odio. Integer ac magna nec dui dictum laoreet. Sed iaculis. Proin eget justo id neque ornare tempus. Maecenas malesuada lobortis augue. Donec vel purus. Vivamus tellus purus, fringilla vitae, tristique nec, rutrum a, tellus. Phasellus condimentum condimentum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus cursus sapien tempor ligula. In dictum lectus vitae urna. In hendrerit, nisl quis varius iaculis, lectus nisl fermentum metus, eu blandit turpis enim vel nisl. Praesent ullamcorper tristique dui. Curabitur nulla leo, posuere vitae, ultricies vel, vehicula eget, turpis. Donec vestibulum nunc a lectus. Morbi nisl tellus, blandit sed, faucibus nec, convallis vel, neque. Sed blandit viverra libero. Vestibulum sit amet erat sed dolor convallis rutrum. In fringilla purus sit amet massa.</p>
    </div>
    
    <div id="id_item2" style="display:none">
        <p>Item 2</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In odio lorem, tincidunt et, ultricies vitae, dapibus ut, tellus. Cras facilisis, sem quis iaculis vulputate, lorem tellus aliquet leo, et rhoncus sapien nulla eu odio. Integer ac magna nec dui dictum laoreet. Sed iaculis. Proin eget justo id neque ornare tempus. Maecenas malesuada lobortis augue. Donec vel purus. Vivamus tellus purus, fringilla vitae, tristique nec, rutrum a, tellus. Phasellus condimentum condimentum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus cursus sapien tempor ligula. In dictum lectus vitae urna. In hendrerit, nisl quis varius iaculis, lectus nisl fermentum metus, eu blandit turpis enim vel nisl. Praesent ullamcorper tristique dui. Curabitur nulla leo, posuere vitae, ultricies vel, vehicula eget, turpis. Donec vestibulum nunc a lectus. Morbi nisl tellus, blandit sed, faucibus nec, convallis vel, neque. Sed blandit viverra libero. Vestibulum sit amet erat sed dolor convallis rutrum. In fringilla purus sit amet massa.</p>
    </div>
    
    <div id="id_item3" style="display:none">
        <p>Item 3</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In odio lorem, tincidunt et, ultricies vitae, dapibus ut, tellus. Cras facilisis, sem quis iaculis vulputate, lorem tellus aliquet leo, et rhoncus sapien nulla eu odio. Integer ac magna nec dui dictum laoreet. Sed iaculis. Proin eget justo id neque ornare tempus. Maecenas malesuada lobortis augue. Donec vel purus. Vivamus tellus purus, fringilla vitae, tristique nec, rutrum a, tellus. Phasellus condimentum condimentum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus cursus sapien tempor ligula. In dictum lectus vitae urna. In hendrerit, nisl quis varius iaculis, lectus nisl fermentum metus, eu blandit turpis enim vel nisl. Praesent ullamcorper tristique dui. Curabitur nulla leo, posuere vitae, ultricies vel, vehicula eget, turpis. Donec vestibulum nunc a lectus. Morbi nisl tellus, blandit sed, faucibus nec, convallis vel, neque. Sed blandit viverra libero. Vestibulum sit amet erat sed dolor convallis rutrum. In fringilla purus sit amet massa.</p>
    </div>
    
    </form>
    
    </body>
    
    </html>

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    (rough) e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB" lang="en-GB">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<title>test</title>
    	<style type="text/css">
    
    	#itemForm {
    		display: none;
    	}
    
    	body.hasJS #itemForm {
    		display: block;
    	}
    
    	body.hasJS .hide {
    		display: none;
    	}
    
    	</style>
    	<script type="text/javascript">
    
    	window.onload = function() {
    
    		var bodyEl = document.getElementsByTagName('body')[0];
    		bodyEl.className += (bodyEl.className) ? ' hasJS' : 'hasJS';
    
    	}
    
    	function checkValues() {
    
    		var chkbxs = [];
    		chkbxs[0] = document.getElementById('chkItem1');
    		chkbxs[1] = document.getElementById('chkItem2');
    		chkbxs[2] = document.getElementById('chkItem3');
    
    		var indChkbx = document.getElementById('chkNone');
    
    		for (var i = 0, tChkbx; tChkbx = chkbxs[i]; i++) {
    			if (tChkbx.checked == true) {
    				indChkbx.checked = false;
    				return;
    			}
    		}
    
    		indChkbx.checked = true;
    
    	}
    
    	function display_item(srcObj) {
    
    		document.getElementById(srcObj.className).className = (srcObj.checked) ? '' : 'hide';
    		checkValues();
    
    	}
    
    	function hide_all() {
    
    		var indChkbx = document.getElementById('chkNone');
    		indChkbx.checked = true;
    
    		var chkbxs = [];
    		chkbxs[0] = document.getElementById('chkItem1');
    		chkbxs[1] = document.getElementById('chkItem2');
    		chkbxs[2] = document.getElementById('chkItem3');
    		for (var i = 0, tChkbx; tChkbx = chkbxs[i]; i++) {
    			tChkbx.checked = !indChkbx.checked;
    		}
    
    		var infoDivs = [];
    		infoDivs[0] = document.getElementById('id_item1');
    		infoDivs[1] = document.getElementById('id_item2');
    		infoDivs[2] = document.getElementById('id_item3');
    		for (var i = 0, tDiv; tDiv = infoDivs[i]; i++) {
    			tDiv.className = (!indChkbx.checked) ? '' :  'hide';
    		}
    
    	}
    
    	</script>
    </head>
    <body>
    
    <form id="itemForm" action="/">
    
    <input type="checkbox" id="chkItem1" class="id_item1" property="chkItem1" value="yes" onclick="display_item(this);" />Item 1
    <input type="checkbox" id="chkItem2" class="id_item2" property="chkItem2" value="yes" onclick="display_item(this);" />Item 2
    <input type="checkbox" id="chkItem3" class="id_item3" property="chkItem3" value="yes" onclick="display_item(this);" />Item 3
    <input type="checkbox" id="chkNone" property="chkNone" value="chkd" onclick="hide_all();" checked="checked" />None
    
    <div id="id_item1" class="hide">
        <p>Item 1</p>
        <p>...</p>
    </div>
    
    <div id="id_item2" class="hide">
        <p>Item 2</p>
        <p>...</p>
    </div>
    
    <div id="id_item3" class="hide">
        <p>Item 3</p>
        <p>...</p>
    </div>
    
    </form>
    
    </body>
    </html>
    The js could probably be made more efficient, with the number of functions reduced to two or maybe even one, but I don't really have my js head on today.
    Last edited by Bill Posters; 06-05-2007 at 06:51 PM.


  •  

    Posting Permissions

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