Функции Jquery для операций над gridview с флажками

Question

Первый столбец в моем сеточном представлении (gvAvailable) - это текущий флажок "chkSelect". Теперь он работает так, что пользователь может установить несколько флажков в виде сетки, но я бы хотел, чтобы функция jquery отменила выбор всех флажков в виде сетки, кроме флажка, который был выбран.

Я также искал способ доступа к столбцам отмеченной строки с помощью jquery по нажатию кнопки.

Спасибо за любую помощь

Вот как выглядит сгенерированный html

<table class="Grid" cellspacing="0" border="0" id="gvAvailable" style="width:99%;border-collapse:collapse;">
<tr class="GridHeader">
<th scope="col">&nbsp;</th><th scope="col">Guid</th><th scope="col">Id</th><th scope="col">Name</th>
    <th scope="col">Facility</th><th scope="col">Room</th>
</tr>
<tr class="GridItem">
    <td>
        <input id="gvAvailable_ctl02_chkSelect" type="checkbox" name="gvAvailable$ctl02$chkSelect" />
    </td>
    <td>24</td>
    <td>000101020201</td>
     <td>Test</td>
     <td>Test Facility</td>
     <td>&nbsp;</td>
</tr><tr class="GridAltItem">
<td>
    <input id="gvAvailable_ctl03_chkSelect" type="checkbox" name="gvAvailable$ctl03$chkSelect" />
</td>
<td>25</td>
<td>1001</td>
<td>Test 2</td>
<td>Test 3</td>
<td>&nbsp;</td>
</tr>
</table>

Answer 1

В этом примере я поставил одну кнопку, чтобы проверить, и одну кнопку, чтобы снять флажки gridview:

<asp:GridView runat="server" ID="grid"></asp:GridView>

<input type="button" onclick="uncheckCheckBoxes()" value="UnCheck" />
&nbsp;
<input type="button" onclick="checkCheckBoxes()" value="Check" />

<script>
    function uncheckCheckBoxes()
    {
        var gridClientID = '<%= grid.ClientID %>';
        jQuery.each($("#" + gridClientID + " input[type='checkbox']"), function ()
        {
          this.checked = false;
        });
    }

    function checkCheckBoxes()
    {
        var gridClientID = '<%= grid.ClientID %>';
        jQuery.each($("#" + gridClientID + " input[type='checkbox']"), function ()
        {
          this.checked = true;
        });
    }
</script>

Answer 2

если вы добавите один и тот же класс к каждому из флажков в разметке, вы можете получить их массив, сказав

$('.classname')

Это вернет вам массив объектов. Затем вы можете вызвать «each» в массиве и отменить выбор их всех.

function removeChecks()
{    
    $('.classname').each(function()
    {
         $(this).removeAttr('checked');
    });
}

Затем добавьте вышеуказанный вызов функции в обработчик кликов для каждого флажка:

$('.classname').each(function()
{
    $(this).click(function()
    {
        removeChecks();
        $(this).attr('checked', 'checked');
    });
});

код выше должен быть настроен для запуска при загрузке страницы.

Answer 3

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

Во-первых, просто присвойте имя классу всем флажкам в виде сетки.

Всякий раз, когда был установлен флажок, добавьте к нему другой класс, чтобы обозначить, что он был выбран физически.

$('.checkbox').click(function(){
   $(this).addClass('checked');
});

Теперь, когда пользователь нажимает на флажок «Выбрать все» (назовем его «selectAll») сверху, перебираем все флажки и переключаем статус, проверяя класс «флажок»

$('#selectAll').click(function(){
   var status = $(this).attr('checked')
   $('.checkbox').each(function(){
      //only toggle if not set
      if(!$(this).hasClass('checked')){
        if(status){
          $(this).attr('checked', 'checked');
        }
        else{
          $(this).attr('checked', '');
        }
      }
    });
});

Надеюсь, это поможет вам идти по пути веселья.

Теперь, доступ к столбцам проверенной строки?

You could add an onclick event to each table row.
$('#tablename tr').click(function(){
  //do something
});

Answer 4

я нашел это статья очень полезная Проверка / снятие отметки всех элементов в списке ASP.NET CheckBox с помощью jQuery