We help IT Professionals succeed at work.

javascript deciding whether to set checkbox checked

scm0sml
scm0sml asked
on
When binding to a data list i use:
Select Case e.Item.ItemType
                Case ListItemType.Header
                Case ListItemType.AlternatingItem, ListItemType.Item
                    Select Case _enmMode
                        Case enumScreenMode.modeEditBasket
                            Dim checkbox As CheckBox
                            checkbox = e.Item.FindControl("chkCabinSelected")

                            checkbox.Attributes.Add("onclick", "CheckSingleCheckbox()")

                        Case enumScreenMode.modeToursBooking
                            'todo add script to constrain number of selections to _intNoCabinsRequired
                    End Select
            End Select

I have the javascript function(which is only half finished):
<script type="text/javascript">
        var boolCabinSelected;
        boolCabinSelected = false;
        function CheckSingleCheckbox()
        {  
            alert(boolCabinSelected);
            if (boolCabinSelected = false)'then we can allow the checkbox to be checked
            {
                alert("Danny Is A James Blunt");
                boolCabinSelected = true;              
            }  
else
{
here we need to not allow the checkbox to be checked in.

I am aware that i will need to pass the name of the checkbox in but am looking for some help on this as im not overly familiar with jscript as u might be noticing.

The checkboxes as present look like:
                                                <input id="dlCabins_ctl01_chkCabinSelected" type="checkbox" name="dlCabins$ctl01$chkCabinSelected" onclick="CheckSingleCheckbox();" />                                                

I'd appreciate some advice.

}        
        }
    </script>

What I need is initially the boolCabinSelected value to be false, then whenever a checkbox is clicked the checkbox name is passed into the function, so i can first say, are any checkboxes checked, i.e is boolCabinSelected = true, if they are then i want the popup to display and the tickbox that was ticked to not get ticked, i.e set to unchecked, and if false then allow the checkbox to be checked and set the value of boolCabinSelected to be true
Comment
Watch Question

Author

