Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Unpopulate input field of certian value when box is unchecked

Context:

Select dropdown for value change(Select Solo to remove one value):

<select id="T" name="unittype" class="form-control" style="width: 100%;" required>
    <option value="" hidden>Select one ...</option>
    <option value="Pair">Pair</option>
    <option value="Solo">Solo</option>
    <option value="Pair Unit acting like a Solo Unit">Pair Unit acting like a Solo Unit</option>
    <option value="Solo to Pair Unit">Solo to Pair Unit</option>
</select>

Adds values to input field:

 $('input:checkbox').change((e) => {
     if ($(e.currentTarget).is(':checked')) {
         var curVal = $('#name').val();
         if (curVal) {
             $('#name').val(curVal + ', ' + e.currentTarget.value);
         } else {

             $('#name').val(e.currentTarget.value);
         }
     } else if (!($(e.currentTarget).is(':checked'))) {
         var curVal = $('#name').val().split(',');
         var filteredVal = curVal.filter(el => el.trim() !== e.currentTarget.value)
         $('#name').val(filteredVal.join(','));
     }
 });

Removes Checkboxes from HTML table:

 const checkboxes = document.querySelectorAll('input[type=checkbox]:checked');
 if (checkboxes.length >= 2) {
     checkboxes[1].checked = false;
     
 }

Problem: When the second box that is checked unchecked, the value is still present in input field. I want the value removed. Can some help me modify the code or find a solution to my problem? I tried everything I could think of and it is not working. Note: Names in input field in photo are fictional.
Pictures:
Input field:
enter image description here

Table:

enter image description here

What I tried was Researching online and trying different things that I found and modifying it to where it fits my project. What I expected to happen was second value in input field gets removed. What really happened is that the second value did not get removed

Tags:

2

Answers


  1. 0

    You need to remove the selected option from the selectdropdown.

    I have modified the code to do that. Also I changed the code to stop mixing Vanilla JS and jQuery in the same function. Now it uses only jQuery code/functions

    See full demo below:

      // remove from select box
  $("#T").find("[value='" + selectedVal + "']").remove();

    $('input:checkbox').on('change', function() {
  var selectedVal = $(this).val();
  console.log(selectedVal);

  if ($(this).is(':checked')) {
    var curVal = $('#name').val();

    if (curVal) {
      $('#name').val(curVal + ', ' + selectedVal);
    } else {

      $('#name').val(selectedVal);
    }
  } else {
    var curVal = $('#name').val().split(',');
    var filteredVal = curVal.filter(el => el.trim() !== selectedVal)
    $('#name').val(filteredVal.join(','));

    // remove from select box
    $("#T").find("[value='" + selectedVal + "']").remove();
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<select id="T" name="unittype" class="form-control" style="width: 50%;" required>
  <option value="" hidden>Select one ...</option>
  <option value="Pair">Pair</option>
  <option value="Solo">Solo</option>
  <option value="Pair Unit acting like a Solo Unit">Pair Unit acting like a Solo Unit</option>
  <option value="Solo to Pair Unit">Solo to Pair Unit</option>
</select>
<hr/>
<input type="text" id="name" /><br/>
<br/>
<input type="checkbox" value="Pair">Pair</input><br/>
<input type="checkbox" value="Solo">Solo</input><br/>
<input type="checkbox" value="Pair Unit acting like a Solo Unit">Pair Unit acting like a Solo Unit</input><br/>
<input type="checkbox" value="Solo to Pair Unit">Solo to Pair Unit</input><br/>
    Login or Signup to reply.
  2. 0

    You need to define a function that will check for Solo, and if so, loop the checkboxes, uncheck those that are after the first and trigger a change event. And of course, set this as a change event for your select:

     $('input:checkbox').change((e) => {
     if ($(e.currentTarget).is(':checked')) {
         var curVal = $('#name').val();
         if (curVal) {
             $('#name').val(curVal + ', ' + e.currentTarget.value);
         } else {

             $('#name').val(e.currentTarget.value);
         }
     } else if (!($(e.currentTarget).is(':checked'))) {
         var curVal = $('#name').val().split(',');
         var filteredVal = curVal.filter(el => el.trim() !== e.currentTarget.value)
         $('#name').val(filteredVal.join(','));
     }
 });
 function handleChange(value) {
     if (value === "Solo") {
         const checkboxes = document.querySelectorAll('input[type=checkbox]:checked');
         if (checkboxes.length >= 2) {
             for (let index = 1; index < checkboxes.length; index++) {
                 $(checkboxes[index]).prop("checked", false).change();
             }
         }
     }
 }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<select id="T" name="unittype" onchange="handleChange(this.value)" class="form-control" style="width: 100%;" required>
    <option value="" hidden>Select one ...</option>
    <option value="Pair">Pair</option>
    <option value="Solo">Solo</option>
    <option value="Pair Unit acting like a Solo Unit">Pair Unit acting like a Solo Unit</option>
    <option value="Solo to Pair Unit">Solo to Pair Unit</option>
</select>
<input type="text" id="name">
<br>
<label for="A"><input type="checkbox" id="A" value="A">A</label>
<br>
<label for="B"><input type="checkbox" id="B" value="B">B</label>
<br>
<label for="C"><input type="checkbox" id="C" value="C">C</label>
<br>
<label for="D"><input type="checkbox" id="D" value="D">D</label>

    Another snippet where the behavior is triggered for all changes:

    $('input:checkbox').change((e) => {
     if ($(e.currentTarget).is(':checked')) {
         var curVal = $('#name').val();
         if (curVal) {
             $('#name').val(curVal + ', ' + e.currentTarget.value);
         } else {

             $('#name').val(e.currentTarget.value);
         }
     } else if (!($(e.currentTarget).is(':checked'))) {
         var curVal = $('#name').val().split(',');
         var filteredVal = curVal.filter(el => el.trim() !== e.currentTarget.value)
         $('#name').val(filteredVal.join(','));
     }
 });
 function handleChange(value) {
         const checkboxes = document.querySelectorAll('input[type=checkbox]:checked');
         if (checkboxes.length >= 2) {
             for (let index = 1; index < checkboxes.length; index++) {
                 $(checkboxes[index]).prop("checked", false).change();
             }
         }
 }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<select id="T" name="unittype" onchange="handleChange(this.value)" class="form-control" style="width: 100%;" required>
    <option value="" hidden>Select one ...</option>
    <option value="Pair">Pair</option>
    <option value="Solo">Solo</option>
    <option value="Pair Unit acting like a Solo Unit">Pair Unit acting like a Solo Unit</option>
    <option value="Solo to Pair Unit">Solo to Pair Unit</option>
</select>
<input type="text" id="name">
<br>
<label for="A"><input type="checkbox" id="A" value="A">A</label>
<br>
<label for="B"><input type="checkbox" id="B" value="B">B</label>
<br>
<label for="C"><input type="checkbox" id="C" value="C">C</label>
<br>
<label for="D"><input type="checkbox" id="D" value="D">D</label>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search