Why checkboxes in forms are emulated


If you have ever investigated the Primefaces datatable selection component you will find that the check boxes are not true html checkboxes but emulated with images. The code that is generated by the component looks similar to this.

<div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
   <span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span>

Why isn’t it making true HTML checkboxes?

The reason for this is implementation all has to do with caching. When a check box is formed in JSF or any other language for that matter it is given a name. If you were to use a JSF datatable and add a checkbox to each row with the same name it would generate the following in each row:

<input type="checkbox" name="myForm:0">
<input type="checkbox" name="myForm:1">

The issue with this is that these names can be reused. If you were to check myForm:0 , then perform an ajax event that removes the selected checkbox item from the list. Then browser would have no recognition of the item being removed. The browser cache will still believe that myForm:0 is checked. This is why the solution multiple checkboxes on the page is to emulate then with CSS.

What if I have to use true HTML checkboxes?

If you MUST use real input checkboxes then your solution is to disable caching on your browser. This can be accomplished using a web filter and modifying response headers.