jquery issues with tr click changes checkbox

Question

Мое условие: У меня есть флажок внутри <tr>, написанный в <asp:repeater> на пользовательском элементе управления, размещенном на странице aspx.

Моя цель: если щелкнуть <tr>, JQuery изменяет (или, в частности, переключает) флажок установленного атрибута, а также класс css самого <tr>.

Я пробовал несколько методов, и до сих пор, только это работает для меня: http://jsfiddle.net/xixonia/WnbNC/ , но, к сожалению, все флажки переключаются вместо только выбранного одного, так же, как, например, на jsfiddle.net. кроме того, если бы я нажал на флажок, все остальные флажки будут отмечены вместо щелкнутого.

Что я сделал:

$(".moduleTableItem").click(function (e) { 
     // Toggles CSS 
     if (!$(this).closest('tr').hasClass("tr.active")) { 
      $(this).closest('tr').css('background-color', 'blue'); 
      $(this).closest('tr').addClass("tr.active"); 
     } else { 
      $(this).closest('tr').css('background-color', 'red'); 
      $(this).closest('tr').removeClass("tr.active"); 
     } 
     // Toggles Checkbox 
     $(':checkbox').prop('checked', function (i, value) { 
      return !value; 
     }); 

ASP:

<asp:Repeater ID="repModuleGeneral" runat="server" EnableViewState="true"> 
        <ItemTemplate> 
         <tr id="trModuleGeneral" class="moduleTableItem" runat="server"> 
          <td> 
            <input type="checkbox" id="cbxSelect" class="cbxSelect" runat="server" autopostback="false" /></td> 
          <td> 
           <asp:Label ID="lblNo" runat="server" /></td> 
</tr> 
        </ItemTemplate> 
       </asp:Repeater> 

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

спасибо.

Answer 1

Изменить

$(':checkbox').prop('checked', function (i, value) { 

Для

$(this).find(':checkbox').prop('checked', function (i, value) { 

this используется здесь будет указывать на текущий щелкнул tr.

Это обыкновение работать, если вы нажмете этот флажок. Почему ты спрашиваешь? Потому что checkbox находится внутри tr, к которому вы назначили событие click. Так что, когда нажать на флажок, который unchecked эти два действия вызваны:

1. Checkbox выбран из-за действия CheckBox по умолчанию - флажок установлен в true.
2. Запущен щелчок по tr. У вас есть флажок prop. Возвращает выбранный по умолчанию действие.

Таким образом, это основное действие счетчика, которое отменяет действия по умолчанию этого флажка. Чтобы исправить это, вы должны проверить, если цель по умолчанию НЕ флажок, а затем запустить prop функцию:

$(".moduleTableItem").click(function (e) {  

    // Toggles CSS 
    if (!$(this).closest('tr').hasClass("tr.active")) { 
     $(this).closest('tr').css('background-color', 'blue'); 
     $(this).closest('tr').addClass("tr.active"); 
    } else { 
     $(this).closest('tr').css('background-color', 'red'); 
     $(this).closest('tr').removeClass("tr.active"); 
    } 
    //check here 
    if (!$(e.target).is(":checkbox")) { 
     // Toggles Checkbox 
     $(this).find(':checkbox').prop('checked', function (i, value) { 
      return !value; 
     }); 
    } 
}); 

Демо: http://jsfiddle.net/hungerpain/Kph8M/

Но, так же, как со стороны мысли, если у вас есть контроль над идентификаторами, сгенерированными над флажками, вы можете присвоить тот же идентификатор, что и атрибут for в метке. Ваш HTML будет выглядеть следующим образом:

<tr class="moduleTableItem"> 
     <td> 
      <input type="checkbox" id="cbxSelect1" class="cbxSelect" /> 
     </td> 
     <td> 
      <label for="cbxSelect1">Text</label> 
     </td> 
</tr> 

Не атрибут флажка id и атрибут метки for. Таким образом, многие проблемы будут решены.И вы можете использовать событие change этого флажка. Кроме того, некоторые оптимизации для вашего кода. Это будет выглядеть примерно так:

$(".moduleTableItem :checkbox").change(function (e) { 
    //cache this - you are using it more than once. 
    var $tr = $(this).closest('tr'); 
    // check if class is active - I took away if..else and made it ternary 
    var bg = $tr.hasClass("tr.active") ? 'red': 'blue'; 
    //set css and toggleClass. Anyway you're switching everytime. Why not use toggle? 
    $(this).closest('tr').css('background-color', bg).toggleClass("tr.active"); 
}); 

Демо: http://jsfiddle.net/hungerpain/Kph8M/4/