多重選擇上

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