2014-01-25 5 views
0

У меня есть две галочки для двух столбцов, так как только он нажмите на кнопку Выбрать все headerChkbox он должен быть выбран только для всех chkStatus и то же самое с chkUpdateДва нескольких установите флажки столбец внутри GridView

но ниже код выбора и снимите выделение и когда РМКО собирается выбрать любой one.but я хочу сделать их независимыми от каждого other.means, когда я выбираю 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> 
+0

Я обновил код с помощью рабочего примера, просто не забудьте включить jQuery js-файл. –

ответ

0

Эта линия ваша проблема:

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

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

Дайте все флажки в категории 1, класс = «category1» и дать класс = «category2» для всех флажков в категории 2.

Затем дают класс = «setAll1» и класс =» 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, но этот путь был первым, что пришло мне в голову.

+0

Можете ли вы показать мне пример кода iam new для Jquery, Javascript –

+0

Обновлен с помощью некоторого кода. –

+0

@ Илья Немцев. Вы проверили свой код? – afzalulh

Смежные вопросы