Checkbox checked or unchecked javascript

Question

I am trying to check and see if the checkbox is checked or unchecked, however when I use element.value it is always returning false for whatever reason... I've tried to use onclick as well. I also printed out the value of element to the console to see if I can tell if the value changes, but couldn't really tell when the checkbox is true or not. Any help is great! Thanks in advance! It keeps going into the else block for whatever reason.

HTML

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" onchange="javascript:addFilter(event,'freshman');">
    <label class="form-check-label" for="defaultCheck1">Freshman</label>
</div>
<script>
    function addFilter(element,string) {
      let filter_array =[];
      if(element.value){
      if(string =="freshman"){
        filter_array.push(string);
        console.log("Add Freshman to Array");
      }
      if(string =="sophmore"){
        filter_array.push(string);
        console.log("Add Junior to Array");
      }
      if(string =="junior"){
        filter_array.push(string);
        console.log("Add junior to Array");
      }
      if(string =="senior"){
        filter_array.push(string);
        console.log("Add Senior from to Array");
      }

    }

else {

      if(string =="freshman"){
        filter_array.push(string);
        console.log("Remove Freshman from Array");
        console.log(element);
      }
      if(string =="sophmore"){
        filter_array.push(string);
        console.log("Remove Junior from Array");
      }
      if(string =="junior"){
        filter_array.push(string);
        console.log("Remove junior from Array");
      }
      if(string =="senior"){
        filter_array.push(string);
        console.log("Remove Senior from Array");
      }
    }
}
  </script>

Possible duplicate of [How to check whether a checkbox is checked in jQuery?](https://stackoverflow.com/questions/901712/how-to-check-whether-a-checkbox-is-checked-in-jquery) — Ivar, Jan 27 '18 at 17:38

score 0 · Accepted Answer · answered Jan 27 '18 at 18:06

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" onchange="javascript:addFilter(event,'freshman');">
    <label class="form-check-label" for="defaultCheck1">Freshman</label>
</div>
<script>
    function addFilter(element,string) {
      let filter_array =[];
      if(element.srcElement.checked){
      if(string =="freshman"){
        filter_array.push(string);
        console.log("Add Freshman to Array");
      }
      if(string =="sophmore"){
        filter_array.push(string);
        console.log("Add Junior to Array");
      }
      if(string =="junior"){
        filter_array.push(string);
        console.log("Add junior to Array");
      }
      if(string =="senior"){
        filter_array.push(string);
        console.log("Add Senior from to Array");
      }

    }

else {

      if(string =="freshman"){
        filter_array.push(string);
        console.log("Remove Freshman from Array");
        console.log(element);
      }
      if(string =="sophmore"){
        filter_array.push(string);
        console.log("Remove Junior from Array");
      }
      if(string =="junior"){
        filter_array.push(string);
        console.log("Remove junior from Array");
      }
      if(string =="senior"){
        filter_array.push(string);
        console.log("Remove Senior from Array");
      }
    }
}
  </script>

In your existing code I have rectified your condition from if(element.value){ to if(element.srcElement.checked){ and its working fine.

Hope it helps.

score -1 · Answer 2 · answered Jan 27 '18 at 17:52

<div class="form-check">
   <input class="form-check-input" type="checkbox" value="" onchange="javascript:addFilter(this, event,'freshman');">
   <label class="form-check-label" for="defaultCheck1">Freshman</label>
</div>
<script>
function addFilter(obj, element,string) {

  let filter_array =[];
  if(obj.checked){
  if(string =="freshman"){
    filter_array.push(string);
    console.log("Add Freshman to Array");
  }
  if(string =="sophmore"){
    filter_array.push(string);
    console.log("Add Junior to Array");
  }
  if(string =="junior"){
    filter_array.push(string);
    console.log("Add junior to Array");
  }
  if(string =="senior"){
    filter_array.push(string);
    console.log("Add Senior from to Array");
  }

}

else {

  if(string =="freshman"){
    filter_array.push(string);
    console.log("Remove Freshman from Array");
    console.log(element);
  }
  if(string =="sophmore"){
    filter_array.push(string);
    console.log("Remove Junior from Array");
  }
  if(string =="junior"){
    filter_array.push(string);
    console.log("Remove junior from Array");
  }
  if(string =="senior"){
    filter_array.push(string);
    console.log("Remove Senior from Array");
  }
}
}
</script>

This should work

am using the .checked property

Happy coding :)

Checkbox checked or unchecked javascript

2 Answers2