список флажков для выбора всего элемента (с ужасным сгенерированным html)

Я пытаюсь написать метод 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>

html jquery selectall checkboxlist obout
person splatto    schedule 26.07.2011    source источник
comment
Просто чтобы подтвердить, создается ли HTML на сервере или на клиенте через JS?   -  person Tomalak    schedule 26.07.2011
comment
Я считаю, что это на стороне сервера, но теперь я подозреваю об этом. Как я могу подтвердить?   -  person splatto    schedule 27.07.2011
comment
Ну, если это в исходном коде веб-страницы, то оно создано на стороне сервера (это мое подозрение).   -  person Tomalak    schedule 27.07.2011

Ответы (2)


arrow_upward
1
arrow_downward

Это работает для меня с вашим образцом.

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

См. это jsFidlde, который является вашим кодом без display:none, который был разбросан по всему нему.

Фактически, это вариант кода @ShankarSangoli, который одинаково хорошо работает для меня.

person Tomalak    schedule 27.07.2011
comment
Я вижу, что это работает в js Fiddle, но по какой-то причине я не могу заставить его работать в Visual Studio. Мои точки останова в функции срабатывают при загрузке страницы, но не срабатывают, когда я нажимаю элемент. У ребят из obout есть рабочий пример с внешней кнопкой, но не с элементом в самом выпадающем списке. Возможно ли, что это невозможно с их управлением изнутри выпадающего списка? Вот их пример в Интернете: obout.com/combobox/integration/ - person splatto; 27.07.2011
comment
@splatto: проблема в том, что другой код JavaScript, который возникает, когда вы нажимаете на флажок, мешает. Он отменяет распространение события, и поэтому ваша функция jQuery никогда не видит событие click. - person Tomalak; 27.07.2011
comment
… но он также предоставляет selectAllItems() и deselectAllItems(), которые делают точно то, что вы хотите. Может быть, вам следует сосредоточиться на этих функциях, а не пытаться найти способ с помощью jQuery? - person Tomalak; 27.07.2011
comment
Сначала я пытался подключить selectAllItems() и deselectAllItems() к первому элементу в поле со списком, но не смог заставить его работать правильно. Мои знания jQuery не настолько сильны, и я пытаюсь их улучшить, но мне трудно подключить метод к этому первому элементу. - person splatto; 27.07.2011
comment
По сути, я могу заставить их пример работать идеально, но дополнительные кнопки будут неприемлемы для основных участников этого проекта. Это должен быть отдельный элемент в раскрывающемся списке. - person splatto; 27.07.2011
comment
@splatto Я постараюсь найти решение завтра. Это будет непросто, так как код JS, который поставляется вместе с элементом управления, довольно отсталый. - person Tomalak; 27.07.2011
comment
Я знаю, я потратил значительное количество времени, пытаясь сделать это без каких-либо результатов. Спасибо Томалак, я очень ценю ваше время и усилия. - person splatto; 27.07.2011

arrow_upward
0
arrow_downward

Попробуй это

$(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);
        })
    });
});
person ShankarSangoli    schedule 26.07.2011
comment
К сожалению, это не так - person splatto; 26.07.2011
comment
До сих пор нет кости, к сожалению. Используя Firebug, я вижу, что точка останова срабатывает при загрузке страницы, но событие не срабатывает, когда я выбираю элемент «выбрать все». - person splatto; 26.07.2011
comment
Можете ли вы предупредить [$(.ob_iCboITCN input:checkbox:first).length] и посмотреть, что вы получите? - person ShankarSangoli; 26.07.2011
comment
Ответ на это 1, так что он определенно находит его - person splatto; 26.07.2011
comment
Я все еще получаю тот же результат. Точка останова срабатывает при загрузке страницы, но событие не запускается, когда я устанавливаю первый флажок - person splatto; 26.07.2011
comment
Когда создается этот html, при загрузке страницы или через AJAX? - person ShankarSangoli; 26.07.2011
comment
@splatto позвольте нам продолжить это обсуждение в чате - person ShankarSangoli; 26.07.2011
comment
Можете ли вы попробовать сейчас? Я использовал делегат, думая, что разметка создается после выполнения вышеуказанного, из-за чего событие не привязывается. - person ShankarSangoli; 26.07.2011
comment
Все тот же результат - точка останова сработала при загрузке страницы, но не при щелчке по полю. Я сейчас в чате, если вы хотите продолжить там. - person splatto; 27.07.2011