Question

我有一个简单的html代码，我希望获得已检查的persistence.xml的值。这是我的代码。

checkbox

Answer 1

将this（这是当前元素）传递给myFunction这样的

＆＃13;

function myFunction(element) {
  var value = element.checked ? element.value : '';
  document.getElementById("demo").innerHTML = value;
}

＆＃13;

Checkbox: <input type="checkbox" name="myCheck" value="myvalue1"  onclick="myFunction(this)">
Checkbox: <input type="checkbox" name="myCheck" value="myvalue2" onclick="myFunction(this)">
Checkbox: <input type="checkbox" name="myCheck" value="myvalue3" onclick="myFunction(this)">

<p id="demo"></p>

＆＃13;

或者如果您想获得所有值

＆＃13;

function myFunction() {
  var checkboxes = document.querySelectorAll('input[name="myCheck"]:checked'),
      values = [],
      len = checkboxes.length, i;
  
  for (i = 0; i < len; i++) {
    values.push(checkboxes[i].value);
  }
  
  document.getElementById("demo").innerHTML = values.join(',');
}

＆＃13;

Checkbox: <input type="checkbox" name="myCheck" value="myvalue1"  onclick="myFunction()">
Checkbox: <input type="checkbox" name="myCheck" value="myvalue2" onclick="myFunction()">
Checkbox: <input type="checkbox" name="myCheck" value="myvalue3" onclick="myFunction()">

<div id="demo"></div>

＆＃13;

Answer 2

您可以使用 querySelector()

Checkbox:
<input type="checkbox" name="myCheck" value="myvalue1" onclick="myFunction()">Checkbox:
<input type="checkbox" name="myCheck" value="myvalue2" onclick="myFunction()">Checkbox:
<input type="checkbox" name="myCheck" value="myvalue3" onclick="myFunction()">

<p id="demo"></p>

<script>
  function myFunction() {
    var x = document.querySelector('[name="myCheck"]:checked').value;
    document.getElementById("demo").innerHTML = x;
  }
</script>

更新：以上方法仅选择第一个已选中的元素，以便全部使用 querySelectorAll()

Checkbox:
<input type="checkbox" name="myCheck" value="myvalue1" onclick="myFunction()">Checkbox:
<input type="checkbox" name="myCheck" value="myvalue2" onclick="myFunction()">Checkbox:
<input type="checkbox" name="myCheck" value="myvalue3" onclick="myFunction()">

<p id="demo"></p>

<script>
  function myFunction() {
    var x = [].map.call(document.querySelectorAll('[name="myCheck"]:checked'), function(v) {
      return v.value
    }).join(' ');
    document.getElementById("demo").innerHTML = x;
  }
</script>

注意：如果您只想一次选择一个元素，则需要使用radio代替checkbox

Checkbox:
<input type="radio" name="myCheck" value="myvalue1" onclick="myFunction()">Checkbox:
<input type="radio" name="myCheck" value="myvalue2" onclick="myFunction()">Checkbox:
<input type="radio" name="myCheck" value="myvalue3" onclick="myFunction()">

<p id="demo"></p>

<script>
  function myFunction() {
    var x = document.querySelector('[name="myCheck"]:checked').value;
    document.getElementById("demo").innerHTML = x;
  }
</script>

Answer 3

使用querySelectorAll

＆＃13;

function myFunction() {
  var checked = document.querySelectorAll('[name=\'myCheck\']:checked');
  var str = '';
  [].forEach.call(checked, function(item) {
    str += item.value + '<br>';
  });
  document.getElementById("demo").innerHTML = str;
}

＆＃13;

Checkbox:
<input type="checkbox" name="myCheck" value="myvalue1" onchange="myFunction()">Checkbox:
<input type="checkbox" name="myCheck" value="myvalue2" onchange="myFunction()">Checkbox:
<input type="checkbox" name="myCheck" value="myvalue3" onchange="myFunction()">

<p id="demo"></p>

＆＃13;

获取相应复选框的值

3 个答案: