一、使用checked属性
要让单选框默认选中,最简单的方法是使用checked属性。该属性是boolean类型,如果设置为true,则单选框的默认状态是选中状态。代码如下:
<input type="radio" name="gender" value="male" checked="true"> <label>Male</label> <input type="radio" name="gender" value="female"> <label>Female</label>
在上面的代码中,第一项单选框的checked属性设置为true,因此该单选框将默认选中。
二、使用JavaScript
除了使用checked属性之外,还可以使用JavaScript来设置单选框的默认选中状态。代码如下:
<input type="radio" name="gender" value="male" id="male"> <label for="male">Male</label> <input type="radio" name="gender" value="female" id="female"> <label for="female">Female</label> <script> document.getElementById('male').checked = true; </script>
在上面的代码中,使用了JavaScript代码document.getElementById('male').checked = true;来设置id为"male"的单选框的默认选中状态。
三、使用jQuery
在使用jQuery的情况下,可以使用prop()方法来设置单选框的默认选中状态。代码如下:
<input type="radio" name="gender" value="male" id="male"> <label for="male">Male</label> <input type="radio" name="gender" value="female" id="female"> <label for="female">Female</label> <script> $(document).ready(function(){ $('#male').prop('checked', true); }); </script>
在上面的代码中,使用了jQuery的prop()方法来设置id为"male"的单选框的默认选中状态。
四、使用Vue.js
在使用Vue.js的情况下,可以使用v-model指令来实现单向数据绑定,并设置单选框的默认选中状态。代码如下:
<div id="app"> <input type="radio" v-model="gender" value="male"> <label>Male</label> <input type="radio" v-model="gender" value="female"> <label>Female</label> </div> <script> new Vue({ el: '#app', data: { gender: 'male' } }); </script>
在上面的代码中,使用了Vue.js框架,通过v-model指令来绑定单选框的值,并设置默认选中的值为"male"。
五、总结
本文介绍了四种方法来设置单选框的默认选中状态。分别是使用checked属性、JavaScript、jQuery和Vue.js。通过这些方法,可以轻松设置单选框的默认选中状态,提高用户体验。