Javascript重置下拉列表和复选框

本文关键字：复选框 下拉列表 Javascript | 更新日期: 2023-09-27 18:18:06

我有三个表单字段，文本框，下拉列表和复选框。我想重置下拉列表到第一个项目和复选框取消选中，如果我点击重置。我尝试了这个代码，但它只会重置文本框，而不是下拉列表。我也需要一些来重置复选框。

注:下拉列表类型是在模型中定义的。

<input type="text" name="a" class="input-medium w1" data-bind="value: value" />
<label class="control-label" for="category" id="ProductType">Type:&nbsp; @Html.EditorFor(m => m.Type)</label>
<label class="control-label">Included Discontinued:@Html.CheckBox("searchDate")</label>

    var dropDown = document.getElementById("ProductType");
        dropDown.selectedIndex = 0;
    var elements = document.getElementsByTagName("input");
    for (var ii = 0; ii < elements.length; ii++) {
        if (elements[ii].type == "text") {
            elements[ii].value = "";
        }     
    }

Javascript重置下拉列表和复选框

要取消选中复选框，请使用

document.getElementById("ID").checked = false;
例如

 <!DOCTYPE html>
<html>
<body>
<form>
  What color do you prefer?<br>
  <input type="radio" name="colors" id="red">Red<br>
  <input type="radio" name="colors" id="blue">Blue
</form>
<button onclick="check()">Check "Red"</button>
<button onclick="uncheck()">Uncheck "Red"</button>
<script>
function check() {
    document.getElementById("red").checked = true;
}
function uncheck() {
    document.getElementById("red").checked = false;
}
</script>
</body>
</html>
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_radio_checked2

对于下拉列表使用

document.getElementById("orange").selected = "true";
例如

    <!DOCTYPE html>
<html>
<body>
<form>
Select your favorite fruit:
<select>
  <option id="apple">Apple</option>
  <option id="orange">Orange</option>
  <option id="pineapple" selected>Pineapple</option> // Pre-selected
  <option id="banana">Banana</option>
</select>
</form>
<p>Click the button to change the selected option in the dropdown list to "orange" instead of "pinapple".</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
    document.getElementById("orange").selected = "true";
}
</script>
</body>
</html>
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_option_selected2

相关文章：