单选按钮单击触发事件

我有几个单选按钮，其中一个是“其他”按钮。如果用户点击“其他”，我想显示一个文本框询问更多信息。这是我的HTML和JS：单选按钮单击触发事件

<div class="radio"> 
    <label><input type="radio" name="optradio">Friend</label> 
    </div> 
    <div class="radio"> 
    <label><input type="radio" name="optradio"> Worked together </label> 
    </div> 
    <div class="radio"> 
    <label><input type="radio" name="optradio"> Studied together</label> 
    </div> 
    <div class="radio"> 
    <label><input type="radio" name="other-radio" id="connection-invite-other-radio"> Other </label> 
    </div> 

    <div class="form-group" id="connection-invite-other"> 

    <input type="text" class="form-control" > 
    </div>

JS：

$(document).ready(function(){ 


    if($('#connection-invite-other-radio').is(':checked')) {   
     $('#connection-invite-other').show(); 
     console.log("hi"); 
    } 

    else { 
     $('#connection-invite-other').hide(); 
    } 

});

然而，这是行不通的。请帮助我了解我是否做错了什么。谢谢！

来源

2016-09-15 Keshav Vasudevan

如果你想要做的* X *响应点击，你必须把* X * click处理函数中 - 您现有的if/else运行*一次， *文件第一次加载时。（另外，为什么“其他”单选按钮具有不同的名称属性？是不是应该与其他单选按钮组成一个组？） – nnnnnn

好的，谢谢，我会改变这一点。 –

的radio需要具有相同的name，你的情况optradio。
您需要在所有radio元素上使用change事件侦听器。

$(document).ready(function() { 
 
    $('input[type=radio]').change(function() { 
 
    if ($('#connection-invite-other-radio').is(':checked')) { 
 
     $('#connection-invite-other').show(); 
 
    } else { 
 
     $('#connection-invite-other').hide(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="radio"> 
 
    <label> 
 
    <input type="radio" name="optradio">Friend</label> 
 
</div> 
 
<div class="radio"> 
 
    <label> 
 
    <input type="radio" name="optradio">Worked together</label> 
 
</div> 
 
<div class="radio"> 
 
    <label> 
 
    <input type="radio" name="optradio">Studied together</label> 
 
</div> 
 
<div class="radio"> 
 
    <label> 
 
    <input type="radio" name="optradio" id="connection-invite-other-radio">Other</label> 
 
</div> 
 
<div class="form-group" id="connection-invite-other"> 
 
    <input type="text" class="form-control"> 
 
</div>

来源

2016-09-15 12:18:04 eisbehr

谢谢！这工作完美：D –

您需要调用change单选按钮的事件来显示隐藏div。

$(document).ready(function(){ 

    $('#connection-invite-other-radio').change(function(){ 
    if($(this).is(':checked')) {   
     $('#connection-invite-other').show(); 
     console.log("hi"); 
    } 

    else { 
     $('#connection-invite-other').hide(); 
    } 
    });  
});

来源

2016-09-15 12:16:39 Mairaj

单选按钮单击触发事件

回答

相关问题