uncheck checkboxes within single div

[swebster]

I need to zero in on a specific section of my jsp form during a hide to uncheck the checkboxes in that section. Currently, anything I try either unchecks all checkboxes on the form or doesn't work at all. When I associated the specific section with ID the first box within the div is unchecked but not the second.

Suggestions?

[code=html]

<div id="menu1" class=hide>

<div id="col1">
<input type="checkbox" name="Topic" value="_topic1" />topic 1 </div>
<div id="col2">
<input type="checkbox" name="Topic" value="_topic2" />topic 2 </div>

<div id="exit"><img src="/img/exit.gif" onclick="unchec k('menu1')" /></div>
</div>

<div id="menu2" class=hide>

<div id="col1">
<input type="checkbox" name="Topic" value="_topic3" />topic 3 </div>
<div id="col2">
<input type="checkbox" name="Topic" value="_topic4" />topic 4 </div>

<div id="exit"><img src="/img/exit.gif" onclick="unchec k('menu2')" /></div>

</div>

<div id="col1"> // always visable.
<div><input type="checkbox" name="Topic" value="_main1" /> main 1</div>
<div><input type="checkbox" name="Topic" value="_main2" /> main 2 </div>
<div><input type="checkbox" name="Topic" value="_main3" /> main 3 </div>
</div>

[/code] -html
[code=javascript]

function uncheck()
{
document.getEle mentById("Topic ").checked=fals e
}

/// or ////

function uncheck2(formna me,checkname,st ate){
var checkboxes=eval ("document.form s."+formname+". "+checkname )
for (cb=0;cb<checkb oxes.length;cb+ +)
checkboxes[cb].checked=state
}

[/code] - javascript

[pbmods]

Heya, Swebster.

Why is there an eval() in this line?
[code=javascript]
var checkboxes=eval ("document.form s."+formname+". "+checkname )
[/code]

This will work just as well, and more efficiently, to boot:
[code=javascript]
var checkboxes = document.forms[formname][checkname];
[/code]

But more importantly, document.forms[formname][checkname] only represents a singe element.

You will want to use getElementsByTa gName().

[swebster]

You will want to use getElementsByTa gName().

eval was incorrectly placed you're right..

In terms of tagName, would it be something simlar to; So by marking the tagname to div or id and using the jsf with the div in question it will uncheck those boxes?

[code=html]
< onclick="unchec k2('menu1')"
[/code] - html

[code=javascript]
document.getEle mentsByTagName( "div").checked= false
[/code] - javascript

[swebster]

by setting the exact menu in the function below, the checkbox objects are set to false during onclick and the main checkboxes are untouched. With multiple menus to thing of a function would be needed for each one of them so there must be a more intelligent way. This deployment is in IE which is why I am using getAttribute. getAttribute('c lass') == 'show' works too but sets all the visible menu options to false and there are 20. Also, an error is returned with using a wildcard 'menu*' or 'menu[1-20]

Suggestions? Thanks

[code=javascript]
function uncheck() {
var ins = document.getEle mentsByTagName( 'input');
for (var i=0; i<ins.length; i++) {
if (ins[i].getAttribute(' id') == 'menu1') ins[i].checked =
false;
}
}

[/code] - javascript

[code=html]

<div id="menu1" class=hide>

<div id="col1">
<input type="checkbox" name="Topic" value="_topic1" />topic 1 </div>
<div id="col2">
<input type="checkbox" name="Topic" value="_topic2" />topic 2 </div>

<div id="exit"><img src="/img/exit.gif" onclick="unchec k()" /></div>
</div>

<div id="menu2" class=hide>

<div id="col1">
<input type="checkbox" name="Topic" value="_topic3" />topic 3 </div>
<div id="col2">
<input type="checkbox" name="Topic" value="_topic4" />topic 4 </div>

<div id="exit"><img src="/img/exit.gif" onclick="unchec k()" /></div>

</div>

<div id="col1"> // always visable.
<div><input type="checkbox" name="Topic" value="_main1" /> main 1</div>
<div><input type="checkbox" name="Topic" value="_main2" /> main 2 </div>
<div><input type="checkbox" name="Topic" value="_main3" /> main 3 </div>
</div>


[/code] - html

[pbmods]

Heya, Swebster.

Each Element has the getElementsByTa gName() method:
[code=javascript]
var inputs = document.getEle mentById('divId ').getElementsB yTagName('input ');
[/code]

[swebster]

Pbmods,

including a checkbox=false statement triggering on the div id='menu * ' within the existing showhide function might be a little cleaner. Would you be able to assist?


[code=javascript]

function checkall(formna me,checkname,st ate){
var checkboxes=eval ("document.form s."+formname+". "+checkname )
for (cb=0;cb<checkb oxes.length;cb+ +)
{
var obj = checkboxes[cb];
if(obj.parentNo de.parentNode.c lassName!='hide ')
{
obj.checked=sta te;
}
}
}
[/code] - javascript

[swebster]

[QUOTE=swebster]Pbmods,

At a glance can you determine what is being done wrong here?
The function is not setting the specific checkboxes to false.

Thank you for your time.


[code=javascript]

function resetCheckkboxe s() {
var inputs = document.getEle mentsById('divI d').getElements ByTagName('inpu t');
for (var i=0; i<inputs.length ; i++)
{
var obj = inputs[i];
if(obj.checkbox !='false')
{
obj.checked='fa lse';
}
}
}
[/code] - javascript

[swebster]

Heya, Swebster.

Each Element has the getElementsByTa gName() method:
[code=javascript]
var inputs = document.getEle mentById('divId ').getElementsB yTagName('input ');
[/code]

This returns an error;

Object doesn't support this property or method.

[code=javascript]
function resetCheckboxes () {
var inputs = document.getEle mentsById('divI d').getElements ByTagName('inpu t');
for (var i=0; i<inputs.length ; i++)
{
var obj = inputs[i];
if(obj.checkbox !='false')
{
obj.checked='fa lse';
}
}
}

[/code] - javascript

[acoder]

This returns an error;

Object doesn't support this property or method.

It's getElementById, not getElementsById .

You also seem to have multiple objects with the same id. That is incorrect. An id should be unique.

[swebster]

It's getElementById, not getElementsById .

You also seem to have multiple objects with the same id. That is incorrect. An id should be unique.

Thanks for the correction on getElementById. I now have a more clear error message.

'document.getEl ementById(...)' is null or not an object.

In terms of multiple objects, I have update the code to only have unique div id's for each of the menus and the checkboxes are now using class rather than div id.

[acoder]

Check that you have a div with the ID that you're using.

[swebster]

Check that you have a div with the ID that you're using.

Got it. thanks for all your suggestions.

Here is the correct code for the forum..

[code=javascript]
function unselect(theid) {
var inputs = document.getEle mentById(theid) .getElementsByT agName('input') ;
for (var i=0; i<inputs.lengt h ; i++)
{
var obj = inputs[i];
if(inputs[i].type == "checkbox") {
inputs[i].checked=false;
}
}
}
[/code] -javascript

[acoder]

Glad to hear you got it working and thanks for posting the solution.

Post again if you have any more queries.