[SOLVED] Automatic Checkbox/Radio Button Checking

Stuart · #1 Oct 25th, 2007, 23:54

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: Select all

() 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: Select all

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 · #2 Oct 26th, 2007, 06:45

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

HTML: Select all

<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 · #3 Oct 26th, 2007, 12:49

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 · #4 Oct 26th, 2007, 13:35

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: Select all

<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 · #5 Oct 26th, 2007, 23:20

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 · #6 Oct 27th, 2007, 11:33

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

Stuart · #7 Oct 27th, 2007, 14:54

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 · #8 Oct 29th, 2007, 08:45

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

Code: Select all

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: Select all

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

Stuart · #9 Nov 9th, 2007, 01:55

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: Select all

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!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Automatic Button 'Looping' for Navigation	starrzo	JavaScript Forum	2	Apr 4th, 2008 14:38
[SOLVED] Selected radio button value	Pugger	JavaScript Forum	8	Nov 3rd, 2007 12:16
[SOLVED] Radio Button Response! :(	jahphill	PHP Forum	33	Oct 25th, 2007 22:15
[SOLVED] large radio button form submit	chriscant	JavaScript Forum	7	Oct 25th, 2007 09:03
automatic pop-up when click on a radio button	joshcxa	JavaScript Forum	2	Aug 1st, 2006 06:06

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
[SOLVED] Automatic Checkbox/Radio Button Checking