javascript - 解决选项标签的 onclick 事件

Question

我的网页上有一个多选下拉菜单和一个允许用户选择列表中所有项目的复选框。

<select id="itemsList" multiple="true" size="3"></select>
<input type="checkbox" id="bSelectAll" onclick="selectAllItems();" />Select all

单击复选框可选择列表中的所有项目。现在，当我单击列表中的一项时，该项目仍处于选中状态，而其他所有项都被取消选择。我想要完全相反的行为。单击某个项目时，应取消选择该项目，而其他所有内容均应保持选中状态。

我知道我们可以通过按住 ctrl 并单击某个项目来获得此行为。但是，要求是它应该在正常点击时发生。

我尝试检查选项标签的 onclick，但它似乎不符合标准，因此只有一部分浏览器支持。

我无法通过使用 select 标记的 onclick 和 onchange 事件来完成此任务。

当未选中复选框时，行为应该是一致的。简而言之，单击选项标签应该始终切换其选择。

如果我使用复选框列表而不是选择框，这将是默认行为。但是，有什么办法可以用我现在拥有的东西来做到这一点吗？

Answer 1

一种方法是使用数组来记录已选择/取消选择的内容，并在每次用户单击时重建您的选项。

js:

var record = [];

var selectAllItems = function (target) {
    //toggle all options here and keep a record in "record" array ...
}

var doTheMagic = function(target){
    record[target.selectedIndex] = ! record[target.selectedIndex];
    rebuildOptions();

}

var rebuildOptions = function (){
    var itemsList = document.getElementById('itemsList');
    for (var i=0;i<record.length;i++){
            itemsList.options[i].selected = record[i];
    }

}

html:

<select id="itemsList" multiple="true" size="3"  onclick="doTheMagic(this)">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="audi">Audi</option>
</select>
<input type="checkbox" id="bSelectAll" onclick="selectAllItems(this)" />Select all

jsFiddle 演示:http://jsfiddle.net/3A9Xs/3/