Remove specific characters from string jquery [duplicate]

Question

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 :)

Why not just discard the previous value, and calculate the new value from all currently selected boxes? — CertainPerformance
– CertainPerformance, Commented Nov 17, 2018 at 7:30

baao · Accepted Answer · 2018-11-17 07:40:15Z

3

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>

answered Nov 17, 2018 at 7:40

baao

73.6k18 gold badges152 silver badges209 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AnonymousSB Over a year ago

Be aware, this won't work in Internet Explorer, you'll need to convert those ES6 fat arrows and the spread operator. Also, just so you're aware, this solution uses four for loops.

AnonymousSB Over a year ago

I did check for performance. jsperf.com/compare-foreach-vs-tostring

AnonymousSB Over a year ago

Btw, I'm not looking to put you on the offensive here. It's easy to forget that filter, map, and join are all for loops. Even the toString() call in my solution is a for loop, because it calls join behind the scenes.

user2693928 · Accepted Answer · 2018-11-17 07:38:44Z

0

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.

answered Nov 17, 2018 at 7:38

user2693928

Comments

AnonymousSB · Accepted Answer · 2018-11-17 07:58:26Z

0

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">

edited Nov 17, 2018 at 7:58

answered Nov 17, 2018 at 7:51

AnonymousSB

3,58215 silver badges30 bronze badges

Comments

Amir Fawzy · Accepted Answer · 2018-11-17 08:57:13Z

$(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

Collectives™ on Stack Overflow

Remove specific characters from string jquery [duplicate]

4 Answers 4

3 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Linked

Related