We help IT Professionals succeed at work.

How to add an item to a checkboxlist in Javascript?

dreamchaser23
on
2,091 Views
Last Modified: 2008-01-09
Hi all,
Scenario: If there is a dropdownbox having the three values: "Add, Subtract, Multiply" and there is a Checkboxlist with the same 3 values. If the user selects "Add" option in the dropdownlist, then the item "Add" in the Checkboxlist will be removed by the below code. If the user selects "Subtract" option in the dropdownlist, then "Add" item should be added to the checkboxlist and "Subtract" item needs to be removed.

I am not able to add the item back to the checkboxlist.

If I use the following code, I would be able to remove Checkboxlist item whose value is equal to the value selected in the DropDownList:

var chkObj = document.getElementById('CheckBoxList1').childNodes[0];
var dropDownListObject = document.getElementById('HTMLDropDownList1');
var dropDownListSelectedValue =  dropDownListObject.options[dropDownListObject.selectedIndex].value ;
for (i=0;i<chkObj.childNodes.length;i++)
                                   {
                                      if(chkObj.childNodes[i].innerText==dropDownListSelectedValue)
                                       {
                                          chkObj.removeChild(chkObj.childNodes[i]);
                                   //    chkObj.childNodes[i].appendChild();
                                  //     I tried appendChild, however it is not working.
 
                                       }

I would like to know how to add the item back to the Checkboxlist?

Any help would be greatly appreciated.
Many thanks,
DreamChaser
Comment
Watch Question

Tried this?

var chkbox = document.createElement('checkbox');  
hkbox.id = 'newchk';
chkbox.name = 'chknew';
chkObj.childNodes.Add(chkbox);
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
Hi Suraj, Thanks a lot for your comment.
I got this error message:
"Sys is not defined". and the value doesnt get added.
Could you please let me know why?
>> "Sys is not defined".
I dont remember the word SYS being anywhere in the code i pasted. Am i missing something?.

Author

Commented:
This "Sys is not defined" error, I get in page load itself.
If I try to change an option in the dropdownlist, I get "Method not supported" (I think Add method).
Thanks again for your reply.
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
Thanks Suraj for your reply again.
yeah, I tried again
I got this error message  "Object does not support the property or method" at this line:
chkObj.childNodes.Add(chkbox);

Author

Commented:
Hi gops1,
Many thanks for your reply.
Obviously your code works 100%. :) Thanks for that as well..
But according to the specs (& my Manager), I gotta use checkboxlist only :(
I spent a great deal of time to make it work so far. :)
It would be great if I am able to add the checkboxlist item in JS.
Could you pls throw some light on this...
Thanks again for your comment, gops1.

Can you try chkObj.elements.add(chkbox) ??

Author

Commented:
Thanks yet again, mate.
I get this mesg now: 'elements' is null or not an object
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
Hi Gops1,
Thank you so much for the second solution.
Could you let me know the differences between this and the first one.
Obviously the first one seemed a lot easier.
Will the second one be better than the other one?
Sorry for the delay. Thanks again.
DreamChaser

Author

Commented:
Hi Suraj
Thanks a lot for the code.
It is indeed working.
I'll try to play around for my scenario.
Thanks again for your help mate
DreamChaser
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
Thanks a lot mate!!!
Really clear.. understood well.
Thanks again.
I have a quick question: In this same scenario, assume that the user selected "Add" option, and add option in the checkboxes gets removed according to your first code. Now if the user clicks on Refresh button, the "Add" checkbox also gets displayed in the page. Is this correct in the real world when the user clicks on Refresh button? Or should the option selected by the user should be maintained? Please let me know as and when you find time.
Thanks a lot again for the crisp explanation.!!

Author

Commented:
Just to clarify my words:
I would like to know if the option chosen by the user (for eg: any option in a RadioButton or Listbox or DropDown or in the example scenario above) should be maintained in the view state and displayed the options exactly chosen by the user. Or is it fine to clear the values?

Author

Commented:
Please read this comment instead of the earlier one:

Just to clarify my words:
I would like to know if the option chosen by the user (for eg: any option in a RadioButton or Listbox or DropDown or in the example scenario above) should be maintained in the view state and display the options exactly chosen by the user when the "Refresh button" is clicked? Or is it fine to clear the values?

Commented:
This is the normal behavior you find in some browsers. But that can be cleared programitically. Since it is normal I would suggest just to ignore it. Why I am telling this is, there can be an instance that when the page loads, a checkbox has to be selected and in this case we cannot just clear them.

Author

Commented:
Many Thanks, gops1,
Yet another crystal clear explanation from ya.. :)
Can you post this reply here:
https://www.experts-exchange.com/Programming/Languages/.NET/ASP.NET/Q_22930616.html
I can award you points for this reply...
Thanks again mate!

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.