JavaScript：チェックボックスでチェックした項目の値（配列）をjoinなどで結合させる方法

 

html

<!DOCTYPE HTML>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title></title>
</head>

<body>
  <form action="">
    <p>
      <label>
        <input type="checkbox" name="chkbtn[]" value="111" />
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" name="chkbtn[]" value="222" />
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" name="chkbtn[]" value="333" />
      </label>
    </p>
    <p>
      <button type="button" id='chkbtn'>チェックした項目</button>
    </p>
  </form>

</body>

</html>

 

javascript

<script type="text/javascript">
var chkbtn = document.getElementById('chkbtn');
chkbtn.addEventListener('click', function() {
var checkedBtns = [];
var chkboxes = document.getElementsByName('chkbtn[]');
for (var i = 0; i < chkboxes.length; i++) {
  if (chkboxes[i].checked) {
    checkedBtns.push(chkboxes[i].value);
  }
}
var res = checkedBtns.join(',');
alert(res);
});
</script>

 

 

 

category cloud