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

Return a string based on checkbox checked

本文关键字：一个 字符串 返回 复选框      更新时间：2023-09-26

我有一个有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 to = 'A'作为字符串。好奇如何修复我的Javascript，让它的工作。

这里有一个使用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>

您需要首先检查这两个，因为否则函数将返回"A"，并且永远不会到达将返回两个的代码。当从每个if返回时，也可以消除所有if-else复杂性。

辅助函数和一些变量可以减少重复和代码长度。

var isChecked = function(id){
     var e = document.getElementById(id);
     return (e && e.checked);
}
var getCheck = function() {
     var A = isChecked("A");
     var B = isChecked("B");
     if (A && B) return "Both";
     if (A) return "A";
     if (B) return "B";
     return "None";
}
对于测试，您可以添加 
window.onclick = function(){ console.log(getCheck()); }

demo via jsfiddle

示例

其他人提供的答案是相当好的。我还想补充一点:

如果你想在用户选中复选框时获取值，你可以添加一个eventListen到父表作为复选框的委托。正如我在小提琴示例

中所示
    <table id="mytable">
        <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>
相关文章：