Jquery - Adding / Removing values from an input based on checkbox statuses

KFNinja
March 13, 2024
252 views
0 votes
2 Answers

I have the following form with bunch of checkboxes. I need to add or remove CaseIDs from the input if user checks or unchecks them.

The desired result is the unique caseIDs that are checked. Any ideas?
Thanks in advance.

Code Snippet

// This is what I have so far :

let selectedCases = $('input[id="save-info"]').filter(':checked').map(function() {
  return this.value;
}).get();

let existingCases = $('#selected-cases').val();

$('#summary').html(selectedCases.join(","));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<form name="test-form" id="test-form" action="/delMe8.cfm" method="post">

<div class="col-12">
  <label for="selected-cases" class="form-label">selected cases<span class="text-muted"> *</span></label>
  <input type="text" id="selected-cases" name="selected-cases" class="form-control" value="3966382,4168801,4168802,4169839">
</div>
<hr class="my-4">
<div class="form-check">
  <input type="checkbox" class="form-check-input" id="save-info" value="3966382" checked>
  <label class="form-check-label" for="save-info">Save CaseID : 3966382</label>
</div>
<div class="form-check">
  <input type="checkbox" class="form-check-input" id="save-info" value="4029501">
  <label class="form-check-label" for="save-info">Save CaseID : 4029501</label>
</div>

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="save-info" value="4168818">
  <label class="form-check-label" for="save-info">Save CaseID : 4168818</label>
</div>

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="save-info" value="4168801" checked>
  <label class="form-check-label" for="save-info">Save CaseID : 4168801</label>
</div>

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="save-info" value="4168802" checked>
  <label class="form-check-label" for="save-info">Save CaseID : 4168802</label>
</div>

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="save-info" value="4168822">
  <label class="form-check-label" for="save-info">Save CaseID : 4168822</label>
</div>

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="save-info" value="3966388">
  <label class="form-check-label" for="save-info">Save CaseID : 3966388</label>
</div>

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="save-info" value="4114087">
  <label class="form-check-label" for="save-info">Save CaseID : 4114087</label>
</div>

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="save-info" value="3966385">
  <label class="form-check-label" for="save-info">Save CaseID : 3966385</label>
</div>

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="save-info" value="4169838">
  <label class="form-check-label" for="save-info">Save CaseID : 4169838</label>
</div>

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="save-info" value="4169843">
  <label class="form-check-label" for="save-info">Save CaseID : 4169843</label>
</div>

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="save-info" value="4168829">
  <label class="form-check-label" for="save-info">Save CaseID : 4168829</label>
</div>

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="save-info" value="4168828">
  <label class="form-check-label" for="save-info">Save CaseID : 4168828</label>
</div>

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="save-info" value="4168835">
  <label class="form-check-label" for="save-info">Save CaseID : 4168835</label>
</div>

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="save-info" value="4169835">
  <label class="form-check-label" for="save-info">Save CaseID : 4169835</label>
</div>

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="save-info" value="4169836">
  <label class="form-check-label" for="save-info">Save CaseID : 4169836</label>
</div>

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="save-info" value="4169837">
  <label class="form-check-label" for="save-info">Save CaseID : 4169837</label>
</div>

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="save-info" value="4169839" checked>
  <label class="form-check-label" for="save-info">Save CaseID : 4169839</label>
</div>

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="save-info" value="3946200">
  <label class="form-check-label" for="save-info">Save CaseID : 3946200</label>
</div>

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="save-info" value="3946201">
  <label class="form-check-label" for="save-info">Save CaseID : 3946201</label>
</div>


<button class="w-10 btn btn-primary btn-sm" type="submit">Save</button>

<div class="col-md-5">
  <div id="summary">
    selected-cases : <br/>
  </div>
</div>

</form>

Tags: javascript jquery

Answers

Here is a slightly edited version that will work in the expected way:

$("#test-form")
 .on("input",collectAllChecked)
 .submit(function(ev){ // at submit time: copy input text to #summary div
  $("#summary").html("selected-cases : <br/>"+$("#selected-cases").val())
  ev.preventDefault();
})
function collectAllChecked(ev){
  const checked=$(".form-check-input:checked").get().map(el=>el.value)
  $("#selected-cases").val(checked.join(","));
}
collectAllChecked();

#selected-cases {width:500px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form id="test-form">
  <div class="col-12">
    <label for="selected-cases" class="form-label">selected cases<span class="text-muted"> *</span></label>
    <input type="text" id="selected-cases" name="selected-cases" class="form-control">
  </div>

  <hr class="my-4"><div class="form-check">
    <label class="form-check-label"><input type="checkbox" class="form-check-input" value="3966382" checked>Save CaseID : 3966382</label>
  </div><div class="form-check">
    <label class="form-check-label"><input type="checkbox" class="form-check-input" value="4029501">Save CaseID : 4029501</label>
  </div><div class="form-check">
    <label class="form-check-label"><input type="checkbox" class="form-check-input" value="4168818" checked>Save CaseID : 4168818</label>
  </div><div class="form-check">
    <label class="form-check-label"><input type="checkbox" class="form-check-input" value="4168801">Save CaseID : 4168801</label>
  </div><div class="form-check">
    <label class="form-check-label"><input type="checkbox" class="form-check-input" value="4168802">Save CaseID : 4168802</label>
  </div><div class="form-check">
    <label class="form-check-label"><input type="checkbox" class="form-check-input" value="4168822" checked>Save CaseID : 4168822</label>
  </div><div class="form-check">
    <label class="form-check-label"><input type="checkbox" class="form-check-input" value="3966388">Save CaseID : 3966388</label>
  </div><div class="form-check">
    <label class="form-check-label"><input type="checkbox" class="form-check-input" value="4114087">Save CaseID : 4114087</label>
  </div><div class="form-check">
    <label class="form-check-label"><input type="checkbox" class="form-check-input" value="3966385">Save CaseID : 3966385</label>
  </div><div class="form-check">
    <label class="form-check-label"><input type="checkbox" class="form-check-input" value="4169838">Save CaseID : 4169838</label>
  </div><div class="form-check">
    <label class="form-check-label"><input type="checkbox" class="form-check-input" value="4169843">Save CaseID : 4169843</label>
  </div><div class="form-check">
    <label class="form-check-label"><input type="checkbox" class="form-check-input" value="4168829">Save CaseID : 4168829</label>
  </div><div class="form-check">
    <label class="form-check-label"><input type="checkbox" class="form-check-input" value="4168828">Save CaseID : 4168828</label>
  </div><div class="form-check">
    <label class="form-check-label"><input type="checkbox" class="form-check-input" value="4168835">Save CaseID : 4168835</label>
  </div><div class="form-check">
    <label class="form-check-label"><input type="checkbox" class="form-check-input" value="4169835">Save CaseID : 4169835</label>
  </div><div class="form-check">
    <label class="form-check-label"><input type="checkbox" class="form-check-input" value="4169836">Save CaseID : 4169836</label>
  </div><div class="form-check">
    <label class="form-check-label"><input type="checkbox" class="form-check-input" value="4169837">Save CaseID : 4169837</label>
  </div><div class="form-check">
    <label class="form-check-label"><input type="checkbox" class="form-check-input" value="4169839">Save CaseID : 4169839</label>
  </div><div class="form-check">
    <label class="form-check-label"><input type="checkbox" class="form-check-input" value="3946200">Save CaseID : 3946200</label>
  </div><div class="form-check">
    <label class="form-check-label"><input type="checkbox" class="form-check-input" value="3946201">Save CaseID : 3946201</label>
  </div>


  <button class="w-10 btn btn-primary btn-sm" type="submit">Save</button>
  <div class="col-md-5">
    <div id="summary">
      selected-cases : <br/>
    </div>
  </div>
</form>

I also worked in the recommendations of @RokoC.Buljan: The event function for "input" events is now a separate function that is used to calculate the initial state.

So easy with vanilla JS…

const testForm = document.forms['test-form']
  ;
setSelects() // for page load INIT
  ;
testForm.addEventListener('input',setSelects) // including any checkBox click event
  ;
function setSelects()
  {
  let formInputs = Object.fromEntries( new FormData(testForm) );
  testForm['selected-cases'].value = Object.keys(formInputs).filter(k=>!isNaN(k)).join(',');
  }   //     ^-- this is element name

testForm.addEventListener('submit', (e)=>
  {
  e.preventDefault();
  testForm.summary.textContent = testForm['selected-cases'].value;
  }); //     ^-- this is element name

body {
  font-family : 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size   : 16px;
  }
label { 
  display : block;
  cursor  : pointer;
  } 
input[name="selected-cases"] { 
  width : 500px; 
  }
output[name="summary"] { 
  display : block; 
  }
output[name="summary"]::before {
  content : attr(name) ': A'
}

<form name="test-form" action="/delMe8.cfm" method="post">

  <label>
    selected cases<sup>*</sup>
    <input type="text" name="selected-cases" value="" readonly>
  </label>
  <hr>
  <label><input type="checkbox" name="3966382" value="x" checked>  Save CaseID : 3966382 </label>
  <label><input type="checkbox" name="4029501" value="x"        >  Save CaseID : 4029501 </label>
  <label><input type="checkbox" name="4168818" value="x"        >  Save CaseID : 4168818 </label>
  <label><input type="checkbox" name="4168801" value="x" checked>  Save CaseID : 4168801 </label>
  <label><input type="checkbox" name="4168802" value="x" checked>  Save CaseID : 4168802 </label>
  <label><input type="checkbox" name="4168822" value="x"        >  Save CaseID : 4168822 </label>
  <label><input type="checkbox" name="3966388" value="x"        >  Save CaseID : 3966388 </label>
  <label><input type="checkbox" name="4114087" value="x"        >  Save CaseID : 4114087 </label>
  <label><input type="checkbox" name="3966385" value="x"        >  Save CaseID : 3966385 </label>
  <label><input type="checkbox" name="4169838" value="x"        >  Save CaseID : 4169838 </label>
  <label><input type="checkbox" name="4169843" value="x"        >  Save CaseID : 4169843 </label>
  <label><input type="checkbox" name="4168829" value="x"        >  Save CaseID : 4168829 </label>
  <label><input type="checkbox" name="4168828" value="x"        >  Save CaseID : 4168828 </label>
  <label><input type="checkbox" name="4168835" value="x"        >  Save CaseID : 4168835 </label>
  <label><input type="checkbox" name="4169835" value="x"        >  Save CaseID : 4169835 </label>
  <label><input type="checkbox" name="4169836" value="x"        >  Save CaseID : 4169836 </label>
  <label><input type="checkbox" name="4169837" value="x"        >  Save CaseID : 4169837 </label>
  <label><input type="checkbox" name="4169839" value="x" checked>  Save CaseID : 4169839 </label>
  <label><input type="checkbox" name="3946200" value="x"        >  Save CaseID : 3946200 </label>
  <label><input type="checkbox" name="3946201" value="x"        >  Save CaseID : 3946201 </label> 


  <button class="w-10 btn btn-primary btn-sm" type="submit">Save</button>

  <output class="col-md-5" name="summary"></output>
</form>

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – Adding / Removing values from an input based on checkbox statuses

Answers