问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

radio类型的input标签选中后隐藏其他元素

头像
黑先生
    25964660
    头像
    ziggear
      935110

      radio单选中电子邮箱把下方写着电子邮箱的div隐藏，而单选中手机把下方写着手机的div隐藏，代码如下，如何写js

      <div class="rs-validation">
    <label for="">验证方式</label>
    <form>
        <div class="formemail">
            <input type="radio" checked="checked" name="validation" value="1">
            <span>电子邮箱</span>
        </div>
        <div class="formmobile">
            <input type="radio" name="validation" value="2">
            <span>手机</span>
        </div>
    </form>
</div>

<div class="email-wrap">
    电子邮箱
</div>
<div class="moblie-wrap" style="display:none">
    手机号
</div>
      javascript
      阅读 8.9k
      6 个回答
      得票最新
      头像
      xiatianlong
        2.2k43054
        ✓ 已被采纳
        <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
    $(function(){
        
        $(".demo-input").each(function(i){
            
            $(this).click(function(){
                $(".demo-div").hide();
                $(".demo-div").eq(i).show();
            });
    
        });
    })
</script>

</head>
<body>
    <div class="rs-validation">
    <label for="">验证方式</label>
    <form>
        <div class="formemail">
            <input type="radio" checked="checked" class="demo-input" name="validation" value="1" >
            <span>电子邮箱</span>
        </div>
        <div class="formmobile">
            <input type="radio" name="validation" class="demo-input" value="2">
            <span>手机</span>
        </div>
    </form>
</div>

    <div class="email-wrap demo-div">
        电子邮箱
    </div>
    <div class="moblie-wrap demo-div" style="display:none">
        手机号
    </div>
</body>
</html>
        头像
        luber
          2731127

          赋个ID咯

          var radio1 = document.getElementById('radio1');
var radio2 = document.getElementById('radio2');
if(radio1.checked==true){
radio2.style.display="none";
})

etc.
          头像
          Sherwin
            482513

            默认不能checked，用js判断checked属性来控制css的display就行。

            头像
            weber_fan
              184413
              <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="rs-validation">
        <label for="">验证方式</label>
        <form>
            <div class="formemail">
                <input type="radio" checked="checked" name="validation" value="1">
                <span>电子邮箱</span>
            </div>
            <div class="formmobile">
                <input type="radio" name="validation" value="2">
                <span>手机</span>
            </div>
        </form>
    </div>

    <div class="email-wrap">电子邮箱</div>
    <div class="moblie-wrap" style="display:none">手机号</div>
</body>
    <script>
var r1=document.querySelector(".formemail").firstElementChild;//选择电子邮箱的radio
var r2=document.querySelector(".formmobile").firstElementChild;//选择手机的radio
var d1=document.querySelector(".email-wrap")
var d2=document.querySelector(".moblie-wrap")

// 绑定事件
r1.onclick=function(){
    d1.style.display="block";
    d2.style.display="none";
}
r2.onclick=function(){
    d2.style.display="block";
    d1.style.display="none";
}
</script>
</html>

    //你写错了，是display不是distyle
              头像
              图土豆
                16226

                var d=document;

                d.querySelector('.formemail input').onclick= function () {
    if(this.checked) {
        d.querySelector('.moblie-wrap').style.display="none";
        d.querySelector('.email-wrap').style.display="block";
    }
}
d.querySelector('.formmobile input').onclick= function () {
    if(this.checked) {
        d.querySelector('.moblie-wrap').style.display="block";
        d.querySelector('.email-wrap').style.display="none";
    }
}
                头像
                dephi
                  22
                  新手上路，请多包涵

                  用vue简单的价格 v-if 或 v-show 就搞定了

                  撰写回答
                  你尚未登录，登录后可以
                  • 和开发者交流问题的细节
                  • 关注并接收问题和回答的更新提醒
                  • 参与内容的编辑和改进，让解决方法与时俱进
                  推荐问题