的javascript

Question

我有一组复选框，其中包含“无”选项。如果单击“无”，则应取消选中复选框的其余部分。如果单击该组的其余部分中的一个或多个，则应取消选中“无”。以下适用于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

问题是由name-attribute中的方括号强制的。

尝试将其作为选择器：

$("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)。

此外，您的选择器需要根据Molle博士的解决方案进行更改。

jsFiddle

我的jQuery函数在IE8中运行，但不在FF3.6.11中运行。为什么？

的javascript

HTML

2 个答案: