Jump to content

Check all and Uncheck all - What am I doing wrong?

TeddyKiller

By TeddyKiller
in Javascript Help

 Share

Recommended Posts

TeddyKiller Advanced Member

TeddyKiller

Posted
Posted 

<script>
<!-- Begin
function checkAll(field)
{
for (i = 0; i < field.length; i++)
    field[i].checked = true ;
}

function uncheckAll(field)
{
for (i = 0; i < field.length; i++)
    field.checked = false ;
}
//  End -->
</script>

<form name="myform" action=""><input name="list" type="checkbox" value="" /></form>
<a href="#" name="CheckAll" onClick="checkAll(document.myform.list)">Check All</a> - <a href="#" name="UnCheckAll" onClick="uncheckAll(document.myform.list)">Uncheck All</a>
[/i]

 

When I click uncheckall or checkall it doesn't work. It's just dead, I can't put a value in the checkbox eg: 1, 2, 3, 4, 5 etc because it's echo'd out in PHP and it's with a display of messages, so it can be up to maximum in the database plus its in a while function so yeah.

 

Any help?

thanks

Psycho Prolific Member

Psycho

Posted
Posted

OK, I'm not sure what your problem is. As long as all the fields are named "list" (and not "list[]") then it should work.

 

FYI: When appending [] to a field name (e.g. "name[]") the field is handled as an array in PHP as "name" (without the brackets). but in JS, the array element is literally "name[]" (with the brackets).

 

One other possible problem is that code would not work if there was only one checkbox. Since I expect these are created dynamically there is a possibility that there may be a single checkbox in some situations.

 

I would also not create two functions to check/uncheck. Just create a single function and pass a parameter.

 

Here is some working code for you to work with:

<html> 
<head>

<script type="text/javascript">

function checkAll(formName, fieldName, state)
{
    var checkObjs = document.forms[formName].elements[fieldName];

    //In case there is only one checkbox
    if (!checkObjs.length)
    {
        checkObjs.checked = state;
        return;
    }
    //When there are multiple checkboxes
    for(var i=0; i<checkObjs.length; i++)
    {
        checkObjs[i].checked = state;
    }
    return;
}

</script>

</head> 
<body> 

<form name="myform">
<input type="checkbox" name="list" value="1" /> One<br />
<input type="checkbox" name="list" value="2" /> Two<br />
<input type="checkbox" name="list" value="3" /> Three<br />
<input type="checkbox" name="list" value="4" /> Four<br />
<br />
<a href="#" onclick="checkAll('myform', 'list[]', true);">Check All</a>
<a href="#" onclick="checkAll('myform', 'list[]', false);">Uncheck All</a>
</form>

</body>
</html>

Psycho Prolific Member

Psycho

Posted
Posted

list[] didn't work, but list, did.

 

Yeah, I was cleaning up some things when I finished up testing that code. The intent was for the checkbox fields to be named "name[]" so they could be picked up as an array by the procfessing page. If you leave them as "name" you will only get the value of the last checked value in the receiving page.

 

To address your second request, I don't think that makes much sense. Assume the user clicks the "Check All" link. All the checkboxes get checked and the link changes to "Uncheck All". So far, so good. But, what if the use then manually unchecks only one of the options? Shouldn't there be a "Check All" option at that point? If not, what happens when the user then manually unchecks each individual field one-by-one and the "Uncheck All" option is displayed and they are all already unchecked? You would have to monitor every single individual checkbox selection to detemine what to show. Doesn't seem worthwhile, or logical, to me.

 

But, since you ask and I am bored:

<html> 
<head>

<script type="text/javascript">

function checkAll(formName, fieldName, state)
{
    var checkObjs = document.forms[formName].elements[fieldName];

    if (!checkObjs.length)
    {
        //There is only one checkbox
        checkObjs.checked = state;
    }
    else
    {
        //There are multiple checkboxes
        for(var i=0; i<checkObjs.length; i++)
        {
            checkObjs[i].checked = state;
        }
    }
    disableCheckLinks((state)?'checkAll':'checkNone');
    return;
}

