radio单选框，当改变选中值，修改其他radio默认值

最新推荐文章于 2023-08-25 10:15:20 发布

k9s

最新推荐文章于 2023-08-25 10:15:20 发布

阅读量815

点赞数 1

分类专栏： javascript 文章标签： java

javascript 专栏收录该内容

3 篇文章

订阅专栏

这是一个HTML页面示例，包含两个互相关联的单选按钮组。第一个组用于选择网络状态，正常或异常。第二个组表示操作结果，完成、取消或失败。当选择网络状态为正常时，操作结果默认为完成；若选择异常，则操作结果设为取消。此页面使用jQuery实现状态与结果的联动变更。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
</head>

<body>
    <input class="netStatusAfter" type="radio" name="hobbys" value="normal" id="normal" checked="checked">&nbsp;&nbsp;正常&nbsp;&nbsp;&nbsp;&nbsp;
    <input class="netStatusAfter" type="radio" name="hobbys" value="abnormal" id="abnormal">&nbsp;&nbsp;异常
    <!-- <input type="radio" name="bedStatus" id="allot" checked="checked" value="allot">正常
    <input type="radio" name="bedStatus" id="transfer" value="transfer">异常 -->
    <hr>
    <input class="fdkResult" id="Radio1" type="radio" name="complete" value="完成" checked="checked">&nbsp;&nbsp;完成&nbsp;&nbsp;&nbsp;&nbsp;
    <input class="fdkResult" id="Radio2" type="radio" name="complete" value="取消">&nbsp;&nbsp;取消&nbsp;&nbsp;&nbsp;&nbsp;
    <input class="fdkResult" type="radio" name="complete" value="失败">&nbsp;&nbsp;失败&nbsp;&nbsp;&nbsp;&nbsp;
</body>
<script>
    $(document).ready(function() {
        $('input[type=radio][name=hobbys]').change(function() {
            if (this.value == 'normal') {
                $("#Radio1").prop('checked', true);
            } else if (this.value == 'abnormal') {
                $("#Radio2").prop('checked', true);
            }
        });
    });
</script>

</html>