如何制作HTML多重选择行为,如控制按钮始终按下

Question

我有一个我正在处理的Web应用程序,它需要一个HTML多选元素,就像控制键一直处于按下状态一样.即单击选项将切换是否选中.

我已经尝试了各种Jquery事件绑定,但看起来标准的HTML多选行为在Jquery绑定事件触发之前执行,使得几乎不可能简单地拦截事件并修改标准行为.

我怎样才能使单击会切换单个选项的选择？

Answer 1

试试吧.您可以将选项值存储在对象中,并使用单击操作更新对象,然后将更改应用于选择.

演示

http://jsfiddle.net/iambriansreed/BSdxE/

HTML

<select class="select-toggle" multiple="multiple">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>?

JavaScript的

$('.select-toggle').each(function(){    
    var select = $(this), values = {};    
    $('option',select).each(function(i, option){
        values[option.value] = option.selected;        
    }).click(function(event){        
        values[this.value] = !values[this.value];
        $('option',select).each(function(i, option){            
            option.selected = values[option.value];        
        });    
    });
});?

Answer 2

您可能需要考虑一个更简单的解决方案,例如使用其overflow属性设置为scroll的div内的复选框列表.这对你来说可能更好.得到一个下拉来做你所要求的有点涉及.

例如,请看这个小提琴

HTML

<div id="container">
    <label><input type="checkbox" name="test" value="1" />Option 1</label>
    <label><input type="checkbox" name="test" value="2" />Option 2</label>
    <label><input type="checkbox" name="test" value="3" />Option 3</label>
    <label><input type="checkbox" name="test" value="4" />Option 4</label>
    <label><input type="checkbox" name="test" value="5" />Option 5</label>
    <label><input type="checkbox" name="test" value="6" />Option 6</label>
    <label><input type="checkbox" name="test" value="7" />Option 7</label>
    <label><input type="checkbox" name="test" value="8" />Option 8</label>
    <label><input type="checkbox" name="test" value="9" />Option 9</label>
    <label><input type="checkbox" name="test" value="10" />Option 10</label>
    <label><input type="checkbox" name="test" value="11" />Option 11</label>
    <label><input type="checkbox" name="test" value="12" />Option 12</label>
</div>

CSS

label{display:block;}
#container{height:100px;width:200px;overflow:scroll;}