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

时间:2016-09-23 18:48:45

标签: javascript

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

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

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>

3 个答案:

答案 0 :(得分:0)

users = User.query.options(*(load_only(col) for col in cols)).filter_by(...)
rows = "".join(",".join(*(getattr(u, col) for col in cols)) + "\n" for u in users)

答案 1 :(得分:0)

<jsp:useBean id="dateObject" class="java.util.Date" />
<jsp:setProperty name="dateObject" property="time" value="${dateTime}" />

<fmt:formatDate value="${dateObject}" pattern="dd/MM/yyyy" />

答案 2 :(得分:0)

你可以这样做:

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 eventlisteners被添加到所有复选框中,在检查或检查时,它将分别调用add或remove函数,这些函数负责在文本框中添加和删除Days。

您可以将Clear Button类型设置为重置按钮,显然您不想在Clear Button click上执行myFunction()。