Javascript重置下拉列表和复选框

时间:2016-11-16 12:57:49

标签: javascript c# html

我有三个表单字段,文本框,下拉列表和复选框。我想将下拉列表重置为第一项并选中复选框以取消选中我是否单击重置。我尝试了这段代码,但它只会重置文本框而不是下拉列表。我还需要一些重置复选框。

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

<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 = "";
        }     
    }

1 个答案:

答案 0 :(得分:0)

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

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