Question

I’ve got a set of checkboxes that includes ‘None’ as an option. If ‘None’ is clicked the rest of the checkbox set should be unclicked. If one or more of the rest of the set is clicked, ‘None’ should be unchecked. The following works in IE8. It fails silently in FF3.6.11. How can I fix it?

javascript

// go through <table class='checktoggle'> and add the click event "checkToggle"
// to all the <input type='checkbox'>s
$(document).ready(function() {
    $("table.checktoggle").find('input:checkbox').click(checkToggle);
});

function checkToggle(event) { 
    var cur_chkbox=$(event.target);
    if (cur_chkbox.val()==0) { //if clicked "None", uncheck the rest of the set
        $("input:checkbox[name^="+cur_chkbox.attr('name')+"]").filter(function(value){ return value!=0;}).attr('checked',false);
    } else { //else unclick "None"
        $("input:checkbox[name^="+cur_chkbox.attr('name')+"]").filter(function(value){ return value==0;}).attr('checked',false);
    }
}

HTML

<table id="perm_table" class="checktoggle">
    <tr >
        <th>Permission</th>
        <th>none</th>
        <th>view</th>
        <th>use</th>
        <th>add</th>
        <th>edit</th>
        <th>delete</th>
 
    </tr>
    <tr>
        <td>location</td><td><input type='checkbox' name='location[]' id='location0' value='0'/></td>
        <td><input type='checkbox' name='location[]' id='location1' value='1' checked="yes"  /></td>
        <td><input type='checkbox' name='location[]' id='location2' value='2'/></td>
        <td><input type='checkbox' name='location[]' id='location4' value='4'/></td>
        <td><input type='checkbox' name='location[]' id='location8' value='8'/></td>
        <td><input type='checkbox' name='location[]' id='location16' value='16'/></td>
</tr>
<tr>
        <td>watersystem</td><td><input type='checkbox' name='watersystem[]' id='watersystem0' value='0'   />
        <td><input type='checkbox' name='watersystem[]' id='watersystem1' value='1' checked="yes"/></td>
        <td><input type='checkbox' name='watersystem[]' id='watersystem2' value='2'/></td>
        <td><input type='checkbox' name='watersystem[]' id='watersystem4' value='4'/></td>
        <td><input type='checkbox' name='watersystem[]' id='watersystem8' value='8'/></td>
        <td><input type='checkbox' name='watersystem[]' id='watersystem16' value='16'/></td>
</table>

Answer 1

The issue is forced by the square brackets inside the name-attribute.

Try this as selector:

$("input:checkbox[name^='"+cur_chkbox.attr('name')+"']")

(the single-quotes surrounding the attribute-value make the difference )