How to check if checkbox is checked in Javascript

Question

I need to make 5 checkbox which all have a value, going from 1 to 5, I need to print out in a textbox the value when I check one, I can uncheck the boxes and the number disappears.. My problem lies in the uncheck part, I can't seem to find a way to remove the value from the textbox when it's unchecked.. I tried

if( aInput[0].checked == false){

    aTxt[0].value = aInput[0].value;

}

But it dosen't work

can you provide your entire code dealing with the writing of text to your textbox please — haxxxton
– haxxxton, Commented Mar 9, 2017 at 1:48
<input type="checkbox" value="1" id = "R36" name="radio" onClick="textbox.value += this.value + ', '"/> This is the method I used to print the values in the textbox — Ulysse Corbeil
– Ulysse Corbeil, Commented Mar 9, 2017 at 2:04
In this case you might want to write <input type="checkbox" value="1" id = "R36" name="radio" onClick="textbox.value += (this.checked ? this.value : '0') + ', '"/> - If you want your checkbox to be initially checked, use the checked attribute: <input type="checkbox" checked="checked" /> — le_m
– le_m, Commented Mar 9, 2017 at 2:11

le_m · Accepted Answer · 2017-03-09 02:04:28Z

7

According to MDN, the result of getting the value property of a checkbox will always be the string "on" or another value that you specified elsewhere. It won't change when you check or uncheck the box.

Thus, the textbox's value will always be set to the same value.

See for yourself:

checkbox = document.getElementById("checkbox");

checkbox.addEventListener('change', function(e) {
  console.log(checkbox.checked, checkbox.value);
});

<input id="checkbox" type="checkbox">

You need to modify your code, e.g. as follows:

if (aInput[0].checked) {
    aTxt[0].value = aInput[0].value;
} else {
    aTxt[0].value = ''; // define a value
}

edited Mar 9, 2017 at 2:04

answered Mar 9, 2017 at 1:56

le_m

20.4k10 gold badges70 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Barmar · Accepted Answer · 2017-03-09 01:50:03Z

0

When it's not checked, set the text box to an empty string:

for (var i = 0; i < aInput.length; i++) {
    if (aInput[i].checked) {
        aTxt[i] = aInput[i].value;
    } else {
        aTxt[i] = '';
    }
}

answered Mar 9, 2017 at 1:50

Barmar

789k57 gold badges554 silver badges669 bronze badges

Comments

duterte · Accepted Answer · 2017-03-09 01:55:40Z

0

Just make the value of the textbox to zero or empty

if( aInput[0].checked == false){

aTxt[0].value = "";

 }

answered Mar 9, 2017 at 1:55

duterte

398 bronze badges

Comments

Ousmane D. · Accepted Answer · 2017-03-09 01:56:36Z

0

try this:

for(var i = 0; i < aInput.length; i++)
   if(!aInput[i].checked){
      aTxt[i].value = '';
   }
}

the code above will basically set the value of that particular textbox to an empty string if it is not checked.

edited Mar 9, 2017 at 1:56

answered Mar 9, 2017 at 1:50

Ousmane D.

56.6k8 gold badges101 silver badges134 bronze badges

Comments

Kumar Nitesh · Accepted Answer · 2017-03-09 02:09:35Z

$('input[type="checkbox"]').on("click", DoSomething);


function  DoSomething(){
     if($(this).prop('checked') == true){
     document.getElementById('text').innerHTML+=$(this).val();
     }
     else{
     var text = document.getElementById('text').innerHTML;
     text=  text.replace($(this).val(),'');
     document.getElementById('text').innerHTML = text;
     }
          
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="checkbox" name="help_text" value="1" />

<input type="checkbox" name="help_text" value="2" />
<input type="checkbox" name="help_text" value="3" />
<input type="checkbox" name="help_text" value="4" />
<input type="checkbox" name="help_text" value="5" />
</form>
<div id="text"></div>

I did use jquery, but you can write it in pure js also

Ulysse Corbeil · Accepted Answer · 2017-03-09 18:34:18Z

-1

The problem is I need to be able to show all the numbers at once, for exemple : 1,2,3,4,5 or 1,3,5 or 1,2,5 , etc..

answered Mar 9, 2017 at 18:34

Ulysse Corbeil

791 gold badge3 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to check if checkbox is checked in Javascript

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related