Remove specific characters from string jquery

user_10543441 0
Viewed 210

OK, So although it seems normal substring or replaces solution answer it is quite complex for me.

I have 3 checkboxes A,B,C and one text box Now, when user select any checkbox the value of checkbox appends into textbox i.e. Fist he selects A -> textbox will be appended by A Then if selects B -> textbox value will be A, B and so on.

i have done it already. Now the problem is for unchecking.

If the value of textbox is A,B,C i.e. the selected checkboxes are A,B,C and if user deselects the B then the value should be A,C and then again deselects the c then the value should be A.

I have tried multiple ways but don't work for all conditions, sometimes it becomes A, C or A, B

Any solution? Thank you in advance :)

jquery javascript
4 Answers

You can simply recreate the list on change of a box

let els = [...document.getElementsByClassName('check')];
els.forEach(e => e.addEventListener('change', () => {
  document.getElementById('foo').value = els.filter(x => x.checked).map(x => x.value).join();
}))
.flex {
  display: flex;
  flex-direction: column;
}
<div class="flex">
  <input id="foo" />
  <label><input type="checkbox" class="check" value="A"/>A</label>
  <label><input type="checkbox" class="check" value="B"/>B</label>
  <label><input type="checkbox" class="check" value="C"/>C</label>
</div>

user_39936620

Try this:

1) On each checkbox click/unclick get the value of all checked checkboxes. (for example ['A', 'B'])

2) Generate the new string with join the values . ['A', 'B'].join(',') // returns 'A,B'

3) Set the textbox with the new string

If you need code you can submit your current code.

Admin1

Here's what I came up with, without knowing how you're tracking what's checked or not, it's a data driven approach.

var checked = [];

function updateValue() {
  $('#selected').val(checked.toString());
}

$('[type=checkbox]').click(function(e) {
    var value = e.target.value;

    if(e.target.checked) {
        checked.push(value);
    } else {
        checked.splice(checked.indexOf(value), 1);
    }
    updateValue();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="A">A<br>
<input type="checkbox" value="B">B<br>
<input type="checkbox" value="C">C<br>
<input type="text" id="selected">

user_104708600 

$(function() {
  
  const valArray = []; // our value array here what gonna show in textarea
 
  /**
   - on change check if checkbox checked or not
   - if checked push value of checkbox to array
     if not search in our array "valArray" and get it's index then remove it
   - change textarea value with the new array "valArray"
  */
  $('.checkboxes input').on('change', function(e) {
    const $thisVal = $(this).val(),
   isChecked = $(this).is(':checked');

    if (isChecked) {
      valArray.push($thisVal); 
    } else {
      const searchOnThisVal = valArray.find(item => $thisVal === item),
     getTheIdx = valArray.indexOf(searchOnThisVal);

      valArray.splice(getTheIdx, 1);
    }
  
    $('.textarea').empty();
    $('.textarea').text(valArray);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxes">
  <label>
  <input type="checkbox" value="a">
  the checkbox A.
 </label>
 <label>
  <input type="checkbox" value="b">
  the checkbox B.
 </label>
 <label>
  <input type="checkbox" value="c">
  the checkbox C.
 </label>
</div>

<textarea class="textarea" placeholder="your choice..."></textarea>

this should work in your case using jQuery API

user_94681340
Related