jQuery的 - 複選框標籤點擊不工作

Question

下面是從C＃.NET動態生成HTML樣本： -

<ul class="multiselect-checkboxes clearfix horizontal" id="chkMC"><li onclick="setMcCb(event);"><span class="QRadio"><input type="checkbox" name="ctl03$ctl05$CheckboxChoices0-931336440" id="ctl03_ctl05_CheckboxChoices0-931336440"><label for="ctl03_ctl05_CheckboxChoices0-931336440">1-2 Years</label></span></li><li onclick="setMcCb(event);"><span class="QRadio"><input type="checkbox" name="ctl03$ctl05$CheckboxChoices1-1671570667" id="ctl03_ctl05_CheckboxChoices1-1671570667"><label for="ctl03_ctl05_CheckboxChoices1-1671570667">5-10 Years</label></span></li><li onclick="setMcCb(event);"><span class="QRadio"><input type="checkbox" name="ctl03$ctl05$CheckboxChoices2679786207" id="ctl03_ctl05_CheckboxChoices2679786207"><label for="ctl03_ctl05_CheckboxChoices2679786207">10-12 Years</label></span></li><li onclick="setMcCb(event);"><span class="QRadio"><input type="checkbox" name="ctl03$ctl05$CheckboxChoices3-977631492" id="ctl03_ctl05_CheckboxChoices3-977631492"><label for="ctl03_ctl05_CheckboxChoices3-977631492">12-15 Years</label></span></li><li onclick="setMcCb(event);"><span class="QRadio"><input type="checkbox" name="ctl03$ctl05$CheckboxChoices41547758987" id="ctl03_ctl05_CheckboxChoices41547758987"><label for="ctl03_ctl05_CheckboxChoices41547758987">15-20 Years</label></span></li><li onclick="setMcCb(event);"><span class="QRadio"><input type="checkbox" name="ctl03$ctl05$CheckboxChoices5-1658326960" id="ctl03_ctl05_CheckboxChoices5-1658326960"><label for="ctl03_ctl05_CheckboxChoices5-1658326960">20-21 Years</label></span></li><li onclick="setMcCb(event);"><span class="QRadio"><input type="checkbox" name="ctl03$ctl05$CheckboxChoices6-100787876" id="ctl03_ctl05_CheckboxChoices6-100787876"><label for="ctl03_ctl05_CheckboxChoices6-100787876">22-23 Years</label></span></li><li onclick="setMcCb(event);"><span class="QRadio"><input type="checkbox" name="ctl03$ctl05$CheckboxChoices7122075492" id="ctl03_ctl05_CheckboxChoices7122075492"><label for="ctl03_ctl05_CheckboxChoices7122075492">23-24 Years</label></span></li><li onclick="setMcCb(event);"><span class="QRadio"><input type="checkbox" name="ctl03$ctl05$CheckboxChoices8-1742375481" id="ctl03_ctl05_CheckboxChoices8-1742375481"><label for="ctl03_ctl05_CheckboxChoices8-1742375481">More than that</label></span></li><li><span class="QRadio"><input type="checkbox" name="ctl03$ctl05$CheckboxChoicesOther" id="ctl03_ctl05_CheckboxChoicesOther"><label for="ctl03_ctl05_CheckboxChoicesOther">other</label></span>&nbsp;&nbsp;<input type="text" style="width: 150px;" class="QTextBox" id="ctl03_ctl05_otherText" name="ctl03$ctl05$otherText"></li><li><span class="QRadio"><input type="checkbox" name="ctl03$ctl05$CheckboxChoicesNA" id="ctl03_ctl05_CheckboxChoicesNA"><label for="ctl03_ctl05_CheckboxChoicesNA">plplpl</label></span></li></ul> 

JS方法： -

function setMcCb(e) { 
       if (!e) var e = window.event;        
       var tg = (window.event) ? e.srcElement : e.target; //FF & IE. 
       var j$chk = j$(tg).closest('li').find(':checkbox'); 

       if (j$chk[0] != tg)       
        j$chk.attr('checked', !j$chk.attr('checked')); 
       } 

* 的目的JS方法： -當有人點擊複選框，標籤或li標籤時，我創建了這個javascript，複選框應該切換。 *

* 我的問題： - 當我點擊標籤元素，js不工作。切換沒有發生。請幫我細化js代碼。 *

我做它的工作如下代碼： -

if (!e) var e = window.event;        
        var tg = (window.event) ? e.srcElement : e.target; //FF & IE.      
        //Label click does not toggle the cbx with this JS, so the below processing is skipped by returning false. 
        if (tg.tagName.toUpperCase() == 'LABEL') 
         return false; 

        var j$chk = j$(tg).closest('li').find(':checkbox'); 
        if (j$chk[0] != tg){       
         if(j$chk.attr('checked')) 
          j$chk.removeAttr('checked'); 
         else 
          j$chk.attr('checked', 'checked'); 
         } 

Answer 1

您的問題是在下面的行

j$chk.attr('checked', !j$chk.attr('checked')); 

通話到!j$chk.attr('checked')將返回一個布爾值，然後指定要檢查的值。您應該嘗試：

if(j$chk.attr('checked')) { 
    j$chk.removeAttr('checked'); 
} else { 
    j$chk.attr('checked', 'checked'); 
} 

Answer 2

而是嘗試

if (j$chk[0] != tg)  
    if(!j$chk.attr('checked')){ 
     j$chk.attr('checked', 'checked'); 
    }else { 
     j$chk.removeAttr('checked'); 
    } 
}