javascript - 根据选中的复选框返回一个字符串

Question

我有一个包含 2 个复选框的表格:

<table>
  <tr>
    <td>
      <label for="A">
        <input type="checkbox" name="A" id="A" value="true" />
        A
      </label>

      <label for="B">
        <input type="checkbox" name="B" id="B" value="true" />
        B
      </label>
    </td>
  </tr>
</table>

并且我希望能够识别选中了哪个框(通过 id)，并能够根据框将字符串存储为变量。这是我的 JavaScript:

  var getCheck = function() {
    if (document.getElementById('A').checked) {
      return "A";
    }

    else if (document.getElementById('B').checked){
      return "B";
    }
    else if ((document.getElementById('A').checked) && (document.getElementById('B').checked)) {
      return "Both"
    }
      console.log(getCheck); // for debugging
  };

因此，如果我检查“A”，我希望 getCheck 以字符串形式 =“A”。想知道如何修复我的 Javascript 以使其正常工作。

Answer 1

这是一个如何使用 jQuery 实现的示例，使用它更容易，因为有一个 jQuery 标记...

基本上，您为复选框元素添加处理程序。然后使用 :checked 仅选择选中的复选框，然后使用 jQuery each 函数访问每个元素。

$(function(){
  $('input[type=checkbox]').on('change', function(){
    var checked = [];
    $('input[type=checkbox]:checked').each(function(index, checkbox){
      checked.push($(checkbox).attr('id'));
      });
    $('#result').text(JSON.stringify(checked, '/t'));
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <label for="A">
        <input type="checkbox" name="A" id="A" value="true" />
        A
      </label>

      <label for="B">
        <input type="checkbox" name="B" id="B" value="true" />
        B
      </label>
    </td>
  </tr>
</table>
<pre id="result"></pre>