1. 首頁
  2. 問答
  3. obout checkboxlist選擇所有項目（與可怕的生成的html）

obout checkboxlist選擇所有項目（與可怕的生成的html）

2011-07-26 90 views
0

我想爲這個組合框中的複選框寫一個Javascript「全選」方法。obout checkboxlist選擇所有項目（與可怕的生成的html）

我正在使用obout第三方控件組合框。這個控制生成的HTML如下。

這是我試圖用來促進「全選」行爲的方法，但這不起作用。

用Firebug，我知道以下幾點：

  • 文件被加載的頁面斷點第一 行jQuery的功能被擊中
  • 的方法不點火時 「全選」複選框被點擊，如方法斷點 打不

我也有n jQuery的方法試過類層次結構的不同組合o成功。你能給些建議麼？

在此先感謝。

$(function() { 
    $(".item :checkbox").eq(0).click(function() { 
     var toggle = this.checked; 
     $(".item :checkbox").attr("checked", toggle); 
    }); 
});

和HTML通過控制產生：

<div id="cphMain_CentralChecks_ob_CboCentralChecksMainContainer" class="ob_iCboITCN" style="width:300px;"><div><div class="ob_iCboTL"></div><div class="ob_iCboTR"></div><div class="ob_iCboTC"><div><input name="ctl00$cphMain$CentralChecks$ob_CboCentralChecksTB" type="text" value="Alberta Central" readonly="readonly" id="cphMain_CentralChecks_ob_CboCentralChecksTB" class="ob_iCboIE" autocomplete="off" /></div><input name="ctl00$cphMain$CentralChecks$ob_CboCentralChecksSIS" type="hidden" id="cphMain_CentralChecks_ob_CboCentralChecksSIS" value="1" /></div></div><div id="cphMain_CentralChecks_ob_CboCentralChecksItemsContainer" class="ob_iCboIC" style="width:300px;display:none;"><div class="ob_iCboICH"><div class="ob_iCboICHCL"></div><div class="ob_iCboICHCM"></div><div class="ob_iCboICHCR"></div></div><div class="ob_iCboICB"><div class="ob_iCboICBL"><div class="ob_iCboICBLI"></div></div><ul class="ob_iCboICBC" style="min-height:;"><li><span>Select All</span><b> 
     <div class="item"> 
      <span> 
       <div id="ob_iCOboutCheckBox1Container" class="ob_iCCUN"><div class="ob_iCChk"></div><div class="ob_iCTxt"></div><span class="ob_iCChkEl"><input id="ctl00$cphMain$CentralChecks$ctl24$OboutCheckBox1" type="checkbox" name="ctl00$cphMain$CentralChecks$ctl24$OboutCheckBox1" /></span><input type="hidden" name="OboutCheckBox1StateCont" id="OboutCheckBox1StateCont" value="0" /><div class="ob_iCallbackScript" style="display:none;"></div></div> 
      </span> 
      <div class="label"> 
       Select All 
      </div> 
     </div> 
    </b><i>0</i></li><li><span>Alberta</span><b> 
     <div class="item"> 
      <span> 
       <div id="ob_iCcphMain_CentralChecks_ctl30_OboutCheckBox1Container" class="ob_iCCUN"><div class="ob_iCChk"></div><div class="ob_iCTxt"></div><span class="ob_iCChkEl"><input id="ctl00$cphMain$CentralChecks$ctl30$OboutCheckBox1" type="checkbox" name="ctl00$cphMain$CentralChecks$ctl30$OboutCheckBox1" checked="checked" /></span><input type="hidden" name="OboutCheckBox1StateCont" id="OboutCheckBox1StateCont" value="0" /><div class="ob_iCallbackScript" style="display:none;"></div></div> 
      </span> 
      <div class="label">Alberta</div> 
     </div> 
    </b><i>1</i></li><li><span>Central 1</span><b> 
     <div class="item"> 
      <span> 
       <div id="ob_iCcphMain_CentralChecks_ctl36_OboutCheckBox1Container" class="ob_iCCUN"><div class="ob_iCChk"></div><div class="ob_iCTxt"></div><span class="ob_iCChkEl"><input id="ctl00$cphMain$CentralChecks$ctl36$OboutCheckBox1" type="checkbox" name="ctl00$cphMain$CentralChecks$ctl36$OboutCheckBox1" /></span><input type="hidden" name="OboutCheckBox1StateCont" id="OboutCheckBox1StateCont" value="0" /><div class="ob_iCallbackScript" style="display:none;"></div></div> 
      </span> 
      <div class="label">Central 1</div> 
     </div> 
    </b><i>2</i></li><li><span>SaskCentral</span><b> 
     <div class="item"> 
      <span> 
       <div id="ob_iCcphMain_CentralChecks_ctl42_OboutCheckBox1Container" class="ob_iCCUN"><div class="ob_iCChk"></div><div class="ob_iCTxt"></div><span class="ob_iCChkEl"><input id="ctl00$cphMain$CentralChecks$ctl42$OboutCheckBox1" type="checkbox" name="ctl00$cphMain$CentralChecks$ctl42$OboutCheckBox1" /></span><input type="hidden" name="OboutCheckBox1StateCont" id="OboutCheckBox1StateCont" value="0" /><div class="ob_iCallbackScript" style="display:none;"></div></div> 
      </span> 
      <div class="label">SaskCentral</div> 
     </div> 
    </b><i>3</i></li><li><span>Manitoba</span><b> 
     <div class="item"> 
      <span> 
       <div id="ob_iCcphMain_CentralChecks_ctl48_OboutCheckBox1Container" class="ob_iCCUN"><div class="ob_iCChk"></div><div class="ob_iCTxt"></div><span class="ob_iCChkEl"><input id="ctl00$cphMain$CentralChecks$ctl48$OboutCheckBox1" type="checkbox" name="ctl00$cphMain$CentralChecks$ctl48$OboutCheckBox1" /></span><input type="hidden" name="OboutCheckBox1StateCont" id="OboutCheckBox1StateCont" value="0" /><div class="ob_iCallbackScript" style="display:none;"></div></div> 
      </span> 
      <div class="label">Manitoba</div> 

     </div> 
    </b><i>4</i></li><li><span>New Brunswick</span><b> 
     <div class="item"> 
      <span> 
       <div id="ob_iCcphMain_CentralChecks_ctl54_OboutCheckBox1Container" class="ob_iCCUN"><div class="ob_iCChk"></div><div class="ob_iCTxt"></div><span class="ob_iCChkEl"><input id="ctl00$cphMain$CentralChecks$ctl54$OboutCheckBox1" type="checkbox" name="ctl00$cphMain$CentralChecks$ctl54$OboutCheckBox1" /></span><input type="hidden" name="OboutCheckBox1StateCont" id="OboutCheckBox1StateCont" value="0" /><div class="ob_iCallbackScript" style="display:none;"></div></div> 
      </span> 
      <div class="label">New Brunswick</div> 
     </div> 
    </b><i>6</i></li><li><span>Nova Scotia</span><b> 
     <div class="item"> 
      <span> 
       <div id="ob_iCcphMain_CentralChecks_ctl60_OboutCheckBox1Container" class="ob_iCCUN"><div class="ob_iCChk"></div><div class="ob_iCTxt"></div><span class="ob_iCChkEl"><input id="ctl00$cphMain$CentralChecks$ctl60$OboutCheckBox1" type="checkbox" name="ctl00$cphMain$CentralChecks$ctl60$OboutCheckBox1" /></span><input type="hidden" name="OboutCheckBox1StateCont" id="OboutCheckBox1StateCont" value="0" /><div class="ob_iCallbackScript" style="display:none;"></div></div> 
      </span> 
      <div class="label">Nova Scotia</div> 
     </div> 
    </b><i>7</i></li><li><span>Prince Edward Island</span><b> 
     <div class="item"> 
      <span> 
       <div id="ob_iCcphMain_CentralChecks_ctl66_OboutCheckBox1Container" class="ob_iCCUN"><div class="ob_iCChk"></div><div class="ob_iCTxt"></div><span class="ob_iCChkEl"><input id="ctl00$cphMain$CentralChecks$ctl66$OboutCheckBox1" type="checkbox" name="ctl00$cphMain$CentralChecks$ctl66$OboutCheckBox1" /></span><input type="hidden" name="OboutCheckBox1StateCont" id="OboutCheckBox1StateCont" value="0" /><div class="ob_iCallbackScript" style="display:none;"></div></div> 
      </span> 
      <div class="label">Prince Edward Island</div> 
     </div> 
    </b><i>8</i></li><li><span>Newfoundland and Labrador</span><b> 
     <div class="item"> 
      <span> 
       <div id="ob_iCcphMain_CentralChecks_ctl72_OboutCheckBox1Container" class="ob_iCCUN"><div class="ob_iCChk"></div><div class="ob_iCTxt"></div><span class="ob_iCChkEl"><input id="ctl00$cphMain$CentralChecks$ctl72$OboutCheckBox1" type="checkbox" name="ctl00$cphMain$CentralChecks$ctl72$OboutCheckBox1" /></span><input type="hidden" name="OboutCheckBox1StateCont" id="OboutCheckBox1StateCont" value="0" /><div class="ob_iCallbackScript" style="display:none;"></div></div> 
      </span> 
      <div class="label">Newfoundland and Labrador</div> 
     </div> 
    </b><i>9</i></li><li><span>l'Ontario</span><b> 
     <div class="item"> 
      <span> 
       <div id="ob_iCcphMain_CentralChecks_ctl78_OboutCheckBox1Container" class="ob_iCCUN"><div class="ob_iCChk"></div><div class="ob_iCTxt"></div><span class="ob_iCChkEl"><input id="ctl00$cphMain$CentralChecks$ctl78$OboutCheckBox1" type="checkbox" name="ctl00$cphMain$CentralChecks$ctl78$OboutCheckBox1" /></span><input type="hidden" name="OboutCheckBox1StateCont" id="OboutCheckBox1StateCont" value="0" /><div class="ob_iCallbackScript" style="display:none;"></div></div> 
      </span> 
      <div class="label">l'Ontario</div> 
     </div> 
    </b><i>10</i></li> 
    </ul><div class="ob_iCboICBR"><div class="ob_iCboICBRI"></div></div></div><div class="ob_iCboICF"><div class="ob_iCboICFCL"></div><div class="ob_iCboICFCM"></div><div class="ob_iCboICFCR"></div></div></div><input name="ctl00$cphMain$CentralChecks$ctl00$cphMain$CentralChecks" type="hidden" id="cphMain_CentralChecks_ctl00$cphMain$CentralChecks" value="1" /><div class="ob_iCallbackScript" style="display:none;"></div> 
