CODEWITHSUNDEEP
javascripthtml
jasna
jasna

Reputation: 61

Get the value of corresponding check box

I have a simple html code where I would like to get the value of the checkbox which is been checked. Here is my code.

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

Upvotes: 0

Views: 635

Answers (3)

Oleksandr T.
Oleksandr T.

Reputation: 77512

Pass this (this is the current element) to function myFunction like this

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>

or if you want to get all values 

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>

Upvotes: 1

Pranav C Balan
Pranav C Balan

Reputation: 115272

You can use 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 : Above method only selects first checked element, to get all use 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>

NOTE : If you want only select one element at a time then you need to go with radio instead of 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>

Upvotes: 1

Rayon
Rayon

Reputation: 36609

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

Upvotes: 1

Related Questions