多重选择上

Question

我有一个多重选择的元素被点击时，和第一个元素类sel-all等 具有sel-child

<select multiple="multiple"> 
    <option class="sel-all">All</option> 
    <option class="sel-child">UsernameOne</option> 
    <option class="sel-child">UsernameTwo</option> 
    <option class="sel-child">UsernameThree</option> 
    <option class="sel-child">UsernameFour</option> 
</select> 

我想要实现什么不取消，

当我点击sel-all元素，应选择所有元素并将值更改为Deselect All 和sel-all类将被删除，并且将添加sel-del。

当单击sel-all元素时，则所有元素选项都将被取消选中并且自身。

而且现在.. delselecting不工作..

http://jsfiddle.net/ucBtL/1/

Answer 1

你应该在这里使用代表团因此当动态添加的元素，处理程序委派仍然有效。顺便说一句，元件选择器被过滤为代表的水平，所以你的切换类逻辑尊重：

{refactorized代码并使用.prop（）而不是.attr（）为属性选择}

http://jsfiddle.net/ucBtL/3/

$('select').on('click','.sel-all',function(){ 
console.log("element is clicked"); 

    // select all sel-child element 
    $(".sel-child").prop('selected', 'selected'); 
    // remove current selection on sel-all 
    $(this).prop('selected', false).text('Deselect All').toggleClass("sel-del sel-all");  

}); 

$('select').on('click','.sel-del',function(){ 
console.log("element is clicked"); 

    // unselect all sel-child element 
    $(".sel-child").prop('selected', false); 
    // remove current selection on sel-all 
    $(this).prop('selected', false).text('All').toggleClass("sel-all sel-del");  

}); 

Answer 2

事件处理程序附加到处理程序绑定时存在的元素，稍后更改元素类不会将事件处理程序附加到该元素。取而代之的将事件委托给父母的，你可以使用已连接到该元素的点击功能，并且在两种状态之间切换：

$(".sel-all").on('click', function(){ 
    $(this).prop('selected', false) 
      .toggleClass("sel-del sel-all") // you can remove this, not needed 
      .text(function() { 
       return $(this).text() == 'All' ? 'Deselect All' : 'All'; 
      }).siblings().prop('selected', $(this).text() != 'All'); 
}); 

FIDDLE