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

这是我的小提琴

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

函数Myfunction（）{
}

星期日

星期一

星期二

星期四

星期五

选定日期：

星期日

星期一

星期二

星期四

星期五

选定日期：

函数Myfunction（）{
document.getElementsByName（“LastName”）[0]。value=“”；
}
函数输入（元素）{
如果（元素已选中）{
document.getElementsByName（“LastName”）[0]。value=document.getElementsByName（“LastName”）[0]。value+element.value+“”；
}
否则{
document.getElementsByName（“LastName”）[0]。value=document.getElementsByName（“LastName”）[0]。value.replace（element.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>

var checkbox=document.getElementsByName（'day'）；
对于（变量i=0；i
星期一

星期二

星期四

星期五

选定日期：

这里，onclick eventlisteners被添加到所有复选框中，在选中或再次选中时，它将分别调用add或remove函数，该函数负责在文本框中添加和删除日期

---

您可以将Clear按钮类型设置为reset Button，显然您不想在Clear Button click上执行myFunction（）。

这并不完全相关，但看起来您误用了

input type=“submit”

。实际上，您不想使用此按钮提交表单。请改用按钮的类型。问题是，它太宽泛了。你必须试着自己解决这个问题，如果你陷入困境，那么问一个问题。试着写一些JavaScript代码，我们可以先帮你。你什么都没试过吗？

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

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>