asp.net mvcのhtmlテーブルのチェックボックスをチェックして行を取得するJquery

以下のようにテーブルを作成しました。私はfollwing達成するために必要asp.net mvcのhtmlテーブルのチェックボックスをチェックして行を取得するJquery

<div class="grid_top_button"> 
         <div class="left_top_curve"> 
          &nbsp;</div> 
         <div class="right_top_curve"> 
          &nbsp;</div> 
         <input name="input" type="button" id="addSelected" name="addSelected" class="section_btn" 
          value="Link" /></div><table id="LstDocTemp" border="0" cellpadding="0" cellspacing="0" class="instruction_grid"> 
    <tr> 
     <th align="left" class="ins_sl_no"> 
           Sl No. 
          </th> 
          <th align="left" class="selct_column"> 
           <input type="checkbox" id="chkSelectAll" name="chkSelectAll" /> 
          </th> 
          <th align="left" class="doc_title_1"> 
           Document title 
          </th> 
          <th align="left" class="description"> 
           Description 
          </th> 
          <th align="center" class="revision"> 
           Revision 
          </th> 
          <th align="left" class="part_no"> 
           Parts name 
          </th> 
          <th align="center" class="issue_no"> 
           Issue 
          </th> 
          <th align="center"> 
           Link 
          </th> 
         </tr> 
         <% int slNo = 1; %> 
         <%foreach (var item in Model) 
          { %> 
         <tr id="<%= Html.Encode(item.DocId) %>"> 
          <td> 
           <%= slNo %> 
          </td> 
          <td> 
           <input type="checkbox" name="chkItem" class="chk" id="chkbox_<%=Html.Encode(item.DocId) %>" /> 
          </td> 
          <td> 
           <%= Html.Hidden("DocTitle", item.DocTitle)%> 
           <a href='<%= Url.Action("DetailsDocumentTemplate", "Document", new { id = item.DocId })%>'> 
            <%=Html.Encode(item.DocTitle) %></a> 
          </td> 
          <td> 
           <%= Html.Hidden("DocDesc", item.DocDesc)%> 
           <%= Html.Encode(item.DocDesc) %> 
          </td> 
          <td class="dark_highlight"> 
           <%= Html.Hidden("DocRevision", item.DocRevision)%> 
           <%= Html.Encode(item.DocRevision) %> 
          </td> 
          <td> 
           <%= Html.Hidden("PartListId", item.PartListId)%> 
           <%= Html.Hidden("PartNo", item.PartNo)%> 
           <%= Html.Encode(item.PartNo) %> 
          </td> 
          <td class="light_highlight"> 
           <%= Html.Hidden("IssueNo", item.IssueNo)%> 
           <%=Html.Encode(item.IssueNo) %> 
          </td> 
          <td> 
           <%= Html.Hidden("DocId", item.DocId)%> 
           <a class="icon_add" title="Add">Add</a> 
          </td> 
         </tr> 
         <%slNo++; 
          } %> 
        </table>

：

は、チェックボックス（name="chkItem"）をチェックすることにより、選択された行のためのコントローラでアクションを実行します。
チェックボックス（name="chkSelectAll）がチェックされている場合は、チェックボックス（name="chkItem"）をオンまたはオフにします。
chkSelectAllチェックボックスをオンにしてすべてを選択した後、誰でもチェックを外すと、chkSelectAllチェックボックスをオフにする必要があります。

出典

2011-01-27 Suja Shyam

あなたの質問は何ですか？あなたが尋ねたいかもしれない要件を実装しようとしているときに遭遇したかもしれない特定の問題？ –

質問をに移動しましたhttp://stackoverflow.com/questions/4813610/jquery-checkbox-manipulation-within-a-foreach-loop –

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $.extend($.expr[':'], { 
      unchecked: function (obj) { 
       return ((obj.type == 'checkbox' || obj.type == 'radio') && !$(obj).is(':checked')); 
      } 
     }); 

     $(document).ready(function() { 
      $('#LstDocTemp').find('#chkSelectAll').live('click', function() { 
       $('#LstDocTemp').find('.chkCheckBox').attr('checked', $(this).prop('checked')); 
      }); 

      $('#LstDocTemp').find('.chkCheckBox').live('click', function() { 
       $('#LstDocTemp').find('#chkSelectAll').attr('checked', $('#LstDocTemp').find('.chkCheckBox:unchecked').length > 0 ? false : true); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div class="grid_top_button"> 
     <div class="left_top_curve"> 
      &nbsp;</div> 
     <div class="right_top_curve"> 
      &nbsp;</div> 
     <input name="input" type="button" id="addSelected" name="addSelected" class="section_btn" 
      value="Link" /> 
    </div> 
    <table id="LstDocTemp" border="0" cellpadding="0" cellspacing="0" class="instruction_grid"> 
     <tr> 
      <th align="left" class="ins_sl_no"> 
       Sl No. 
      </th> 
      <th align="left" class="selct_column"> 
       <input type="checkbox" id="chkSelectAll" name="chkSelectAll" /> 
      </th> 
      <th align="left" class="doc_title_1"> 
       Document title 
      </th> 
      <th align="left" class="description"> 
       Description 
      </th> 
      <th align="center" class="revision"> 
       Revision 
      </th> 
      <th align="left" class="part_no"> 
       Parts name 
      </th> 
      <th align="center" class="issue_no"> 
       Issue 
      </th> 
      <th align="center"> 
       Link 
      </th> 
     </tr> 
     <tr> 
      <td> 
      </td> 
      <td> 
       <input type="checkbox" name="chkItem" class="chk chkCheckBox" id="chkbox_" /> 
      </td> 
      <td> 
       <a>test</a> 
      </td> 
      <td> 
       Test 
      </td> 
      <td class="dark_highlight"> 
      </td> 
      <td> 
      </td> 
      <td class="light_highlight"> 
      </td> 
      <td> 
       <a class="icon_add" title="Add">Add</a> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      </td> 
      <td> 
       <input type="checkbox" name="chkItem" class="chk chkCheckBox" id="Checkbox1" /> 
      </td> 
      <td> 
       <a>test</a> 
      </td> 
      <td> 
       Test 
      </td> 
      <td class="dark_highlight"> 
      </td> 
      <td> 
      </td> 
      <td class="light_highlight"> 
      </td> 
      <td> 
       <a class="icon_add" title="Add">Add</a> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      </td> 
      <td> 
       <input type="checkbox" name="chkItem" class="chk chkCheckBox" id="Checkbox2" /> 
      </td> 
      <td> 
       <a>test</a> 
      </td> 
      <td> 
       Test 
      </td> 
      <td class="dark_highlight"> 
      </td> 
      <td> 
      </td> 
      <td class="light_highlight"> 
      </td> 
      <td> 
       <a class="icon_add" title="Add">Add</a> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

出典

2012-05-01 14:53:15 Thulasiram

ライブデモについては、こちらのリンクをご覧ください：http://jsfiddle.net/nanoquantumtech/vTRvD / – Thulasiram

asp.net mvcのhtmlテーブルのチェックボックスをチェックして行を取得するJquery

答えて

関連する問題