Question

我有多个复选框，如果我选择了1、2或3个复选框，则应将其值插入另一个输入中。另外，当我们取消选中该值时，应将其从输入中删除。

我是Java的新手。请帮帮我。

<div>
  <label>Your Professional /Educational details *</label><br>
  <label class="checkbox-inline">
    <input type="checkbox" name="professional" value="CA/CS">
    CA/CS
  </label><br>
  <label class="checkbox-inline">
    <input type="checkbox" name="professional" value="Accounting">
    Accounting
  </label><br>
  <label class="checkbox-inline"> 
    <input type="checkbox" name="professional" value="Graduate">
    Graduate
  </label><br>
  <label class="checkbox-inline">
    <input type="checkbox" name="professional" value="Masters">
    Masters
  </label><br>
  <label class="checkbox-inline">
    <input type="checkbox" name="professional" value="Intermediate with sufficient Excel knowledge">
    Intermediate with sufficient Excel knowledge
  </label><br>
  <label class="checkbox-inline">
    <input type="checkbox" name="professional" value="I have no computer knowledge">
    I have no computer knowledge
  </label>
</div>

<input type="text" name="details" id="details">

Answer 1

使用onchange侦听器生成所检查内容的字符串，然后将其设置为#details。

function toggleInput() {
  let checkboxes = document.querySelectorAll("input[type='checkbox']");
  let checkedValues = [].reduce.call(checkboxes, (acc, n) => {
    if (n.checked) acc.push(n.value);
    return acc;
  }, [])
  document.querySelector("#details").value = checkedValues.join(", ");
}

<div onchange="toggleInput()">
  <label>Your Professional /Educational details *</label><br>
  <label class="checkbox-inline">
    <input type="checkbox" name="professional" value="CA/CS">
    CA/CS
  </label><br>
  <label class="checkbox-inline">
    <input type="checkbox" name="professional" value="Accounting">
    Accounting
  </label><br>
  <label class="checkbox-inline"> 
    <input type="checkbox" name="professional" value="Graduate">
    Graduate
  </label><br>
  <label class="checkbox-inline">
    <input type="checkbox" name="professional" value="Masters">
    Masters
  </label><br>
  <label class="checkbox-inline">
    <input type="checkbox" name="professional" value="Intermediate with sufficient Excel knowledge">
    Intermediate with sufficient Excel knowledge
  </label><br>
  <label class="checkbox-inline">
    <input type="checkbox" name="professional" value="I have no computer knowledge">
    I have no computer knowledge
  </label>
</div>

<input type="text" name="details" id="details">

Answer 2

我认为下面的代码正是您想要的。

$('.checkboxClass').change(function() {
  if (this.checked) {
      if($('#details').val() == "")
        $('#details').val(this.value)
      else
      $('#details').val($('#details').val()+","+this.value) 
  } else {
      $('#details').val("") 
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <div>
                  <label>Your Professional /Educational details *</label> 
                 <br>

                 <label class="checkbox-inline"><input type="checkbox" class="checkboxClass" name="professional" value="CA/CS">CA/CS</label><br>
                 <label class="checkbox-inline"><input type="checkbox" name="professional" class="checkboxClass" value="Accounting">Accounting</label><br>
                 <label class="checkbox-inline"><input type="checkbox" name="professional" class="checkboxClass" value="Graduate">Graduate</label><br>
                 <label class="checkbox-inline"><input type="checkbox" name="professional" class="checkboxClass" value="Masters">Masters</label><br>
                  <label class="checkbox-inline"><input type="checkbox" name="professional" class="checkboxClass" value="Intermediate with sufficient Excel knowledge">Intermediate with sufficient Excel knowledge</label><br>
                 <label class="checkbox-inline"><input type="checkbox" name="professional" value="I have no computer knowledge">I have no computer knowledge</label>
                </div>

<input type="text" name="details" id="details" >

PEN LINK TO TRY THE SAME EXAMPLE

Answer 3

您可以按照以下方式进行操作。

 $(document).ready(function(){
   $('input[type="checkbox"]').click(function(){
   var getVal=$(this).val();
   var total_Val=$('#details').val()==''?getVal:$('#details').val()+','+getVal;
        if($(this).prop("checked") == true && (getVal=='CA/CS' || getVal=='Accounting' || getVal=='Graduate')){
          $('#details').val(total_Val);
        }
        else if($(this).prop("checked") == false){
            $('#details').val('');
        }
    });
});

Answer 4

您应为复选框设置唯一的类/ ID，并在其上使用html input事件

change

如何将复选框的选定值插入输入中？

4 个答案: