ラジオボタンをクリックしてイベントをトリガーする

Question

ラジオボタンがいくつかありますが、そのうちの1つは「その他」ボタンです。ユーザーが「その他」をクリックすると、詳細情報を求めるテキストボックスが表示されます。

<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(); 
    } 

}); 

しかしこれは動作していないこれは私のHTMLとJSです。私が間違ったことをしているかどうか理解してください。ありがとう！

Answer 1

1. radioは、あなたのケースoptradioには、同じnameを持っている必要があります。
2. すべての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>

Answer 2

changeラジオボタンのイベントに電話する必要があります。hide 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(); 
    } 
    });  
});