skip to Main Content

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

2

Answers


  1. 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. 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