inputradio用法
1.基本语法
示例代码：
```html
<form>
<label for="option1">
<input type="radio" id="option1" name="option" value="option1"> Option 1
</label>
<label for="option2">
<input type="radio" id="option2" name="option" value="option2"> Option 2
</label>
<label for="option3">
<input type="radio" id="option3" name="option" value="option3"> Option 3
</label>
</form>
```
2.默认选择
可以使用 checked 属性设置 radio 按钮的默认选择。只需要在需要默认选择的 radio 按钮上添加 checked 属性。
示例代码：
```html
<form>
<label for="option1">
<input type="radio" id="option1" name="option" value="option1" checked> Option 1html radio点击变颜
</label>
<label for="option2">
<input type="radio" id="option2" name="option" value="option2"> Option 2
</label>
<label for="option3">
<input type="radio" id="option3" name="option" value="option3"> Option 3
</label>
</form>
```
3.事件处理
可以使用 JavaScript 为 input radio 元素添加事件处理程序。例如，可以通过 onclick 事件处理程序在用户选择选项时触发特定函数。
示例代码：
```html
<form>
<label for="option1">
<input type="radio" id="option1" name="option" value="option1" onclick="handleOptionSelection(this)"> Option 1
</label>
<label for="option2">
<input type="radio" id="option2" name="option" value="option2" onclick="handleOptionSelection(this)"> Option 2
</label>
<label for="option3">
<input type="radio" id="option3" name="option" value="option3" onclick="handleOptionSelection(this)"> Option 3
</label>
</form>
<script>
function handleOptionSelection(element)
console.log("Selected option: " + element.value);
</script>
```
4.CSS样式
可以使用 CSS 为 input radio 元素添加样式，以改变其外观、布局和交互效果。
示例代码：
```html
<style>
appearance: none; /* 清除默认外观 */
-webkit-appearance: none;
-moz-appearance: none;
width: 20px;
height: 20px;
border: 2px solid ;
border-radius: 50%;
outline: none;
margin-right: 10px;
cursor: pointer;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。