顯示文本框時，頁面加載

Question

所以，當我打開一個網頁檢索我從數據庫信息，並會檢查根據其值一個單選按鈕...

我需要的文本框最初顯示 - 基於該單選按鈕的存在已經檢查

工作正常，當我執行click事件，但我需要顯示文本框在頁面加載時，因爲第一單選按鈕從DB檢查...

<p> 
    Show textboxes <input type="radio" name="radio1" value="Show" checked="checked"> 
    Do nothing <input type="radio" name="radio1" value="Nothing"> 
    </p> 

    Wonderful textboxes: 

    <div class="text"><p>Textbox #1 <input type="text" name="text1" id="text1" maxlength="30"></p></div> 

    <div class="text"><p>Textbox #2 <input type="text" name="text2" id="text2" maxlength="30"></p></div> 

這是我的FIDDLE - DEMO http://jsfiddle.net/rbla/5fq8q2bj/

這裏是用撥動

$(document).ready(function() { 
    $(".text").hide() 
    $('[name=radio1]').on('change', function(){ 
     $('.text').toggle(this.value === 'Show'); 
    }).trigger('change'); 
}); 

任何想法了jQuery ...

Answer 1

您的解決方案是不工作的原因是因爲你要通過你的所有無線輸入，然後切換元素基於它的價值— 無論它是否被檢查。因此，在運行時，這是你的腳本的作用：

1. 遇到的第一個無線電元件，觸發onchange事件，觸發onchange回調，並顯示.text元素
2. 遇到第二無線電元件，觸發onchange事件，火災onchange回調，並隱藏了.text元素再次

如果你把控制檯登錄你的回調，你就會意識到，.text元素顯示和隱藏在快速連續。

你真正想要做的只是在檢查時執行切換。感謝 -

$(document).ready(function() { 
 
    $(".text").hide() 
 
    $('[name=radio1]').on('change', function() { 
 
    if (this.checked) { 
 
     $('.text').toggle(this.value === 'Show'); 
 
    } 
 
    }).trigger('change'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    Show textboxes 
 
    <input type="radio" name="radio1" value="Show" checked="checked"> Do nothing 
 
    <input type="radio" name="radio1" value="Nothing"> 
 
</p> 
 

 
Wonderful textboxes: 
 

 
<div class="text"> 
 
    <p>Textbox #1 
 
    <input type="text" name="text1" id="text1" maxlength="30"> 
 
    </p> 
 
</div> 
 
<div class="text"> 
 
    <p>Textbox #2 
 
    <input type="text" name="text2" id="text2" maxlength="30"> 
 
    </p> 
 
</div>