单选按钮组 html jquery

📌 相关文章

📜 单选按钮组 html jquery - Html (1)

📅 最后修改于: 2023-12-03 15:37:03.523000 🧑 作者: Mango

单选按钮组是一个常见的HTML控件，通常用于从一组选项中选择一个选项。它也被称为单选框或选项按钮。在本文中，我们将讨论如何使用HTML和jQuery来创建单选按钮组。

HTML单选按钮组

HTML中的单选按钮组可以使用<input type="radio">元素来创建。

基本结构

<label>
    <input type="radio" name="group1" value="option1" checked> Option 1
</label>
<label>
    <input type="radio" name="group1" value="option2"> Option 2
</label>
<label>
    <input type="radio" name="group1" value="option3"> Option 3
</label>

使用<label>将每个单选按钮包含起来，以便用户可以单击文本标签选择单选按钮。

使用name属性将单选按钮分组在一起，以便一组单选按钮只能选择一个。

使用value属性来设置单选按钮的值，在提交表单时，与该值相关联。

使用checked属性设置默认选项。

水平对齐

默认情况下，单选按钮垂直对齐。如果您想将它们水平对齐，可以使用CSS设置它们的display属性。

<label>
    <input type="radio" name="group1" value="option1" checked> Option 1
</label>
<label>
    <input type="radio" name="group1" value="option2"> Option 2
</label>
<label>
    <input type="radio" name="group1" value="option3"> Option 3
</label>

<style>
    label {
        display: inline-block;
        margin-right: 10px;
    }
</style>

使用display: inline-block;样式将每个单选按钮放置在一行上，而不是垂直堆叠。可以使用margin-right样式为每个标签添加间距。

jQuery单选按钮组

使用jQuery，我们可以在单选按钮选定或取消选定时执行操作。

获取选中的值

<label>
    <input type="radio" name="group2" value="option4"> Option 4
</label>
<label>
    <input type="radio" name="group2" value="option5" checked> Option 5
</label>
<label>
    <input type="radio" name="group2" value="option6"> Option 6
</label>

<script>
    // 获取选中的值
    $('input[name=group2]').on('change', function() {
        console.log($('input[name=group2]:checked').val());
    });
</script>

使用$('input[name=group2]')选择器选择单选按钮组，并使用.on('change', function() {})方法在选定或取消选定项时执行操作。

在函数内部，使用$('input[name=group2]:checked').val()获取当前选中的值。

禁用选项

<label>
    <input type="radio" name="group3" value="option7"> Option 7
</label>
<label>
    <input type="radio" name="group3" value="option8" disabled> Option 8
</label>
<label>
    <input type="radio" name="group3" value="option9"> Option 9
</label>

<script>
    // 禁用选项
    $('input[value=option8]').prop('disabled', true);
</script>

使用$('input[value=option8]').prop('disabled', true)禁用选项8。

设定选中的值

<label>
    <input type="radio" name="group4" value="option10"> Option 10
</label>
<label>
    <input type="radio" name="group4" value="option11"> Option 11
</label>
<label>
    <input type="radio" name="group4" value="option12"> Option 12
</label>

<script>
    // 设定选中的值
    $('input[value=option12]').prop('checked', true);
</script>

使用$('input[value=option12]').prop('checked', true)将选项12设置为选中状态。

结论

使用HTML和jQuery，我们可以轻松地创建和操作单选按钮组。此外，还可以使用CSS样式来美化单选按钮组。

Markdown代码片段：

# 单选按钮组 HTML jQuery

单选按钮组是一个常见的HTML控件，通常用于从一组选项中选择一个选项。它也被称为单选框或选项按钮。 在本文中，我们将讨论如何使用HTML和jQuery来创建单选按钮组。

## HTML单选按钮组

HTML中的单选按钮组可以使用`<input type="radio">`元素来创建。

### 基本结构

```html
<label>
    <input type="radio" name="group1" value="option1" checked> Option 1
</label>
<label>
    <input type="radio" name="group1" value="option2"> Option 2
</label>
<label>
    <input type="radio" name="group1" value="option3"> Option 3
</label>