obout checkboxlist select all item (with horrible generated html)

Question

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_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>

Just to confirm, is the HTML created on the server or on the client via JS? — Tomalak, Jul 26 '11 at 15:44
I believe it's server side but now I'm second guessing that. How can I confirm? — splatto, Jul 27 '11 at 14:24
Well, if it's in the source code of the web page, it's created server side (this is my suspicion). — Tomalak, Jul 27 '11 at 14:30

score 1 · Answer 1 · edited May 23 '17 at 12:11

1

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.

edited May 23 '17 at 12:11

Community

1
1

answered Jul 27 '11 at 15:13

Tomalak

332,285
67
532
628

I see it working in the js Fiddle, but for some reason I cannot get it to work in Visual Studio. My breakpoints on the function are hit on pageload but don't fire when I click the item. The obout guys have a working example with an external button, but not with an item in the combobox itself. Could it be possible that it isn't possible with their control from inside the combobox? Here is their example online: http://www.obout.com/combobox/integration/aspnet_integration_select_oboutcheckboxes.aspx – splatto Jul 27 '11 at 15:42
@splatto: The problem is that the other JavaScript code that happens when you click on a checkbox interferes. It cancels event propagation and therefore your jQuery function never sees the `click` event. – Tomalak Jul 27 '11 at 16:12
…but it also provides a `selectAllItems()` and a `deselectAllItems()` that do *exactly* what you want. Maybe you should concentrate on these functions instead of trying to find a way with jQuery? – Tomalak Jul 27 '11 at 16:26
I initially tried to hook up the selectAllItems() and deselectAllItems() to the first item in the combobox but was unable to get it working correctly. My jQuery knowledge is not that strong and I'm trying to improve it, but I'm having a difficult time wiring the method to that first item – splatto Jul 27 '11 at 17:39
Essentially I can get their example working perfectly, but the extra buttons will be unacceptable to major stakeholders of this project. It's got to be it's own item in the dropdown – splatto Jul 27 '11 at 17:57
1

@splatto I shall try and find a solution tomorrow. It's not going to be easy since the JS code that comes along with the control is pretty retarded. – Tomalak Jul 27 '11 at 18:49
I know, I've spent a considerable amount of time trying to do it with no results. Thank you Tomalak, I greatly appreciate your time and effort. – splatto Jul 27 '11 at 19:28

ShankarSangoli · Answer 2 · 2011-07-26T17:33:18.773

0

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);
        })
    });
});

edited Jul 26 '11 at 17:33

answered Jul 26 '11 at 15:42

ShankarSangoli

69,612
13
93
124

Unfortunately this doesn't do it – splatto Jul 26 '11 at 15:50
Still no dice, unfortunately. Using Firebug I can see the breakpoint being hit on page load, but the event isn't firing when I choose the 'select all' item – splatto Jul 26 '11 at 15:55
Can you alert [$(".ob_iCboITCN input:checkbox:first").length] and see what you get? – ShankarSangoli Jul 26 '11 at 15:57
The response to this is "1", so it's definitely finding it – splatto Jul 26 '11 at 16:46
I'm still getting the same result. Breakpoint is hit on page load, but the event isn't being triggered when I check the first box – splatto Jul 26 '11 at 17:11
When is this html being created, on page load or through AJAX? – ShankarSangoli Jul 26 '11 at 17:20
@splatto let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/1850/discussion-between-shankarsangoli-and-splatto) – ShankarSangoli Jul 26 '11 at 17:20
Can you try now I used delegate thinking that the markup is generated after the above is executed due to which the event is not getting attached. – ShankarSangoli Jul 26 '11 at 17:34
Still the same result - breakpoint hit on pageload, but not on clicking the box. I'm in the chat now if you want to continue there. – splatto Jul 26 '11 at 20:20

obout checkboxlist select all item (with horrible generated html)

2 Answers2