Checkbox event handling

[Ganesh R <rg...@gmail.com>]

Apache click - Beginner.

I have a "Select All" check box and list of check boxes below. Clicking on
"Select All" should select all of them below and unchecking it should
uncheck all, basic scripting (like in gmail).

Here is how i am trying to achieve it.

selectAllCheckBox.setAttribute("onclick", "selectOne.checked = true;
selectTwo.checked = true; selectThree.checked = true");

checkBox1.setAttribute("onclick", "selectAll.checked = false;");
checkBox2.setAttribute("onclick", "selectAll.checked = false;");
checkBox3.setAttribute("onclick", "selectAll.checked = false;");

Is there a more proficient way to do this?

Re: Checkbox event handling

[rganesh84 <rg...@gmail.com>]

Thank you very much Bob!! that really helps.. 



--
View this message in context: http://click.1134972.n2.nabble.com/Checkbox-event-handling-tp7578362p7578364.html
Sent from the click-user mailing list archive at Nabble.com.

Re: Checkbox event handling

[Bob Schellink <sa...@gmail.com>]

Hi Ganesh,

Most sites today use some sort of JavaScript library instead of JavaScript directly. These libraries 
are very good at manipulating the dom, but also hide cross browser issues. Example libraries 
include: jQuery, Dojo, Mootools, Prototype etc.

As an example, using jQuery, one could use the following to check all boxes:

In Java set the Select All Checkbox ID:
   selectAllCheckBox.setId("selectAll");

Also give your Form an ID:
form.setId("myForm");

In your template include jQuery:

<script src="js/jquery.1.6.3.js 
<view-source:http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js>"></script>

And then the JavaScript snippet:

<script>

||  $(document).ready(function() {|

     $('#selectAll').click(function(){|

|       var  status=  $(this).prop("checked");|

|      $('#myForm input:checkbox').prop('checked',status);
});

});|

</script>

Kind regards

Bob


On 2013/04/13 15:39, Ganesh R wrote:
> Apache click - Beginner.
>
> I have a "Select All" check box and list of check boxes below. Clicking on "Select All" should 
> select all of them below and unchecking it should uncheck all, basic scripting (like in gmail).
>
> Here is how i am trying to achieve it.
>
> selectAllCheckBox.setAttribute("onclick", "selectOne.checked = true; selectTwo.checked = true; 
> selectThree.checked = true");
>
> checkBox1.setAttribute("onclick", "selectAll.checked = false;");
> checkBox2.setAttribute("onclick", "selectAll.checked = false;");
> checkBox3.setAttribute("onclick", "selectAll.checked = false;");
>
> Is there a more proficient way to do this?