Question

好的，因此，尽管看起来是正常的子字符串或替换了解决方案答案，但对我来说却相当复杂。

我有3个checkboxes A，B，C 一个文本框现在，当用户选择任何复选框时，复选框的值将附加到文本框中，即他选择的拳头为A->文本框将由A附加然后，如果选择B->文本框值将为A，B，依此类推。

我已经做到了。现在问题出在取消检查上。

如果textbox的值是A，B，C，即选中的复选框是A，B，C，并且如果用户取消选择B，则该值应该是A，C，然后再次取消选择c，然后选择值应为A。

我尝试了多种方法，但并非在所有情况下都有效，有时它变成了A，C或A，B

有解决方案吗？预先谢谢你：）

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>

Answer 2

function displayVals() {
  var singleValues = $( "#single" ).val();
  var multipleValues = $( "#multiple" ).val() || [];
  $( "p" ).html( "Single: " + singleValues +
    " Multiple: " + multipleValues.join( ", " ) );
}
$( "select" ).change( displayVals );
displayVals();

p {
    color: red;
    margin: 4px;
  }
  b {
    color: blue;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p></p>
<select id="single">
  <option>Single</option>
  <option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
  <option selected="selected">A</option>
  <option>B</option>
  <option selected="selected">C</option>
</select>

Answer 3

尝试一下：

1）在每个复选框上单击/取消单击，以获取所有选中的复选框的值。（例如['A'，'B']）

2）生成具有连接值的新字符串。 ['A'，'B']。join（'，'）//返回'A，B'

3）使用新字符串设置文本框

如果您需要验证码，则可以提交当前验证码。

Answer 4

这就是我想出的，它不知道您如何跟踪已检查的内容，这是一种数据驱动的方法。

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

Answer 5

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

的情况下，这应该可以工作

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

5 个答案: