Флажок для выбора/отмены выбора всех

Question

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

Вот часть вида, как я построил его прямо сейчас (пожалуйста, медведь с фальшивыми именами и конвенции):

<p> 
     @using (Html.BeginForm("SendObj", "Manager")) 
     { 
      <p> 
       Select/UnSelet All Items @Html.CheckBox("selectAll", true) 
      </p> 
      <table id="objToSend"> 
       <tr> 
        <th>Obj Name</th> 
        <th>Number In Stock</th> 
        (...) 
       </tr> 
       @for (int i = 0; i < Model.Count(); i++) 
       { 
        <tr> 
         <td>@Html.DisplayFor(x => x[i].m_OthObj.m_ObjName)</td> 
         <td>@Html.DisplayFor(x => x[i].m_NbInStock)@Html.HiddenFor(x => x[i].m_NbInStock)</td> 
         (...) 
        <div id="divChckBox"> 
         <td> 
          @Html.CheckBoxFor(x => x[i].m_IsSelected) 
         </td> 
        </div> 

        </tr> 
       } 

      </table> 
      <input type="submit" value="Send"/> 
     } 
    </p> 

Что касается «как», ну, я искал немного вокруг и Я попробовал этот JQuery сценарий, но безуспешно:

**** EDIT **** 

Вот новый JQuery на основе комментариев людей, размещенных ниже. Оповещения есть на отладочной цели, и как появляется, когда это необходимо:

<script type="text/javascript"> 
    $(document).ready(function() { 
     alert("The document is ready"); 
     $("#selectAll").click(function() { 
      alert("The case has been clicked"); 
      var chkValue = $(this).is(":checked"); 
      $("#divChckBox").attr("checked", "checked"); 
     }); 
    }); 
    </script> 

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

Может ли кто-нибудь помочь мне? Спасибо!

* EDIT *

Я добавлю здесь, что оказанная страница выдает для флажков:

<td><input checked="checked" class="chckBoxList" data-val="true" data-val-required="The m_IsSelected field is required." name="[0].m_IsSelected" type="checkbox" value="true" /><input name="[0].m_IsSelected" type="hidden" value="false" /></td> 

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

Answer 1

@Html.CheckBox("TheOneCheckBoxToRuleThemAll") 

Измените текущий код кода на:

<td>@Html.CheckBoxFor(x => x[i].m_IsSelected, new{ @class = "checkGroup1"})</td> 

Самый простой Jquery когда-либо (не забудьте положить его в document.ready, как показано ниже):

<script type="text/javascript"> 
    $(document).ready(function() { 
     //alert("the document is ready"); 
     $("#TheOneCheckBoxToRuleThemAll").click(function() { 
       //alert("inside my click event"); 
       var chkValue = $(this).is(":checked"); 
       $(".checkGroup1").prop("checked", chkValue); 
      }); 
    }); 
    </script> 

EDIT:

Мой предыдущий ответ используется атрибут .attr(). После тестирования у меня были всевозможные проблемы с тем, чтобы работать. После обращения к this SO post, я переключился на использование .prop(), и все волшебство начало функционировать правильно.

• Jquery .Attr()
• Jquery .Prop()

EDIT:

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

<input name='itdoesnotmatter' id='donotcare' class='checkGroup1' /> 

также не использовать это глупое имя, которое я наделал, использовать что-то простое, как

@Html.CheckBox("MasterCheck") 

Answer 2

я исправлюсь: CheckBoxFor НЕ позволяют устанавливать класс

В вашем помощнике

<div id="divChckBox"> 
    @Html.CheckBoxFor(x => x[i].m_IsSelected) 
</div> 

А затем сделать вашу группу селектор по классу:

$("#divChckBox :checkbox").attr("checked", "checked"); 

Answer 3

Как Есть много комментариев вокруг и много ответов, вот мой текущий код (который работает!):

<script type="text/javascript"> 
    $(document).ready(function() { 
     //alert("The document is ready"); 
     $("#selectAll").click(function() { 
      //alert("The case has been clicked"); 
      var chkValue = $(this).is(":checked"); 
      $(".divChckBox").prop("checked", chkValue); 
     }); 
    }); 
</script> 
<p> 
    @using (Html.BeginForm("SendObj", "Manager")) 
    { 
     <p> 
      Select/UnSelet All Items @Html.CheckBox("selectAll", true) 
     </p> 
     <table> 
      <tr> 
       <th>Card Name</th> 
       <th>Number In Stock</th> 
       (...) 
      </tr> 
      @for (int i = 0; i < Model.Count(); i++) 
      { 
       <tr> 
        <td>@Html.DisplayFor(x => x[i].m_OthObj.m_ObjName)</td> 
        <td>@Html.DisplayFor(x => x[i].m_NbInStock)@Html.HiddenFor(x => x[i].m_NbInStock)</td> 
        (...) 
        <td> 
         <input type="checkbox" name="itdoesnotmatter" class="divChckBox" checked="true"/> 
        </td> 
       </tr> 
      } 

     </table> 
     <input type="submit" value="Send"/> 
    } 
</p> 

Теперь каждые флажки проверяются или нет в зависимости от состояния избранных всех галочек ! Всем спасибо. Теперь мне нужно решить проблему «отмены» результата флажка в моем контроллере, потому что это связано с поведением. Но это еще одна проблема.