獲取相應複選框的值

我有一個簡單的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

獲取相應複選框的值

回答

相關問題