</div>

來源

2011-07-26 splatto

+0

只是爲了確認，是通過JS在服務器或客戶端上創建的HTML？ – Tomalak

+0

我相信這是服務器端，但現在我第二次猜測。我如何確認？ – splatto

+0

那麼，如果它在網頁的源代碼中，它就創建了服務器端（這是我的懷疑）。 – Tomalak

回答

0

試試這個

$(function() { 
    $(document.body).delegate(".ob_iCboITCN input:checkbox:first", "click", function() { 
     var toggle = this.checked; 
     $(this).closest(".ob_iCboITCN").find("input:checkbox").each(function(){ 

      $(this).attr("checked", toggle); 
     }) 
    }); 
});

來源

2011-07-26 15:42:06 ShankarSangoli

+0

不幸的是，這並不是它 – splatto

+0

試試我編輯的答案。 – ShankarSangoli

+0

不幸的是，仍然沒有骰子。使用Firebug我可以看到在頁面加載時擊中的斷點，但是當我選擇'全選'項目時，事件不會被觸發 – splatto

1

這對我的作品與你的樣品。

$(function() { 
    $(".ob_iCboITCN input:checkbox:first").click(function() { 
     $(this).closest(".ob_iCboITCN") 
     .find("input:checkbox").attr("checked", this.checked); 
    }); 
});

見this jsFidlde，這是你的代碼SANS這是灑了這一切的display:none。

實際上，這是對@ShankarSangoli's code的變化，對我來說同樣適用。

來源

2011-07-27 15:13:56 Tomalak

+0

我看到它在js小提琴中工作，但出於某種原因，我無法在Visual Studio中使用它。我的功能斷點在頁面載入時被點擊，但當點擊該項時不會觸發。大夥們有一個外部按鈕的工作示例，但不包括組合框本身的項目。從組合框內控制它不可能嗎？ 以下是他們在線的示例：http://www.obout.com/combobox/integration/aspnet_integration_select_oboutcheckboxes.aspx – splatto

+0

@splatto：問題是單擊複選框時發生的其他JavaScript代碼會干擾。它取消了事件傳播，因此你的jQuery函數從不會看到'click'事件。 – Tomalak

+0

...但它還提供了一個'selectAllItems（）'和一個'deselectAllItems（）'，它們完全符合你想要的。也許你應該專注於這些功能，而不是試圖找到一種方式與jQuery？ – Tomalak

相關問題

 相關問題