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?

 
<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="uncheck('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="uncheck('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>
 
 

-html

 
function uncheck()
 {
     document.getElementById("Topic").checked=false
 }
 
///  or  ////
 
function uncheck2(formname,checkname,state){
    var checkboxes=eval("document.forms."+formname+"."+checkname)
    for (cb=0;cb<checkboxes.length;cb++)
    checkboxes[cb].checked=state    
}
 
 

- javascript

[pbmods]

Heya, Swebster.

Why is there an eval() in this line?

var checkboxes=eval("document.forms."+formname+"."+checkname)
 

This will work just as well, and more efficiently, to boot:

var checkboxes = document.forms[formname][checkname];
 

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

You will want to use getElementsByTagName().

[swebster]

You will want to use getElementsByTagName().

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?

< onclick="uncheck2('menu1')" 
 

- html

document.getElementsByTagName("div").checked=false
 

- 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('class') == '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

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

- javascript

 
<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="uncheck()" /></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="uncheck()" /></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>
 
 
 

- html

[pbmods]

Heya, Swebster.

Each Element has the getElementsByTagName() method:

var inputs = document.getElementById('divId').getElementsByTagName('input');
 

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

 
function checkall(formname,checkname,state){
    var checkboxes=eval("document.forms."+formname+"."+checkname)
    for (cb=0;cb<checkboxes.length;cb++)
    {
    var obj = checkboxes[cb];
    if(obj.parentNode.parentNode.className!='hide')
    {
    obj.checked=state;
    }
    }
}
 

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

 
function resetCheckkboxes() {
var inputs = document.getElementsById('divId').getElementsByTagName('input');
    for (var i=0; i<inputs.length; i++) 
     {        
         var obj = inputs[i];
         if(obj.checkbox!='false')
         {
         obj.checked='false';
         }
    }
}
 

- javascript

[swebster]

Heya, Swebster.

Each Element has the getElementsByTagName() method:

var inputs = document.getElementById('divId').getElementsByTagName('input');
 

This returns an error;

Object doesn't support this property or method.

function resetCheckboxes() {
var inputs = document.getElementsById('divId').getElementsByTagName('input');
for (var i=0; i<inputs.length; i++) 
  {
    var obj = inputs[i];
     if(obj.checkbox!='false')
  {
     obj.checked='false';
     }
 }
}
 
 

- 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.getElementById(...)' 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..

function unselect(theid) {
  var inputs = document.getElementById(theid).getElementsByTagName('input');
       for (var i=0; i<inputs.length ; i++)
           {
           var obj = inputs[i];
           if(inputs[i].type == "checkbox") {
           inputs[i].checked=false;
           }
       }
  }
 

-javascript

[acoder]

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

Post again if you have any more queries.