从字符串中删除特定字符 jQuery

Question

好的，虽然通常使用子字符串或替换解决方案似乎是答案，但对我来说相当复杂。

我有3个复选框 A,B,C 和一个文本框。现在，当用户选择任何复选框时，复选框的值将附加到文本框中，即首先他选择 A -> 文本框将被 A 填充，然后如果选择 B -> 文本框的值将为 A,B 等等。

我已经做到了。

现在的问题是如何取消选择。

如果 文本框 的值是 A,B,C，即选择了 A,B,C 复选框，如果用户取消选择 B，则值应该是 A,C，然后再次取消选择 C，则值应该是 A。

我尝试了多种方法，但不适用于所有情况，有时变成了 A,C 或 A,B。

有什么解决办法吗？

提前感谢您 ：）

- The N World

---

为什么不直接放弃之前的值，从当前选定的所有框中计算新的值？ - CertainPerformance

你能否发布你的工作解决方案来检查这些框吗？ - AnonymousSB

Answer 1

您可以在框的更改时简单地重新创建列表

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>

- baao

---

请注意，这在Internet Explorer中不起作用，您需要转换那些ES6的fat arrows和spread operator。另外，请注意，此解决方案使用了四个for循环。 - AnonymousSB

我已经检查了性能。https://jsperf.com/compare-foreach-vs-tostring - AnonymousSB

顺便说一下，我不是想让你感到紧张。很容易忘记filter、map和join都是用于循环的。即使在我的解决方案中，toString()调用也是一个循环，因为它在幕后调用了join。 - AnonymousSB

Answer 2

试试这个:

1) 在每次点击/取消勾选复选框时，获取所有已选中复选框的值。（例如 ['A', 'B']）

2) 使用 join 方法将这些值生成一个新的字符串。['A', 'B'].join(',') // 返回 'A,B'

3) 将文本框设置为新的字符串

如果需要代码，请提交您当前的代码。

- user2693928

Answer 3

这是我想出来的，不知道你如何跟踪已选或未选内容，这是一种数据驱动的方法。

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

- AnonymousSB

Answer 4

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

这应该可以在你的情况下使用 jQuery API 来实现。

- Amir Fawzy