單選按鈕單擊觸發事件

我有幾個單選按鈕，其中一個是「其他」按鈕。如果用戶點擊「其他」，我想顯示一個文本框詢問更多信息。這是我的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

單選按鈕單擊觸發事件

回答

相關問題