Resolved select/deselect checkbox one function

durangod · 02-12-2013, 07:34 AM

Hi, i would rather not have buttons to check and uncheck all my checkboxes. I would rather have a single checkbox that when i check it, they all get checked, and when i uncheck it, they all get unchecked.

I have put together several pieces that i found on here, and i can get the check all to work but the deselect all does not work..

here is my javascript

Code:

function selectall(state)
{
 var isChecked=false;
 var all=document.getElementsByName("selbox[]");
 
 if(all)
  { 
    for(var i=0; i < all.length; i++)
    {
      all[i].checked = state;

      if (!all[i].checked)
      {
       all[i].checked = true;
       isChecked = true;
       }//close if
     }//close for loop 

  }else{

        for(var i=0; i < all.length; i++)
        {
         all[i].checked = state;

         if (all[i].checked)
         {
          all[i].checked = false;
          isChecked = false;
          }//close if
        }//close for loop      

      }//close else

         
  if (!isChecked)
  {
  alert ("Please select at least one value");
  return (false);
  }//close if

}//close function selectall

here is the input for the single checkall checkbox

Code:

<input type="checkbox" name="select_all" id="select_all" onClick="return selectall(this.selbox);" />

and here is the input for the array of items checked.

Code:

echo "<input type='checkbox' name='selbox[]' id='selbox' value='$rid' />";

thanks..

Philip M · 02-12-2013, 07:43 AM

Try this:-

Code:

<script type = "text/javascript">
var checked = false;
function checkedAll () {
checked == true? checked = false:checked = true;
var els = document.getElementById("mydiv").getElementsByTagName("input");
var len = els.length;
for (var i = 0; i < len; i++) {
els[i].checked = checked;
}
}
</script>
</head>

<body>
<form id="myform">
<div id = "mydiv">
<input type="checkbox" name="chk1">
<input type="checkbox" name="chk2">
<input type="checkbox" name="chk3">
</div>
<br>
Check/Uncheck All: <input type="checkbox" name="checkall" onclick="checkedAll();">
</form>

The Office Of Fair Trading says that before tax the UK has some of the cheapest fuel in Britain. - Presenter BBC News 24

durangod · 02-12-2013, 07:54 AM

Thanks.

question, im curious the purpose of this part

Code:

.getElementsByTagName("input");

I have seen this a few times and not quite clear if i already have the value by Id then why do i need to get it by name type input. Im just unclear on that part...

Philip M · 02-12-2013, 09:11 AM

Quote:

Originally Posted by durangod

Thanks.

question, im curious the purpose of this part

Code:

.getElementsByTagName("input");

I have seen this a few times and not quite clear if i already have the value by Id then why do i need to get it by name type input. Im just unclear on that part...

We want to get all the elements with the tag "input" within the div with the id "mydiv" (and not those within some other div). OK?

durangod · 02-12-2013, 01:47 PM

The problem is that i am not doing a div grouping, i am doing an array. So no that did not work, again the checkall does but the uncheck does not.

I have have something that does work though, let me do some testing on this new idea i have.

durangod · 02-12-2013, 02:32 PM

here is my new attempt, still not working at all now lol..

Code:

function selectAll(el, id)
{
var flag=true;
       var elems = el.form.elements;
       for(var i = 0; i < elems.length; i++)
       {
          if(elems[i].type == "checkbox" && elems[i].id == id) 
          {
            elems[i].checked = flag;
          }
       }

       if (flag) 
       {
       el.value = "Unselect All";
        } else {
                el.value = "Select All";
               }

flag=!flag;

}//close function selectAll

Philip M · 02-12-2013, 03:13 PM

id is a reserved word.

You should avoid giving names or id's to your variables/functions/arguments/forms words which are HTML/JavaScript methods/properties/attributes such as 'name' or 'id' or 'value' or 'test' or 'text' or 'checked' or 'click' or 'href' or 'closed' or 'go' or 'submit' or 'replace' or 'button' or 'radio' or 'parseInt'.

durangod · 02-12-2013, 03:35 PM

Quote:

Originally Posted by Philip M

id is a reserved word.

You should avoid giving names or id's to your variables/functions/arguments/forms words which are HTML/JavaScript methods/properties/attributes such as 'name' or 'id' or 'value' or 'test' or 'text' or 'checked' or 'click' or 'href' or 'closed' or 'go' or 'submit' or 'replace' or 'button' or 'radio' or 'parseInt'.

did not know that, thanks for sharing that. That code by the way using the (el, id) came directly from a script i purchased awhile back so i guess i need to change that to. What is strange is that i copied it exactly with all the input elements and all the pieces of the process and it did not work, but it works in the other script.

There are really only three parts, the js, and two inputs. One input for the option to checkall and the other for the id's (wether its a div or an array) thats why i could not believe this was so hard to make work.

But i did get this to work... here is the code im using, if we can improve on it thats great, but it does work so i wanted to share this to help others.

js part.

Code:

function selectAll()
{
var all=document.getElementsByName('selbox[]');
var optall = document.getElementById('select_all');

         if(optall.value == 'Select All')
         {
            for(var i = 0; i < all.length; i++)
            {
             all[i].checked = true;
             }//close for loop

             optall.value = 'deselect';
                        
         }else{

               for(var i = 0; i < all.length; i++)
               {
                all[i].checked = false;
                }//close for loop

               optall.value = 'Select All';

              }//close else

}//close function selectAll

the select all input checkbox

this is part of what confused me because i could not figure out why we are with passing the value of this in other examples i have found on net when we load the var from the array or div in the js.

we are not passing a value here and it works.

Code:

<input type="checkbox" name="select_all" id="select_all" value="Select All" onClick="selectAll();" />

and lastly the input for the array of row id's

Code:

echo "<input type='checkbox' name='selbox[]' id='selbox' value='$recid' />";

Any improvements u see that need to be done ?

thanks

Philip M · 02-12-2013, 04:05 PM

Quote:

Originally Posted by durangod

Any improvements u see that need to be done ?

If it works then let well alone!

I don't see any obvious improvements.

durangod · 02-12-2013, 09:00 PM

Thanks for your help