根据多个复选框控件的值更新输入项的值

Update the value of an input item based on the value of multiple checkbox controls

本文关键字：更新 输入项 控件 复选框      更新时间：2023-09-26

这是我的小提琴。https://jsfiddle.net/sinoobkt/1kd16pgx/1/

如果我选中复选框，那么值应该显示在输入字段中，如果我取消选中复选框，它的值应该从输入字段中删除。我还需要能够从输入字段手动删除值。一旦我点击清除然后所有的值应该被清除。

function Myfunction(){
  
}
<form action="">
<input type="checkbox" name="day" id="1" value="Sunday">Sunday<br>
<input type="checkbox" name="day" id="2" value="Monday">Monday <br>
<input type="checkbox" name="day" id="3" value="Tuesday">Tuesday<br>
<input type="checkbox" name="day" id="4" value="Thursday">Thursday<br>
<input type="checkbox" name="day" id="5" value="Friday">Friday<br>
Selected Days: <input type="text" name="LastName" value=""><br>
<input type="submit" value="Clear" onclick="Myfunction()">
</form>

<form action="">
<input type="checkbox" name="day" id="1" value="Sunday" onclick="fillInput(this);">Sunday<br>
<input type="checkbox" name="day" id="2" value="Monday" onclick="fillInput(this);">Monday <br>
<input type="checkbox" name="day" id="3" value="Tuesday" onclick="fillInput(this);">Tuesday<br>
<input type="checkbox" name="day" id="4" value="Thursday" onclick="fillInput(this);">Thursday<br>
<input type="checkbox" name="day" id="5" value="Friday" onclick="fillInput(this);">Friday<br>
Selected Days: <input type="text" name="LastName" value=""><br>
<input type="button" value="Clear" onclick="Myfunction()">
</form>
<script>
function Myfunction(){
  document.getElementsByName("LastName")[0].value="";
}
function fillInput(element){
  if(element.checked) {
    document.getElementsByName("LastName")[0].value= document.getElementsByName("LastName")[0].value + element.value + " ";
  }
  else {
    document.getElementsByName("LastName")[0].value = document.getElementsByName("LastName")[0].value.replace(element.value + " ", "");
  }
}
</script>

function Myfunction(){
  document.getElementById("1").value = "";
  ...
}

你可以这样做:

var checkboxes = document.getElementsByName('day');
for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener("click", function () {
        if (this.checked) {
            add(this.value);
        } else {
            remove(this.value);
        }
    });
}
function add(value) {
    var textbox = document.getElementById('selectedDay');
    textbox.value += value;
}
function remove(value) {
    var textbox = document.getElementById('selectedDay');
    textbox.value = textbox.value.replace(value, '');
}

<form action="">
<input type="checkbox" name="day" id="1" value="Sunday">Sunday<br>
<input type="checkbox" name="day" id="2" value="Monday">Monday <br>
<input type="checkbox" name="day" id="3" value="Tuesday">Tuesday<br>
<input type="checkbox" name="day" id="4" value="Thursday">Thursday<br>
<input type="checkbox" name="day" id="5" value="Friday">Friday<br>
Selected Days: <input type="text" id="selectedDay" value=""><br>
<input type="reset" value="Clear">
</form>

这里，onclick事件监听器被添加到所有的复选框中，在检查或检查时，它将分别调用add或remove函数，它们负责从文本框中添加和删除日期。

你可以将Clear Button类型设置为reset Button显然你不想在Clear Button click上执行myFunction()

相关文章：