Commented:
sorry the function should read something like:
 function CheckSingleCheckbox()
        {  
            if (boolCabinSelected = false)'then we can allow the checkbox to be checked
            {
                 boolCabinSelected = true;              
            }  
else
{
here we need to not allow the checkbox to be checked
Commented:
I hope this is what you want

<input id="dlCabins_ctl01_chkCabinSelected" type="checkbox" name="dlCabins$ctl01$chkCabinSelected" onclick="CheckSingleCheckbox(this);" />

function CheckSingleCheckbox(obj)
        {  
            if (!boolCabinSelected) //'then we can allow the checkbox to be checked
            {
                 boolCabinSelected = true;
              obj.checked = true;
            }  

}

Author

Commented:
Ok i have the following and it is working upto a point.

When first selecting an option it allows as there are no others selecting - fine.

But in the else statement i can never hit allert 3.

What is the ordering of when the checkbox gets ticked etc, as if boolCabinSelected = true then we jump into the else, but if the tickbox we have just ticked is not currently ticked then we should be hitting alert 3, this never happens.

Is the checkbox being checked before this statement?
<script type="text/javascript">
        var boolCabinSelected;
        boolCabinSelected = false;
        
        function CheckSingleCheckbox(obj)
        {   
            alert(boolCabinSelected);
            if (!boolCabinSelected) 
            {     
                alert("1");          
                boolCabinSelected = true; 
                obj.selected = true;          
            }
            else 
            {
                if (obj.selected = true)'will handle unticking the selected checkbox to allow for a new one to be selected.
                {
                    alert("2");          
                   boolCabinSelected = false ;
                   obj.selected = false;
                }
                else
                {
                    alert("3");          
                    alert("Only one cabin may be selected. You must de-select your previous choice before being able to select this cabin");
                   obj.selected = false;
                }
            }            
        }
    </script>

Open in new window

b0lsc0ttIT Manager
CERTIFIED EXPERT

Commented:
scm0sml,

You need to use the comparison operator in your Ifs.  For example ...

                if (obj.selected == true)

Of course this is assuming you are really trying to use Javascript.  The "comment" after that if isn't commented out.  Javascript comments use // instead of '.

Let me know if you have any questions or need more information.

b0lsc0tt
IT Manager
CERTIFIED EXPERT
Commented:
scm0sml,

Notice I added the missing equal sign (==).  I corrected your snippet and posted it below.

Let me know if you have a question.

b0lsc0tt
<script type="text/javascript">
        var boolCabinSelected;
        boolCabinSelected = false;
        
        function CheckSingleCheckbox(obj)
        {   
            alert(boolCabinSelected);
            if (!boolCabinSelected) 
            {     
                alert("1");          
                boolCabinSelected = true; 
                obj.selected = true;          
            }
            else 
            {
                if (obj.selected == true)//will handle unticking the selected checkbox to allow for a new one to be selected.
                {
                    alert("2");          
                   boolCabinSelected = false ;
                   obj.selected = false;
                }
                else
                {
                    alert("3");          
                    alert("Only one cabin may be selected. You must de-select your previous choice before being able to select this cabin");
                   obj.selected = false;
                }
            }            
        }
    </script>

Open in new window

Author

Commented:
yeah i had put the comment in just for this post, it isnt in my code.

Ok almost there now.

The only problem now is that when it hits the alert 3 section, it should b setting the obj.selected = false but the checkbox stays checked.

so basically they have tried to select a checkbox when one is already checked, they get the popup to tell them they cant do this, but the checkbox stays checked anyway?

any ideaS?
b0lsc0ttIT Manager
CERTIFIED EXPERT

Commented:
It is probably obj.  What is used to call that function?

To test this theory try to reference the element with the document collection instead.  For example, instead of obj on that line use ...

document.forms[0].fieldName[0].checked = false;

This assumes it is in the first (or only form) and the checkbox is named fieldName and is the first box.

Let me know what you find out or if you have a question.

bol

Author

Commented:
it is called using                                                
<input id="dlCabins_ctl02_chkCabinSelected" type="checkbox" name="dlCabins$ctl02$chkCabinSelected" onclick="CheckSingleCheckbox(this);" />                                                
b0lsc0ttIT Manager
CERTIFIED EXPERT

Commented:
Thanks.  What is the result if you use ...

document.getElementById('dlCabins_ctl02_chkCabinSelected').checked = false;

bol
b0lsc0ttIT Manager
CERTIFIED EXPERT

Commented:
Actually are you sure about the alert 3 thing??  Going from the code as I last saw it (see my post) alert 3 should only appear if that box isn't checked.  Please either update the code or clarify the problem you just asked about.  Alert 2 and 3 seem to do the same thing to the checkbox.

bol

Author

Commented:
Ok function attached.

For what was alert 2, we were saying, ok a checkbox that IS checked has just been unchecked so untick it.

For what was alert 3 we were saying ok this checkbox has been checked, but another checkbox has already been checked so we give an error popup message and make sure the checkbox that was just ticked doesnt actually get set as ticked.

Comprende? :)
function CheckSingleCheckbox(checkbox,newcabinid)
        {   
            
            if (!boolCabinSelected)//if no cabin has been selected 
            {                     
                boolCabinSelected = true; //set our global flag
                checkbox.selected = true;
                form1.hddnCabinID.value = newcabinid //populate our hidden field with the cabin id.
            }
            else 
            {
                if (checkbox.selected == true)//we are unchecking the currently ticked checkbox
                {                    
                   boolCabinSelected = false ;//set flag to allow other cabins to be selected
                   checkbox.selected = false;
                   form1.hddnCabinID.value = 0 //reset hidden field value
                }
                else //else the user is trying to select a 2nd cabin which is not allowed so we prompt the user advising.
                {                    
                    alert("Only one cabin may be selected. You must de-select your previous choice before being able to select this cabin.");                    
                    checkbox.selected = false; //and de-select the choice they have just made.
                }
            }            
        }

Open in new window

Author

Commented:
and what is happening at the moment is that theuy get the popup fine saying they cannot enter more than 2....

the next line is then:
checkbox.selected = false

but for whatever reason the checkbox stays checked?
b0lsc0ttIT Manager
CERTIFIED EXPERT

Commented:
I will look over your last posts.  What was the result of trying http:#20746784 ?

bol
b0lsc0ttIT Manager
CERTIFIED EXPERT

Commented:
You use a variable name that will probably cause problems.  Change checkbox to something else.  For example (see snippet).  Let me know if that works.

bol
function CheckSingleCheckbox(checkbox,newcabinid)
        {   
            
            if (!boolCabinSelected)//if no cabin has been selected 
            {                     
                boolCabinSelected = true; //set our global flag
                checkbox.selected = true;
                form1.hddnCabinID.value = newcabinid //populate our hidden field with the cabin id.
            }
            else 
            {
                if (checkbox.selected == true)//we are unchecking the currently ticked checkbox
                {                    
                   boolCabinSelected = false ;//set flag to allow other cabins to be selected
                   checkbox.selected = false;
                   form1.hddnCabinID.value = 0 //reset hidden field value
                }
                else //else the user is trying to select a 2nd cabin which is not allowed so we prompt the user advising.
                {                    
                    alert("Only one cabin may be selected. You must de-select your previous choice before being able to select this cabin.");                    
                    checkbox.selected = false; //and de-select the choice they have just made.
                }
            }            
        }

Open in new window

Author

Commented:
am i being an idiot or has your snippet not changed?

Author

Commented:
this seems to be having a better affect:
document.getElementById('dlCabins_ctl02_chkCabinSelected').checked = false;

but obviously for the one checkbox, how do i refereence which ever one i passed in.

I'm trying to use:
document.getElementById(checkbox).checked = false; where checkbox was the parameter passed in.

but this isnt working, do i need to reference checkbox.name or .id somehow instead?
b0lsc0ttIT Manager
CERTIFIED EXPERT

Commented:
You aren't an idiot at all; I messed up trying to do a copy and just copied your code instead of my modified version.  I have posted the code I meant to post in the snippet below.  Basically I renamed the checkbox variable to myCheckbox.

Since my other recommendation worked then it probably is the name you used for the variable.  If that is the problem then this will fix it (using myCheckbox instead of checkbox).  The word checkbox is a reserved word in some ways and should not be used for a variable name.

bol
function CheckSingleCheckbox(myCheckbox,newcabinid)
        {   
            
            if (!boolCabinSelected)//if no cabin has been selected 
            {                     
                boolCabinSelected = true; //set our global flag
                myCheckbox.selected = true;
                form1.hddnCabinID.value = newcabinid //populate our hidden field with the cabin id.
            }
            else 
            {
                if (myCheckbox.selected == true)//we are unchecking the currently ticked checkbox
                {                    
                   boolCabinSelected = false ;//set flag to allow other cabins to be selected
                   myCheckbox.selected = false;
                   form1.hddnCabinID.value = 0 //reset hidden field value
                }
                else //else the user is trying to select a 2nd cabin which is not allowed so we prompt the user advising.
                {                    
                    alert("Only one cabin may be selected. You must de-select your previous choice before being able to select this cabin.");                    
                    myCheckbox.selected = false; //and de-select the choice they have just made.
                }
            }            
        }
 

Open in new window

Author

Commented:
still no joy im afraid?

seems strange  that the checks using myCheckbox.selected  are working fine but then setting the actual value doesnt.......

any ideas?
CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008
Commented:
I barely saw your request on the other thread. Try the code below.
function CheckSingleCheckbox(myCheckbox,newcabinid)
        {   
            
            if (!boolCabinSelected)//if no cabin has been selected 
            {                     
                boolCabinSelected = true; //set our global flag
                myCheckbox.checked = true;
                form1.hddnCabinID.value = newcabinid //populate our hidden field with the cabin id.
            }
            else 
            {
                if (myCheckbox.checked == true)//we are unchecking the currently ticked checkbox
                {                    
                   boolCabinSelected = false ;//set flag to allow other cabins to be selected
                   myCheckbox.checked = false;
                   form1.hddnCabinID.value = 0 //reset hidden field value
                }
                else //else the user is trying to select a 2nd cabin which is not allowed so we prompt the user advising.
                {                    
                    alert("Only one cabin may be selected. You must de-select your previous choice before being able to select this cabin.");                    
                    myCheckbox.checked = false; //and de-select the choice they have just made.
                }
            }            
        }

Open in new window

Author

Commented:
nope still leaving the checkbox checked?

this is driving me nuts......

Why is the check if (myCheckbox.checked == true) working but then using the same thing to set the checked value not?

Author

Commented:
i was being an idiot hielo, it did work.

Cheers for finishing this off for me!
b0lsc0ttIT Manager
CERTIFIED EXPERT

Commented:
I'm glad I could help.  Thanks for the grade, the points and the fun question.

bol

Explore More ContentExplore courses, solutions, and other research materials related to this topic.