JSFiddle - React, Tailwind, and code Playground

by ken3desu

HTML

<button class="btn-csv">CSVダウンロード</button>
<button class="btn-all">全てを選択</button>
<button class="btn-rel">全ての選択を解除</button>
<table class="search-result-table">
  <thead>
    <tr>
      <th>操作対象</th>
      <th>名前</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" value="浜松太郎"></td>
      <td>浜松太郎</td>
    </tr>
    <tr>
      <td><input type="checkbox" value="浜松次郎"></td>
      <td>浜松次郎</td>
    </tr>
    <tr>
      <td><input type="checkbox" value="浜松三郎"></td>
      <td>浜松三郎</td>
    </tr>
  </tbody>
</table>

CSS

table, td, th {
  border: solid 2px;
  text-align: center;
}
input {
  transform: scale(1.5);
}

JavaScript

// 本処理
document.querySelector('.btn-csv').addEventListener('click', function(){
  const checked = [];
  document.querySelectorAll('.search-result-table input').forEach(el => {
    if(el.checked){
      checked.push(el.value);
    }
  });
  alert(checked.join(',') + 'のCSVダウンロードを実行')
});
// 全てを選択
document.querySelector('.btn-all').addEventListener('click', function(){
  document.querySelectorAll('.search-result-table input').forEach(el => {
    if(!el.checked){
      el.checked = 'checked';
    }
  });
});
// 全ての選択を解除
document.querySelector('.btn-rel').addEventListener('click', function(){
  document.querySelectorAll('.search-result-table input').forEach(el => {
    if(el.checked){
      el.checked = '';
    }
  });
});