Jump to content

Check out our Community Blogs

Register and join over 40,000 other developers!

Recent Status Updates

View All Updates

- - - - -

Need Some Help Creating A Dynamic Checkbox List

checkbox dynamic list

  • Please log in to reply
2 replies to this topic

#1 camdaddy09


    CC Newcomer

  • Member
  • PipPip
  • 15 posts

Posted 23 April 2012 - 06:11 PM

Im wanting to do a list with checkboxes beside each thing in the list. when i check off one of the checkboxes other checkboxes that depend on that one being checked get highlighted until checked off themselves. i have experience in programming, and html thats why i'm asking for it in javascript, i just need a small sample i think to get me going then i can amend it as i require.

Im trying to design a system whereby there is an entire list of classes in a degree plan, the user selects the classes they have taken and the classes that depend on those as prerequisites get highlighted so the user can better see which classes are open for enrollment to them.
  • 0

#2 BlackRabbit


    CodeCall Legend

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 3871 posts
  • Location:Argentina
  • Programming Language:C, C++, C#, PHP, JavaScript, Transact-SQL, Bash, Others
  • Learning:Java, Others

Posted 23 April 2012 - 07:39 PM

Here is an example on how to create one checkbox with javascript :


Since you know programming you understand you will take that code and make it a function which you will call iterating as much as checkboxes you need.

As second step is to add an onclick event handler to the checkboxes, so you will now when one checkbox changes its checked/unchecked state, here is an example :


Remember in the checkboxes creation function it would be convenient if you send the ID by parameter so you could use to know from which other checkbox its state depends on.

Oh, and you should not just create the checkboxes in the document, you should have an array of this kind :

CheckboxID, MasterCheckboxID, statePilot
cb105 , cb101, AND

there you make the relationship from a checkboxid with its State master checkboxID, and the 3rd field would be like AND or NON,
AND would mean mirroring state as in checked when master is checked and unchecked when master is unchecked, and NON would mean this checkbox needs to be the opposite of its master

So, any time an onclick event comes from a checkbox your eventhandler walks that array and then rearrange the check status of the checkboxes.
  • 0

#3 RhetoricalRuvim


    JavaScript Programmer

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1311 posts
  • Location:C:\Countries\US
  • Programming Language:C, Java, C++, PHP, Python, JavaScript

Posted 23 April 2012 - 08:03 PM

Here's an example if you want to do things with checkboxes:
<input type="checkbox" id="checkbox1" onClick="CheckFields (1);" /> 
<input type="checkbox" id="checkbox2" onClick="CheckFields (2);" /> 
<script type="text/javascript"> 
// box1 and box2 are references to the INPUT element objects. 
var box1= document.getElementById ("checkbox1"); 
var box2= document.getElementById ("checkbox2"); 
// Now we define the function that responds to a change in a checkbox's state. 
function CheckFields (n){ 
  // I hope the rest is self-explanatory. If something doesn't make sense, please ask. 
  if (n == 1){ 
    if (box1.checked) box2.checked= true; 
  } else { 
    if (!box1.checked) box1.checked= !box2.checked; 
(just some random code that does things with that stuff.)

And also, on dynamically making checkboxes:
<div id="txt"></div> 
<script type="text/javascript"> 
// txt is the reference to the above DIV element object. 
var txt= document.getElementById ("txt"); 

// We make the INPUT elements. 
var box1= document.createElement ("input"); 
var box2= document.createElement ("input"); 

// Modify the first input to be a checkbox, ... 
box1.type= "checkbox"; 
box1.id= "checkbox1"; 
box1.onclick= new Function ("CheckFields (1);"); 

// Also modify the second element. 
box2.type= "checkbox"; 
box2.id= "checkbox2"; 
box2.onclick= new Function ("CheckFields (2);"); 

// Now that we have the checkbox objects ready, we can add them to the txt DIV element. 
txt.appendChild (box1); 
txt.appendChild (box2);

I hope this helps :D .
  • 0

Also tagged with one or more of these keywords: checkbox, dynamic, list

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download