jquery - obout checkboxlist 选择所有项目（生成可怕的html）

Question

我正在尝试为此组合框中的复选框编写 Javascript“全选”方法。

我正在使用 obout 第三方控件组合框。此控件生成的 HTML 如下所示。

这是我试图用来促进“全选”行为的方法，但这不起作用。

使用 Firebug，我确实知道以下内容：

该文件正在与页面一起加载，因为 jquery 函数的第一行上的断点被命中
单击“全选”复选框时，该方法未触发，因为未命中该方法中的断点

我还在 jquery 方法中尝试了不同的类层次结构组合，但没有成功。你能给些建议么？

提前致谢。

$(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>

score 1 · Accepted Answer

这适用于我的样品。

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

看到这个 jsFidlde，这是你的代码display:none，没有洒在上面的代码。

事实上，这是@ShankarSangoli 代码的变体，对我来说同样适用。

score 0 · Accepted Answer

尝试这个

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

jquery - obout checkboxlist 选择所有项目（生成可怕的html）

2 回答 2

Related

Reference