I'm trying to write a Javascript "Select All" method for the checkboxes in this combobox.
I'm using the obout third party control combobox. The HTML generated by this contorl is below.
This is the method I am trying to use to facilitate the 'select all' behaviour, but this is not working.
Using Firebug, I do know the following:
- The file is being loaded with the page as breakpoints on the first line of the jquery function are hit
- The method is not firing when the 'select all' checkbox is clicked, as breakpoints in the method are not hit
I've also tried different combinations of class hierarchy in the jquery method with no success. Can you please advise?
Thanks in advance.
$(function () {
$(".item :checkbox").eq(0).click(function () {
var toggle = this.checked;
$(".item :checkbox").attr("checked", toggle);
});
});
And the HTML being generated by the control:
<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_i开发者_JAVA百科CTxt"></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>
This works for me with your sample.
$(function() {
$(".ob_iCboITCN input:checkbox:first").click(function() {
$(this).closest(".ob_iCboITCN")
.find("input:checkbox").attr("checked", this.checked);
});
});
See this jsFidlde, which is your code sans the display:none
that was sprinkled all over it.
In fact, this is a variation on @ShankarSangoli's code, which works equally well for me.
Try this
$(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);
})
});
});
精彩评论