asked on

How can I check all items in asp.net checkboxlist control using javascript?

Experts when I click a hyper link I would like to either: check all or un check all items in a asp.net checkboxlist control. I found some javascript that works, but it checks all checkboxs on the form, I just want the items in the checkboxlist. I tried modifying the javascript to just point to the asp.net control, but I am missing something. The commented out code works to check or uncheck all checkboxes.

      <script language="javascript">
      function Select(Select){
      //for (var n=0; n < document.forms[0].length; n++)
      //if (document.forms[0].elements[n].type=='checkbox')
       //document.forms[0].elements[n].checked=Select;
       //return false;
       for (var n=0;n < document.getElementById("chkstations").length; n++)
       (document.getElementById("chkstations").elements[n].checked=Select;
       return false;
       }
            </script>

Html hyperlink to check or uncheck boxes
<a name="station_select"></a>Select <a href="#station_select" onclick="javascript:Select(true)">
All</a> | <a href="#station_select" onclick="javascript:Select(false)">None</a>

craskin

i only know how to do this with a postback (so maybe it's not very useful to you).

For i As Integer = 0 to myCheckBox.Items.Count - 1
     myCheckBox.Items(i).Checked = True
Next

Open in new window

tentavarious

ASKER

I know it can be done with javascript, because I am able to check all asp.net checkboxes, I would like to stick with javascript.

craskin

how about

function selectAll (listId)
{
for (i = 0; index < chkStations.length; i++)
{
var currentCheckBox = chkStations [i];
 
if (currentCheckBox != null)
{
var currentCheckBoxId = currentCheckBox.id;
 
var lastUnderscoreIndex = currentCheckBoxId.lastIndexOf ('_');
var currentCheckBoxIdBaseId =
currentCheckBoxId.substring (0, lastUnderscoreIndex);
 
if (currentCheckBoxIdBaseId == listId)
{
currentCheckBox.checked = true;
}
}
}
}

Open in new window

craskin

wait, that's not gonna work.

try without specifying chkStations in the for loop and just use checkBoxes

ASKER CERTIFIED SOLUTION

Oliver Amaya

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Oliver Amaya

Sorry a little syntax error

// This
var checkBoxList = document.getElementById("checkBoxListID");
 
// Should be
var checkBoxList = document.getElementById(checkBoxListID);

Open in new window

timparis

Hi, I'm trying to do the exact same thing as written up in this post. I'm getting a "Microsoft JScript runtime error: 'null' is null or not an object" error.
checkBoxList in the statement below is being set to null.
var checkBoxList = document.getElementById(checkBoxListID);
I noticed in the page source the id of the input is changed from CheckBoxList1 to
SessionControl_CheckBoxList1_0
Do I need to handle this somehow?
I'm calling the function like this: Select <a href="#" onclick="javascript:Select(true, 'CheckBoxList1')">All</a>
Is that correct?

Thanks.

tentavarious

ASKER

You would need to modify the function to accept another parameter, because I am only passing one you are passing two. Also make sure the control id is correct, javascript, I believe is case sensitive.

timparis

I'm calling the funtion described in the post. Here's my code. An other set of eyes would be helpful, Thanks. I've tried document.getElementByName and document.getElementById same results. CheckBoxList is null.

<asp:CheckBoxList ID="FunctionalCheckBoxList" runat="server"
DataSourceID="LinqFunctionalAreas" DataTextField="functionName"
DataValueField="functionId" RepeatColumns="3" RepeatDirection="Horizontal"
onselectedindexchanged="FunctionalCheckBoxList_SelectedIndexChanged">
</asp:CheckBoxList>

<script language="javascript" type="text/javascript">
function Select(Select, checkBoxListID) {
var checkBoxList = document.getElementByName(checkBoxListID);
var checkBoxes = checkBoxList.getElementsByTagName("input");
for (var i = 0; i < checkBoxes.length; i++) {
checkBoxes[i].checked = Select;
}
}
</script>

Select <a href="#" onclick="javascript:Select(true, 'FunctionalCheckBoxList')">All</a> | <a href="#" onclick="javascript:Select(false, 'FunctionalCheckBoxList')">None</a>