[SOLVED] Automatic Checkbox/Radio Button Checking

Stuart · October 25th, 2007, 07:54 PM

Hello everyone,
I am having another small issue. I have a code that makes my viewers' lives a bit easier by automatically checking a radio button or checkbox when another radio button or checkbox is clicked. I will explain further.
There are two parts to this issue.
Part I) The form and code:

The form looks like this:

HTML Code:

() Radio1 label
    [] Checkbox1 label
    [] Checkbox2 label
    [] Checkbox3 label, [Textbox]
() Radio2 label
() Radio3 label

-----------------------------------------------------------
() is a radio button
[] is a checkbox

Now when Checkbox1, Checkbox2, or Checkbox3 are checked (onclick), Radio1 is automatically checked (Checkboxes are a 'directory' under Radio1). When Radio2 or Radio3 are checked (onclick), the Checkboxes are all unchecked. Also, when someone types into the textbox (after Checkbox3), Checkbox3 as well as Radio1 are checked. And when Checkbox3 is unchecked OR Radio2 or Radio3 are checked, the textbox is cleared. (Pheww...)
Here is the code I have so far:

Code:

function selectFields(){
    var count=0;
    for(var i=0;i<document.forms[1].Checkboxes.length;i++){
        if(document.forms[1].Checkboxes[i].checked){
            count++;
        }
    }
document.forms[1].type[0].checked=(count>0);document.forms[1].type[0 - 1].checked=(count<=0);
}

The checkboxes have an onclick value of: onclick="selectFields()".
The radio buttons have an onclick value of: onclick="for(i=0;i<this.form.Checkboxes.length;i++ )this.form.problem[i].checked=0;".
The textbox (after Checkbox3) has an onfocus value of: onfocus="this.form.problem[2].checked=true;selectFields();".
The script works, but Internet Explorer says "Error on page" in the status bar, telling me that something is wrong...

Part II) Form field names
Now, in my code, I use "Checkboxes" as the names for all three checkboxes. However, I need a different name for each one since my php code (which submits the form content to me by email) would overwrite the checkbox values if more than one is checked. Now, different names would require difficult coding, which I don't really know how to do

.

Any help on this would be greatly appreciated.

Cheers and thanks,
SWagner

Lucleonhart · October 26th, 2007, 02:45 AM

Ok man, here is my solution.. i have added some comments, so i hope it is self explaining!

HTML Code:

<html>
<head>

<script type='text/javascript'>

    function checkform(clicked)
    {
        var all_elements = document.theformname.elements;
        
        if(clicked == "radio")
        {
            // check radiobuttons, if one > 0 is check, uncheck all checkboxes
            for(var i=1;i<all_elements.length;i++)
            {
                if(all_elements[i].type == "radio")    // consider only radio elements
                {
                    if(all_elements[i].checked) // if one is checked
                    {
                        // cycle through all checkboxes, and deactivate them
                        for(var j=0;j<all_elements.length;j++)
                        {
                            if(all_elements[j].type == "checkbox")                
                                all_elements[j].checked = false;
                        }
                    }
                }
            }
        }else{
            // Check checkboxes, and select first radiobutton if any is marked
            for(var i=0;i<all_elements.length;i++)
            {
                if(all_elements[i].type == "checkbox") // consider only checkboxes
                    if(all_elements[i].checked) // if one is checked
                        document.theformname.elements[0].checked = true; // select the first radio button
            }        
        }
    }

</script>

</head>
<body>
    <form name='theformname' action=''>
        <p><input type='radio' name='radiobuttons'> Radio1<br />
            <input type='checkbox' name='check1' OnClick="checkform('checkbox');"> Check 1<br />
            <input type='checkbox' name='check2' OnClick="checkform('checkbox');"> Check 1<br />
            <input type='checkbox' name='check3' OnClick="checkform('checkbox');"> Check 1<br />
        </p>
        <p><input type='radio' name='radiobuttons' OnClick="checkform('radio');"> Radio2</p>
        <p><input type='radio' name='radiobuttons' OnClick="checkform('radio');"> Radio3</p>        
    </form>
</body>
</html>

Stuart · October 26th, 2007, 08:49 AM

