CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Kalpesh Shende
Kalpesh Shende

Reputation: 122

How to clear input after unchecking all checkboxes

I have 5 checkboxes and I want to display the value of the selected checkbox in an input tag. Everything is working fine, however when I uncheck all the checkboxes, the input always returns the value of the last unchecked checkbox. What I want is when I uncheck all the checkboxes, the input tag should be empty.

I have tried an if-statement to clear the input when every box is empty but it sometimes works unexpectedly. I am using jQuery as a javascript library. 

$('.checkbox_ss').click(function() {
  var text = '';
  $('.checkbox_ss:checked').each(function() {
    text += $(this).val();
    $('#checkVal').val(text);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="" id="check_holder">
  <div style="text-align: center;font-weight: bolder;color: white;background: dodgerblue;line-height: 1.7rem">Check Example</div>
  <div><input type="checkbox" name="check_val" class="checkbox_ss" value="1"><label for="">value 1</label></div>
  <div><input type="checkbox" name="check_val" class="checkbox_ss" value="2"><label for="">value 2</label></div>
  <div><input type="checkbox" name="check_val" class="checkbox_ss" value="3"><label for="">value 3</label></div>
  <div><input type="checkbox" name="check_val" class="checkbox_ss" value="4"><label for="">value 4</label></div>
  <div><input type="checkbox" name="check_val" class="checkbox_ss" value="5"><label for="">value 5</label></div>
</div>
<input type="text" id="checkVal">

Upvotes: 0

Views: 203

Answers (3)

Rory McCrossan
Rory McCrossan

Reputation: 337560

This is because you only update the text of the element when there is a :checked box.

To fix this you could instead update the text of #checkVal regardless of the state of the checkbox by moving the val() setter outside of the loop.

You could also amend the logic to build an array from the checkbox values and output that in to the text of the element. Try this:

$('.checkbox_ss').click(function() {
  var values = $('.checkbox_ss:checked').map(function() { return this.value; }).get();
  $('#checkVal').val(values.join(''));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="" id="check_holder">
  <div style="text-align: center;font-weight: bolder;color: white;background: dodgerblue;line-height: 1.7rem">Check Example</div>
  <div>
    <label>
      <input type="checkbox" name="check_val" class="checkbox_ss" value="1">
      value 1
    </label>
  </div>
  <div>
    <label>
      <input type="checkbox" name="check_val" class="checkbox_ss" value="2">
      value 2
    </label>
  </div>
  <div>
    <label>
      <input type="checkbox" name="check_val" class="checkbox_ss" value="3">
      value 3
    </label>
  </div>
  <div>
    <label>
      <input type="checkbox" name="check_val" class="checkbox_ss" value="4">
      value 4
    </label>
  </div>
  <div>
    <label>
      <input type="checkbox" name="check_val" class="checkbox_ss" value="5">
      value 5
    </label>
  </div>
</div>
<input type="text" id="checkVal">

Also note that your label element's weren't having any affect, so I've amended them in your HTML.

Upvotes: 1

Barmar
Barmar

Reputation: 780724

If none of the boxes are checked, your loop doesn't have anything to do. So it leaves the old value in the input.

You should update the value outside the loop.

$('.checkbox_ss').click(function() {
  var text = '';
  $('.checkbox_ss:checked').each(function() {
    text += $(this).val();
  });
  $('#checkVal').val(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="" id="check_holder">
  <div style="text-align: center;font-weight: bolder;color: white;background: dodgerblue;line-height: 1.7rem">Check Example</div>
  <div><input type="checkbox" name="check_val" class="checkbox_ss" value="1"><label for="">value 1</label></div>
  <div><input type="checkbox" name="check_val" class="checkbox_ss" value="2"><label for="">value 2</label></div>
  <div><input type="checkbox" name="check_val" class="checkbox_ss" value="3"><label for="">value 3</label></div>
  <div><input type="checkbox" name="check_val" class="checkbox_ss" value="4"><label for="">value 4</label></div>
  <div><input type="checkbox" name="check_val" class="checkbox_ss" value="5"><label for="">value 5</label></div>
</div>
<input type="text" id="checkVal">

Upvotes: 4

Andr&#233;
Andr&#233;

Reputation: 343

At first set your value to an empty string then loop through your checkboxes.

$('.checkbox_ss').click(function(){
        var text = '';
        $('#checkVal').val(text);
        $('.checkbox_ss:checked').each(function(){
            text += $(this).val();
            $('#checkVal').val(text);
        });
    });

Upvotes: 0

Related Questions