複選框不關閉款

我無法弄清楚這是爲什麼不工作：複選框不關閉款

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     if ($('#check').is(':checked')) { 
      $('p').hide(); 
     } else { 
      $('p').show(); 
     } 
    }); 
</script> 
</head> 
<body> 
    <input type="checkbox" id="check" /> 
    <p>If you click on the checkbox, I will disappear.</p> 
</body> 
</html>

Fiddle

當我點擊該複選框應該隱藏p標籤，但事實並非如此。 ... 這應該是如此簡單，但它不是:(

來源

2016-11-09 lewis4u

你只是在頁面負載運行代碼。你需要添加一個'變化'事件處理程序到您的複選框 –

您缺少onclick動作 – Nomeaning25

aaah你是對的...你能否回答我的問題 – lewis4u

你只在頁面加載時運行你的代碼，你需要添加一個change事件處理程序到你的複選框。通過傳遞可以簡化代碼屬性值的toggle()方法：

$(document).ready(function() { 
 
    $('#check').change(function() { 
 
    $('p').toggle(!this.checked); 
 
    }).change(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" id="check" /> 
 
<p>If you click on the checkbox, I will disappear.</p>

來源

2016-11-09 10:22:34

羅裏我現在有一個問題...當我點擊複選框，並嘗試提交表單，如果有任何錯誤我的網頁將重新加載和複選框條件將改變....有沒有辦法讓複選框記住狀態？或者我應該在SO – lewis4u

上提出一個新問題。您需要將複選框的狀態存儲在localStorage，sessionStorage，cookie，服務器端會話或後端數據庫中。如果你搜索，應該有幾個問題。隨意問一個關於它的新問題，但請包括你的嘗試。 –

使用'localStorage' – Bharat

我更新你的jsfiddle工作&利用jQuery的.change功能。

$(document).ready(function(){ 

    $('#check').change(function() { 
     if ($('#check').is(':checked')) { 
      $('p').css("display","none"); 
     } 
     else { 
      $('p').css("display","block"); 
     } 
    }); 
});

https://jsfiddle.net/d7d2n0x4/2/

來源

2016-11-09 10:26:40

謝謝你，但羅裏使它非常好，乾淨，所以我會接受它作爲答案。 – lewis4u

Try it 
// for protect global scope use closure 
(function ($) { 
    // document ready 
    $(function(){ 
    // use prop method for checkbox 
    if ($('#check').prop("checked")) { 
     $('p').slideToggle(250); 
    } 
    }); 
}(jQuery));

來源

2016-11-09 10:30:46

如果將代碼放在頁面底部，頁面加載速度會更快，當DOM準備就緒時腳本開始運行。 –

工作示例https://jsfiddle.net/hu2ngcqg/2/ –

複選框不關閉款

回答

相關問題