Great! It seems to be working. How would I clear the textbox though? Same way, just have the code scan for an input field with a certain name?

Lucleonhart · October 26th, 2007, 09:35 AM

O__O Woah! I have totally forgotten that textfield! Sorry. Added it below. It will check the first radiobutton and the last checkbox when you press a key inside. When clicking another radio button, the text will be deleted.

HTML Code:

<html>
<head>

<script type='text/javascript'>

    function checkform(clicked)
    {
        var all_elements = document.theformname.elements;
        
        switch(clicked)
        {
            case "radio":
                // check radiobuttons, if one > 0 is check, uncheck all checkboxes
                for(var i=1;i<all_elements.length;i++)
                {
                    if(all_elements[i].type == "radio")    // consider only radio elements
                    {
                        if(all_elements[i].checked) // if one is checked
                        {
                            // cycle through all checkboxes, and deactivate them
                            for(var j=0;j<all_elements.length;j++)
                            {
                                if(all_elements[j].type == "checkbox")                
                                    all_elements[j].checked = false;
                                    
                                if(all_elements[j].type == "text")                
                                    all_elements[j].value = "";
                            }
                        }
                    }
                }
                break;
            case "checkbox":
                // Check checkboxes, and select first radiobutton if any is marked
                for(var i=0;i<all_elements.length;i++)
                {
                    if(all_elements[i].type == "checkbox" && all_elements[i].checked) // consider only checkboxes
                        document.theformname.elements[0].checked = true; // select the first radio button
                }    
                break;
            case "text":
                if(document.theformname.textfield.value.length > 0) // check the textfield
                {
                    document.theformname.elements[0].checked = true; // select the first radio button
                    document.theformname.elements[3].checked = true; // select the last checkbox
                }
                break;
        }
    }

</script>

</head>
<body>
    <form name='theformname' action=''>
        <p><input type='radio' name='radiobuttons'> Radio1<br />
            <input type='checkbox' name='check1' OnClick="checkform('checkbox');"> Check 1<br />
            <input type='checkbox' name='check2' OnClick="checkform('checkbox');"> Check 1<br />
            <input type='checkbox' name='check3' OnClick="checkform('checkbox');"> Check 1 <input type="text" name="textfield" OnKeyUp="checkform('text');"><br />
        </p>
        <p><input type='radio' name='radiobuttons' OnClick="checkform('radio');"> Radio2</p>
        <p><input type='radio' name='radiobuttons' OnClick="checkform('radio');"> Radio3</p>        
    </form>
</body>
</html>

Stuart · October 26th, 2007, 07:20 PM

Great. Just one more question: is there a way to use onfocus for the textbox instead of onkeyup? I know it makes more sense to use keyup in order to make sure there is something in the textbox, but I think it would look better (user's point of view) if as soon as they click inside the textbox, the first radio and the last checkbox are checked. Then, to make sure that something is in the textbox if the last checkbox is checked, I can use my php validation. OR, I could use onfocus and clear the first radio and the last checkbox if nothing is in the textbox and the user clicks outside the textbox (onblur).

Lucleonhart · October 27th, 2007, 07:33 AM

Sure. Just replace "onkeyup" with "onfocus"!
Have fun!

Stuart · October 27th, 2007, 10:54 AM

I tried to use onfocus, but it doesn't work since there needs to be at least one character in the textbox (according to your code).

Lucleonhart · October 29th, 2007, 05:45 AM

Jeah, if you do not want the test if there is anything in the textbox, then eliminate the condition.
Replace

Code:

if(document.theformname.textfield.value.length > 0) // check the textfield
{
  document.theformname.elements[0].checked = true; // select the first radio button
  document.theformname.elements[3].checked = true; // select the last checkbox
}

with

Code:

document.theformname.elements[0].checked = true; // select the first radio button
document.theformname.elements[3].checked = true; // select the last checkbox

Stuart · November 8th, 2007, 09:55 PM

OK. I used this code to set it all up. I just can't get the php to display an error when the checkbox next to the text field is checked but the text field is empty (What was originally achieved with:

Code:

if(document.theformname.textfield.value.length > 0)

and onkeyup in the text field).
I will post a thread in the php forum about this.
Thanks for all your help!