Два столбца флажков с множественным выбором внутри сетки

у меня есть два флажка для двух столбцов, поэтому, как только он нажимает на поле выбора всего заголовкаChkbox, он должен быть выбран только для всех chkStatus, и то же самое происходит с chkUpdate

но приведенный ниже код выбирает и отменяет выбор обоих, когда я собираюсь выбрать любой из них. но я хочу сделать их независимыми друг от друга. означает, что когда я выбираю headerChkbox, все флажки в этом конкретном столбце должны быть выбраны или не выбраны. разное

<telerik:GridTemplateColumn UniqueName="CheckBoxTemplateColumn">
    <HeaderStyle Width="50px" HorizontalAlign="Center" />
    <ItemStyle HorizontalAlign="Left" />
    <ItemTemplate>
        <asp:CheckBox ID="chkStatus" runat="server" Width="15px" Checked='<%# Convert.ToBoolean(Eval("isAssignJD")) %>' />
    </ItemTemplate>
    <HeaderTemplate>
        <asp:CheckBox ID="headerChkbox" runat="server" onclick="javascript:SelectAllCheckboxesSpecific(this);" />
    </HeaderTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="CheckBoxTemplate">
    <HeaderStyle Width="50px" HorizontalAlign="Center" />
    <ItemStyle HorizontalAlign="Left" />
    <ItemTemplate>
        <asp:CheckBox ID="chkUpdate" runat="server" Width="15px" Checked="false" />
    </ItemTemplate>
    <HeaderTemplate>
        <asp:CheckBox ID="headerUpdate" runat="server"  onclick="javascript:SelectAllCheckboxesSpecific(this);" />
    </HeaderTemplate>
</telerik:GridTemplateColumn>

И вот моя функция

function SelectAllCheckboxesSpecific(spanChk) {
    //  Select checkboxes that place in grid
    var IsChecked = spanChk.checked;
    var Chk = spanChk;
    Parent = document.getElementById('ctl00_ContentPlaceHolder1_gvJobPosition');
    var items = Parent.getElementsByTagName('input');
    for (i = 0; i < items.length; i++) {
        if (items[i].id != Chk && items[i].type == "checkbox") {
            if (items[i].checked != IsChecked) {
                items[i].click();
            }
        }
    }
}

Вот мой HTML-код, отображаемый

<tr class="rgRow" id="ctl00_ContentPlaceHolder1_gvJobPosition_ctl00__0">
    <td style="display:none;">0561fb4f-e410-4d83-a0e5-6d6d68fe3dba</td><td align="left">
                                    <span class="category1" style="display:inline-block;width:15px;"><input id="ctl00_ContentPlaceHolder1_gvJobPosition_ctl00_ctl04_chkStatus" type="checkbox" name="ctl00$ContentPlaceHolder1$gvJobPosition$ctl00$ctl04$chkStatus" checked="checked" /></span>
                                </td><td align="left">
                                    <span class="category2" style="display:inline-block;width:15px;"><input id="ctl00_ContentPlaceHolder1_gvJobPosition_ctl00_ctl04_chkStatuss" type="checkbox" name="ctl00$ContentPlaceHolder1$gvJobPosition$ctl00$ctl04$chkStatuss" /></span>
                                </td>

javascript asp.net telerik telerik-grid
person Ameer Ali Shar    schedule 25.01.2014    source источник
comment
Я обновил код рабочим примером, только не забудьте включить файл jQuery js.   -  person    schedule 25.01.2014

Ответы (1)


arrow_upward
0
arrow_downward

Эта строка - ваша проблема:

var items = Parent.getElementsByTagName('input');

Вы устанавливаете флажки все на странице. Почему бы не использовать jQuery? Это намного проще:

Укажите все флажки в категории 1, class="category1" и укажите class="category2" для всех флажков в категории 2.

Затем укажите class="setAll1" и class="setAll2" для флажков заголовка. Затем написать:

$(document).ready(function(){
    $('.setAll1').click(function(){
        if($('.setAll1').is(':checked'))
            $('.category1').prop('checked',true);
        else 
            $('.category1').prop('checked',false);
    });
    $('.setAll2').click(function(){
        if($('.setAll2').is(':checked'))
            $('.category2').prop('checked',true);
        else
            $('.category2').prop('checked',false);
    });
});

И для html:

<body>
    <input type=checkbox class="setAll1"/>
    <input type=checkbox class="category1"/><input type=checkbox class="category1"/><input type=checkbox class="category1"/>
    <br/><br/><br/>
    <input type=checkbox class="setAll2"/>
    <input type=checkbox class="category2"/><input type=checkbox class="category2"/><input type=checkbox class="category2"/>
</body>

Есть много способов сделать это в jQuery, но этот способ был первым, который пришел мне в голову.

person Community    schedule 25.01.2014
comment
Можете ли вы показать мне пример кода, который я новичок в Jquery, Javascript - person Ameer Ali Shar; 25.01.2014
comment
Я думаю, asp: флажок не отображается как флажок, как флажок html. Он создает диапазон, и класс назначается диапазону, а не флажку. Возможно, вам придется использовать $('.setAll1 input:checkbox') вместо $('.setAll1'). Или используйте флажок html. - person afzalulh; 25.01.2014
comment
Я протестировал и исправил код, но он использует обычные флажки, как показано. - person ; 25.01.2014
comment
Именно этот код работает на моей машине. Покажите нам, что у вас есть до сих пор. Вы получаете какие-либо ошибки в консоли JS? Посмотрите здесь: jsfiddle.net/d8vuK - person ; 25.01.2014
comment
Чувак, я думаю, что afzalulh прав, возможно, я использую флажок asp.net вместо html, поэтому он не работает, хотя я также пробовал $('.setAll1 input:checkbox') вместо $('.setAll1') - person Ameer Ali Shar; 25.01.2014
comment
Было бы очень полезно, если бы вы показали HTML-код, созданный из вашего кода, особенно там, где стоят флажки. - person ; 25.01.2014
comment
@Ameer Ali - Поскольку этот ответ нуждается в незначительных изменениях, мне не хочется публиковать еще один ответ. Мое предложение: вы должны заменить все $('.AspCheckBoxClass') на $('.AspCheckBox input:checkbox'). Вы можете выполнить отладку в firebug и посмотреть, получает ли ваш код правильный элемент. - person afzalulh; 25.01.2014