jquery实现html中单选按钮的切换选中

最新推荐文章于 2025-09-21 11:15:28 发布

原创最新推荐文章于 2025-09-21 11:15:28 发布 · 9.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html

html-jquer 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用jQuery来实现HTML中单选按钮的选中状态切换。通过点击事件，可以改变当前选中项的值，并将其他选项设置为未选中状态。

jquery实现html中单选按钮的切换选中

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>damo</title>
</head>
<script src="jquery.js"></script>
<body>
    <input type="radio" class="radio" checked="checked" name="radio" value='1'>男
    <br/>
    <input type="radio" class="radio" name="radio" value='0'>女
</body>
<script >
$('.radio').click(function(){
    if( $(this).val()=='1'){
        $(this).attr('checked',false);
        $(this).val('0');
    }else{
        $(this).val('1');
    }
    //其他兄弟节点值为0
    $(this).siblings().val('0');   
})
</script>
</html>