...

View Full Version : Enabling/Disabling Multiple Checkboxes...



tophi7
06-05-2007, 03:44 PM
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.



<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>

tophi7
06-05-2007, 04:47 PM
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.



<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>

Bill Posters
06-05-2007, 05:41 PM
(rough) e.g.

<!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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum