js如何更改input框的默认选中状态
js如何更改input框的默认选中状态?input标签是有多种样式的,要利用js来修改input标签元素的默认选中状态,就必须先弄清楚input每种样式的选中状态由哪个属性决定。下面,小编就来分类给大家介绍一下
如何利用js来更改input框的默认选中状态。
操作方法
- 01
input标签元素常见的有text、radio、checkbox、button等四种类型,接下来,小编就逐一对这四种类型的input标签进行讲解修改默认选中状态的方法。
- 02
input标签的text类型,即文本框。它的默认选中状态是未选中,我可以通过下面图1如示的方法将以下代码放在</body>标签后,即可改变该input标签的选中状态,但为了便于演示,我们先如图2所示将代码放到了“改变状态”按钮中,大家使用时请参照图1方式,以下其它类型也是一样。
- 03
修改input标签text类型的默认选中状态,主要是通过select()方法来实现,修改选中状态前后效果如下图所示:
- 04
input标签的radio类型,即单选框。它的选中状态由“checked”属性控制,如果该属性设置为“checked”则选中,否则不选中。利用以下代码即可修改它的选中状态: document.getElementById("myradio").checked = !(document.getElementById("myradio").checked ); 其中“!”表示值取反,即原来是选中,则现在不选中;原来不选中,则现在为选中。
- 05
input标签的checkbox类型,即复选框。复选框的选中状态与单选框一样,都是由checked属性来控,所以可以用以下代码来修改它的选中状态: document.getElementById("mychkbox").checked = !(document.getElementById("mychkbox").checked ); 运行效果如下图所示:
- 06
input标签的button类型,即按钮。按钮的选中状态就是获取焦点,所以我们可以使用focus()函数来使按钮来进行选中,代码如下: document.getElementById("mybtn").focus(); 运行效果如下图所示: