チェックボックス

Question

のテーブルからの値が、私はチェックボックスのテーブルを持って取得：私が何をしようとしています何

<div> 
    <h1 class="text-center">Link activities</h1> 
    <div class="row"> 
     <div class="col"></div> 
     <div class="col-md-8 col-lg-8"> 
      <h3>Link activities to txn/events</h3> 
      <div class="table-responsive"> 
       <table class="table table-bordered"> 
        <thead> 
         <tr> 
          <th></th> 
          <th colspan="3">Txn/event</th> 
         </tr> 
         <tr> 
          <th>Activity</th> 
          <th class="text-center" style="background-color: khaki">Click & Collect</th> 
          <th class="text-center" style="background-color: khaki">Delivery</th> 
          <th class="text-center" style="background-color: khaki">Walk-in</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
          <th scope="row" style="background-color: #eed3d7">Till</th> 
          <td class="text-center"><input type="checkbox" aria-label="Till/C&C" value="Till/C&C" /></td> 
          <td class="text-center"><input type="checkbox" aria-label="Till/Del" value="Till/Del" /></td> 
          <td class="text-center"><input type="checkbox" aria-label="Till/Walk" value="Till/Walk" /></td> 
         </tr> 
         <tr> 
          <th scope="row" style="background-color: #eed3d7">Delivery</th> 
          <td class="text-center"><input type="checkbox" aria-label="Del/C&C" value="Del/C&C" /></td> 
          <td class="text-center"><input type="checkbox" aria-label="Del/Del" value="Del/Del" /></td> 
          <td class="text-center"><input type="checkbox" aria-label="Del/Walk" value="Del/Walk" /></td> 
         </tr> 
         <tr> 
          <th scope="row" style="background-color: #eed3d7">Pick</th> 
          <td class="text-center"><input type="checkbox" aria-label="Pick/C&C" value="Pick/C&C" /></td> 
          <td class="text-center"><input type="checkbox" aria-label="Pick/Del" value="Pick/Del" /></td> 
          <td class="text-center"><input type="checkbox" aria-label="Pick/Walk" value="Pick/Walk" /></td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
     </div> 
     <div class="col"></div> 
    </div> 
    <div class="row"> 
     <div class="col"></div> 
     <div class="col-md-8 col-lg-8 align-self-center text-right"> 
      <button type="button" class="btn btn-secondary">Cancel</button> 
      <button type="button" class="btn btn-primary" id="linkUpdate">Update</button> 
     </div> 
     <div class="col"></div> 
    </div> 
</div> 

はjQueryを使用して選択されているすべてのチェックボックスの値を取得するには、更新ボタンを使用しています。私は現在使用しているコードは次のとおりです。ただし

$("#linkUpdate").on('click',() => { 
    let selectedLinks = []; 
    $("input:checkbox:checked").each(() => { 
     selectedLinks.push($(this).val()); 
    }); 
    console.log(selectedLinks); 
}); 

、これが現在私にエラーを与えている：

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined 
    at jQuery.fn.init.val (jquery.js?ae28:7935) 
    at HTMLInputElement.eval (project.js?9e26:21) 
    at Function.each (jquery.js?ae28:362) 
    at jQuery.fn.init.each (jquery.js?ae28:157) 
    at HTMLButtonElement.eval (project.js?9e26:20) 
    at HTMLButtonElement.dispatch (jquery.js?ae28:5206) 
    at HTMLButtonElement.elemData.handle (jquery.js?ae28:5014) 

Soが私の質問は二つの部分に来る：

1）私は更新ボタンを押す前にチェックするチェックボックスのステータスを設定する必要がありますか？私は、更新ボタンを押したとき

2）はどのようにしてチェックし、チェックボックスの値を得ることができますか？

私はこれですべてのヘルプははるかに高く評価されるだろうBootstrap version 4.0.0-alpha.6とjQuery version 3.2.1

を使用しています。

お時間をいただきありがとうございます。

Answer 1

、function()によるデモ() =>を交換してください：私はあなたが `$必要があると思う

$("#linkUpdate").on('click', function() { 
 
    let selectedLinks = []; 
 
    $("input:checkbox:checked").each(function() { 
 
     selectedLinks.push($(this).val()); 
 
    }); 
 
    console.log(selectedLinks); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <h1 class="text-center">Link activities</h1> 
 
    <div class="row"> 
 
     <div class="col"></div> 
 
     <div class="col-md-8 col-lg-8"> 
 
      <h3>Link activities to txn/events</h3> 
 
      <div class="table-responsive"> 
 
       <table class="table table-bordered"> 
 
        <thead> 
 
         <tr> 
 
          <th></th> 
 
          <th colspan="3">Txn/event</th> 
 
         </tr> 
 
         <tr> 
 
          <th>Activity</th> 
 
          <th class="text-center" style="background-color: khaki">Click & Collect</th> 
 
          <th class="text-center" style="background-color: khaki">Delivery</th> 
 
          <th class="text-center" style="background-color: khaki">Walk-in</th> 
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
         <tr> 
 
          <th scope="row" style="background-color: #eed3d7">Till</th> 
 
          <td class="text-center"><input type="checkbox" aria-label="Till/C&C" value="Till/C&C" /></td> 
 
          <td class="text-center"><input type="checkbox" aria-label="Till/Del" value="Till/Del" /></td> 
 
          <td class="text-center"><input type="checkbox" aria-label="Till/Walk" value="Till/Walk" /></td> 
 
         </tr> 
 
         <tr> 
 
          <th scope="row" style="background-color: #eed3d7">Delivery</th> 
 
          <td class="text-center"><input type="checkbox" aria-label="Del/C&C" value="Del/C&C" /></td> 
 
          <td class="text-center"><input type="checkbox" aria-label="Del/Del" value="Del/Del" /></td> 
 
          <td class="text-center"><input type="checkbox" aria-label="Del/Walk" value="Del/Walk" /></td> 
 
         </tr> 
 
         <tr> 
 
          <th scope="row" style="background-color: #eed3d7">Pick</th> 
 
          <td class="text-center"><input type="checkbox" aria-label="Pick/C&C" value="Pick/C&C" /></td> 
 
          <td class="text-center"><input type="checkbox" aria-label="Pick/Del" value="Pick/Del" /></td> 
 
          <td class="text-center"><input type="checkbox" aria-label="Pick/Walk" value="Pick/Walk" /></td> 
 
         </tr> 
 
        </tbody> 
 
       </table> 
 
      </div> 
 
     </div> 
 
     <div class="col"></div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col"></div> 
 
     <div class="col-md-8 col-lg-8 align-self-center text-right"> 
 
      <button type="button" class="btn btn-secondary">Cancel</button> 
 
      <button type="button" class="btn btn-primary" id="linkUpdate">Update</button> 
 
     </div> 
 
     <div class="col"></div> 
 
    </div> 
 
</div>