Колона с две квадратчета за отметка с множество избори в изгледа на мрежата

имам две квадратчета за отметка за две колони, така че след като щракне върху полето select all headerChk, то трябва да бъде избрано само за всички 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