获取相应复选框的值

我有一个简单的html代码，我希望获得已检查的checkbox的值。这是我的代码。获取相应复选框的值

<!DOCTYPE html> 
<html> 

<body> 

    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.getElementsByName("myCheck")[0].checked.value; 
      document.getElementById("demo").innerHTML = x; 
     } 
    </script> 

</body> 

</html>

来源

2015-11-06 jasna

通行证'this'到事件处理函数。并从中获取价值。 [演示]（https://jsfiddle.net/tusharj/7oaw2ehf/）。使用'addEventListener'而不是内联检查[** Demo **]（https://jsfiddle.net/tusharj/7oaw2ehf/1/） – Tushar

您必须寻找'radio'按钮。或者你正期待'innerHTML'中的多个值 – Rayon

只需要用myFunction（this）传递这个对象，并将值设置为document.getElementById（“demo”）。innerHTML = obj.value; –

您可以使用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>

UPDATE：以上方法只选择先检查元素，让所有使用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>

代替

来源

2015-11-06 06:27:58

感谢您的快速响应。完美地工作！ – jasna

@jasna：很高兴帮助 –

通this（这是当前元素）的功能myFunction这样

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

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>

，或者如果你想获得的所有值

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

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>

来源

2015-11-06 06:27:54

使用querySelectorAll

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

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>

来源

2015-11-06 06:34:34 Rayon

获取相应复选框的值

回答

相关问题