jquery複選框問題 - 重新加載頁面修復它

我遇到了這一點的jQuery的問題。當頁面加載時，id_2被隱藏。如果我選中複選框id_1，則什麼都不會發生。但是，如果我重新加載頁面，則會顯示id_2。jquery複選框問題 - 重新加載頁面修復它

<head> 
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"> /script> 
</head> 


<input id="id_1" type="checkbox" name="ck1"> 
<input type="text" id="id_2" name="tx1"> 

<script type="text/javascript"> 
     $(document).ready(function() { 
      if ($('#id_1').is(':checked')) { 
       ($('#id_2').show()); 
      } else { 
       ($('#id_2').hide()); 
      } 
});

和

如果我使用一個按鈕

$("#show_button").click(function()

它的工作原理 - ID_2顯示/隱藏正確。我可以看到在螢火蟲中，當我檢查複選框時，選中的值從真/假切換。

我在做什麼錯？

奧利

來源

2012-08-14 Oli

有你'script'標籤 – david 2012-08-14 20:11:52

嗨語法問題。我已經解決了，但仍然沒有喜悅 – Oli 2012-08-14 20:19:28

那是因爲你沒有一個事件處理程序。您正在檢查是否在頁面加載時檢查複選框，因此如果您檢查並刷新頁面，則瀏覽器會記住複選框已選中，因此事件在頁面重新加載時觸發（顯示#id_2）

如果你希望它是動態的，沒有必要的頁面重載，添加事件處理程序（例如，點擊）：

$('#id_1').click(function(){ 
    if ($('#id_1').is(':checked')){ 
     $('#id_2').show(); 
    } else { 
     $('#id_2').hide(); 
    } 
});

來源

2012-08-14 20:15:18 wanovak

這是我所遵循的答案。我一直在抨擊我的頭，但它現在可以工作..非常感謝 – Oli 2012-08-14 20:28:53

您需要將一個click或change事件中你的邏輯，否則你只是躲在/根據是來自服務器的值顯示。

而且改變

if ($('#id_1').is('checked'))

通過

if ($('#id_1').is(':checked'))

與其他用戶評論（不知道在這裏粘貼代碼的時候是一個錯字），您的jQuery的參考有語法錯誤。本

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">

來源

2012-08-14 20:13:16

我已經解決了你的建議。我實際上已經嘗試過這一點，但文本字段只顯示後重新加載.. – Oli 2012-08-14 20:20:17

改變它嘗試以下操作：

$(document).ready(function() { 
    $('#id_2').css('display', $('#id_1').is(':checked') ? 'block' : 'none'); 

    $('#id_1').change(function(){ 
     $('#id_2').css('display', this.checked ? 'block' : 'none') 
    }) 
});

來源

2012-08-14 20:15:02 undefined

謝謝 - 我設法解決這個通過添加$（'＃id_1'）。click（function（）{ – Oli 2012-08-14 20:29:24

<input id="id_1" type="checkbox" name="ck1"> 
<input type="text" id="id_2" name="tx1" style="display:none;"> 

<script> 
$('#id_1').change(function(){ 
    if ($('#id_1').is(':checked')) { 
     $('#id_2').show(); 
    } else { 
     $('#id_2').hide(); 
    } 
}); 
</script>

來源

2012-08-14 20:19:07 KingKongFrog

而不是.change，我用.click。也許這也會起作用。 – Oli 2012-08-14 20:29:59

jquery複選框問題 - 重新加載頁面修復它

回答

相關問題