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标签......

基本上，您为复选框的元素添加处理程序。然后，您只选中带有Previous的复选框，然后您只需使用jQuery每个函数访问每个元素。

:checked

$(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'));
    });
  });

Answer 2

您需要先检查两者，否则函数将返回＆＃34; A＆＃34;并且永远不会达到可以返回两者的代码。当从每个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

Answer 3

fiddle example

其他人提供的答案非常好。我想补充一点：

如果要在用户选中此框时获取值，可以将eventListen作为复选框的委托添加到父表。正如我在fiddle example
中所示

    <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>

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

3 个答案: