моя функция jQuery работает в IE8, но не в FF3.6.11.Зачем?

Question

У меня есть набор флажков, которые включают «Нет» в качестве опции.Если щелкнуть «None», оставшаяся часть флажка должна быть снята.Если щелкнуть один или несколько оставшихся наборов, флажок «Нет» следует снять.Следующее работает в IE8.В FF3.6.11 ничего не получается.Как я могу это исправить?

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

Проблема вызвана квадратными скобками внутри атрибута имени.

Попробуйте это как селектор:

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

(одинарные кавычки, окружающие значение атрибута, имеют значение)

Answer 2

Измените свою функцию следующим образом:

function checkToggle() { 
    var cur_chkbox=$(this);
    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);
    }
}

Клик по какой-то причине не отправлял событие, поэтому мы можем использовать $(this) вместо $(event.target).

Кроме того, ваши селекторы должны были быть изменены в соответствии с решением доктора Молл.

jsFiddle