如何設置單選框默認選中-詳細步驟

一、使用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。通過這些方法，可以輕鬆設置單選框的默認選中狀態，提高用戶體驗。