一、用bootstrap框架写了一个简单的表单,html结构和效果图如下:
<form>
<div class="form-row mb-2">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="calculate" value="0" checked>
<label class="form-check-label" for="inlineRadio1">单选框一</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="calculate" value="1">
<label class="form-check-label" for="inlineRadio2">单选框二</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="calculate" value="2">
<label class="form-check-label" for="inlineRadio3">单选框三</label>
</div>
</div>
<div class="form-row mb-2">
<label for="screenWidthPixel" class="col col-form-label col-form-label-sm">输入框一:</label>
<div class="col">
<input type="text" class="form-control form-control-sm num-input" id="screenWidthPixel">
</div>
</div>
<div class="form-row mb-2">
<label for="screenHeightPixel" class="col col-form-label col-form-label-sm">输入框二:</label>
<div class="col">
<input type="text" class="form-control form-control-sm num-input" id="screenHeightPixel">
</div>
</div>
<div class="form-row mb-2">
<label for="moduleWidthPixel" class="col col-form-label col-form-label-sm">输入框三:</label>
<div class="col">
<input type="text" class="form-control form-control-sm num-input" id="moduleWidthPixel">
</div>
</div>
<div class="form-row mb-2">
<label for="moduleHeightPixel" class="col col-form-label col-form-label-sm">输入框四:</label>
<div class="col">
<input type="text" class="form-control form-control-sm num-input" id="moduleHeightPixel">
</div>
</div>
</form>
二、js原生获取input为text的输入框 并清空value
1、输入框比较多的时候id分别获取比较麻烦,用循环效率高些。
document.getElementById("screenWidthPixel").value = "";
document.getElementById("screenHeightPixel").value = "";
document.getElementById("moduleWidthPixel").value = "";
document.getElementById("moduleHeightPixel").value = "";
let list = document.getElementsByTagName("input");
for (let i = 0; i < list.length; i++) {
if (list[i].type == "text") {
list[i].value = "";
}
}
三、jquery 获取input为text的输入框 并清空value
$("#screenWidthPixel").val("");
$("input[type='text']").val("");