如何设置单选框默认选中-详细步骤

WWAI • 2024-10-04 00:15 • 编程

一、使用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>

document.getElementById('male').checked = true;

在上面的代码中，使用了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>

$(document).ready(function(){
    $('#male').prop('checked', true);
});

在上面的代码中，使用了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。通过这些方法，可以轻松设置单选框的默认选中状态，提高用户体验。

原创文章，作者：WWAI，如若转载，请注明出处：https://www.506064.com/n/135763.html