function disableCheckLinks(optionID)
{
    document.getElementById('checkAll').style.visibility  = (optionID=='checkAll')  ? 'hidden' : '';
    document.getElementById('checkNone').style.visibility = (optionID=='checkNone') ? 'hidden' : '';
    return;
}

function checkState(formObj, fieldName)
{
    var checkObjs  = formObj.elements[fieldName];
    var firstState = checkObjs[0].checked;
    for(var i=0; i<checkObjs.length; i++)
    {
        if (checkObjs[i].checked != firstState)
        {
            //All checkboxes are not the same, enable both links
            disableCheckLinks();
            return;
        }
    }
    //All checkboxes are the same, enable one link
    disableCheckLinks((firstState)?'checkAll':'checkNone');
    return;
}

</script>

</head> 
<body> 

<form name="myform">
<input type="checkbox" name="list[]" value="1" onclick="checkState(this.form, 'list[]');" /> One<br />
<input type="checkbox" name="list[]" value="2" onclick="checkState(this.form, 'list[]');" /> Two<br />
<input type="checkbox" name="list[]" value="3" onclick="checkState(this.form, 'list[]');" /> Three<br />
<input type="checkbox" name="list[]" value="4" onclick="checkState(this.form, 'list[]');" /> Four<br />
<br />
<a href="#" id="checkAll" onclick="checkAll('myform', 'list[]', true);">Check All</a>
<a href="#" id="checkNone" onclick="checkAll('myform', 'list[]', false);">Uncheck All</a>
</form>

</body>
</html>

TeddyKiller Advanced Member

TeddyKiller

Posted
  • Author
Posted

Thanks, it does a similar job. However.. the links go from side to side. How can I keep them in 1 position? Also when its loaded, it displays both links. How would I stop this? And even if a few links are clicked, how can I set it so that it doesn't show uncheck all, until all links are clicked?

Psycho Prolific Member

Psycho

Posted
Posted

Are you even making an attempt at implementing those changes? Your response was made only seven minutes after my post. This is a "help" forum you know.

 

<html> 
<head>

<script type="text/javascript">

function checkAll(formName, fieldName, state)
{
    var checkObjs = document.forms[formName].elements[fieldName];

    if (!checkObjs.length)
    {
        //There is only one checkbox
        checkObjs.checked = state;
    }
    else
    {
        //There are multiple checkboxes
        for(var i=0; i<checkObjs.length; i++)
        {
            checkObjs[i].checked = state;
        }
    }
    disableCheckLinks((state)?'checkAll':'checkNone');
    return;
}

function disableCheckLinks(optionID)
{
    document.getElementById('checkAll').style.display  = (optionID=='checkAll')  ? 'none' : '';
    document.getElementById('checkNone').style.display = (optionID=='checkNone') ? 'none' : '';
    return;
}

function checkState(formObj, fieldName)
{
    var checkObjs  = formObj.elements[fieldName];
    for(var i=0; i<checkObjs.length; i++)
    {
        if (!checkObjs[i].checked)
        {
            //At least one checkbox is unchecked
            disableCheckLinks('checkNone');
            return;
        }
    }

    //All checkboxes are checked
    disableCheckLinks('checkAll');
    return;
}

function initCheckBox()
{
    checkState(document.forms['myform'], 'list[]');
}

window.onload = initCheckBox;
</script>

</head>
<body> 

<form name="myform">
<input type="checkbox" name="list[]" value="1" onclick="checkState(this.form, 'list[]');" /> One<br />
<input type="checkbox" name="list[]" value="2" onclick="checkState(this.form, 'list[]');" /> Two<br />
<input type="checkbox" name="list[]" value="3" onclick="checkState(this.form, 'list[]');" /> Three<br />
<input type="checkbox" name="list[]" value="4" onclick="checkState(this.form, 'list[]');" /> Four<br />
<br />
<a href="#" id="checkAll" onclick="checkAll('myform', 'list[]', true);" style="display:none;">Check All</a>
<a href="#" id="checkNone" onclick="checkAll('myform', 'list[]', false);" style="display:none;">Uncheck All</a>
</form>

</body>
</html>

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.