

以下のようなhtmlでチェックボックスがチェックされた際にnameの値を取得するには、どのようなコードで実現できますでしょうか。

詳しい方、ご教示ください。

[code]

    <div id="size-category-tab-22" class="tab-pane">
        <div class="size-category-checkbox-section">
            <div class="size-category-column" id="size-category-column-2">
                <label class="size-labels">
                  <input type="checkbox" class="sizes-row-checkbox" name="78" display-name="7 - 8"> 7 - 8
                </label>
                <label class="size-labels">
                  <input type="checkbox" class="sizes-row-checkbox" name="910" display-name="9 - 10"> 9 - 10
                </label>
            </div>
            <div class="size-category-column" id="size-category-column-3">
                <label class="size-labels">
                  <input type="checkbox" class="sizes-row-checkbox" name="1112" display-name="11 - 12"> 11 - 12
                </label>
                <label class="size-labels">
                  <input type="checkbox" class="sizes-row-checkbox" name="131" display-name="13 - 1"> 13 - 1
                </label>
            </div>
            <div class="size-category-column" id="size-category-column-4">
                <label class="size-labels">
                  <input type="checkbox" class="sizes-row-checkbox" name="23" display-name="2 - 3"> 2 - 3
                </label>
            </div>
        </div>
        <div class="size-category-add-section"> </div>
        <div class="size-category-size-chart"> </div>
    </div>
    
[/code]


CC BY-SA 3.0
2016-11-04T09:56:45.357
30096
2016-11-04T23:26:34.267
2016-11-04T10:18:17.743
18621
8619
question
javascript
javascript checkboxのnameの値を取得する


「input」タグのリストを取得します：

[code]

    var checkboxes = document.getElementsByTagName("input");
    
[/code]

オブジェクトごとに、その「type」とその"checked"プロパティをチェック:

[code]

    if (checkboxes[i].type === "checkbox" && checkboxes[i].checked) {
    
[/code]

例えば、値が表示されます以下は、ボタンがクリックされたとき：

[code]

    function displayChecked() {
    
      var checkboxes = document.getElementsByTagName("input");
      var log = document.getElementById('log');
      log.innerHTML = "";
    
      for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].type === "checkbox" && checkboxes[i].checked) {
          var name = checkboxes[i].name;
          log.innerHTML += "<li>" + "checkboxのnameの値は : " + name + "</li>";
        }
      }
    }
[/code]

[code]

    <div id="size-category-tab-22" class="tab-pane">
      <div class="size-category-checkbox-section">
        <div class="size-category-column" id="size-category-column-2">
          <label class="size-labels">
            <input type="checkbox" class="sizes-row-checkbox" name="78" display-name="7 - 8"> 7 - 8
          </label>
          <label class="size-labels">
            <input type="checkbox" class="sizes-row-checkbox" name="910" display-name="9 - 10"> 9 - 10
          </label>
        </div>
        <div class="size-category-column" id="size-category-column-3">
          <label class="size-labels">
            <input type="checkbox" class="sizes-row-checkbox" name="1112" display-name="11 - 12"> 11 - 12
          </label>
          <label class="size-labels">
            <input type="checkbox" class="sizes-row-checkbox" name="131" display-name="13 - 1"> 13 - 1
          </label>
        </div>
        <div class="size-category-column" id="size-category-column-4">
          <label class="size-labels">
            <input type="checkbox" class="sizes-row-checkbox" name="23" display-name="2 - 3"> 2 - 3
          </label>
        </div>
      </div>
      <div class="size-category-add-section"> </div>
      <div class="size-category-size-chart"> </div>
    </div>
    <div>
      <input type="submit" value="チェックcheckboxのnameは？" onclick="displayChecked()" />
      <ul id="log">
      </ul>
    </div>
[/code]


CC BY-SA 3.0
2016-11-04T23:26:34.267
30110
2016-11-04T23:26:34.267
17321
30096
answer