文本通過jQuery在HTML中切換

-1

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script> 
     $(document).ready(function(){ 
      $("input").click(function(){ 
      $("p").toggle(500); 
      }); 
     }); 

     </script> 
    </head> 
    <body> 
     <label class="checkbox"> 
      <input type="checkbox" id="checkbox" name="checkbox" value="ON"/> Secure E-mail 
     </label> 

     <p>This is another small paragraph.</p> 
    </body> 

</html>

這裏我要切換的文本已經顯示。文本通過jQuery在HTML中切換

我的要求是，只有當我檢查複選框時，文本應該出現。否則應該保持隱藏狀態幫助！

- 謝謝

來源

2013-12-21 Mohit Aphale

您還可以使用http://jsfiddle.net/分享代碼 – Azd325

試試[this .......]（http://jsfiddle.net/mqb93/） –

重複從http://stackoverflow.com/questions/3642993/jquery-on-checked-toggle-box –

設置元素的默認顯示爲無：p{display:none;}

還要確保只有切換你所需要的單個元素，而不是所有<p>元素

代碼示例在這裏：http://jsfiddle.net/JXpg4/

來源

2013-12-21 14:26:31 Jervelund

我會改變接受的答案爲@ Arun P Johny之一。由於形式記住了瀏覽器，所以它會好很多（所以它會以錯誤的方式工作，在選中時不可見）。 –

也@Jervelund你有js小提琴上的javascript特別的地方，你可以使用庫和文檔準備從下拉框。 –

處理默認狀態的一種方法是在處理程序註冊後手動觸發change事件，以便元素的初始狀態將設置

$(document).ready(function() { 
    $("input").change(function() { 
     $("p").toggle(this.checked); 
    }).change(); 
});

演示：Fiddle

來源

2013-12-21 14:28:28

這樣比較好，因爲它在刷新時會在FF中工作。 FF記得已經有輸入數據，所以默認情況下可以選擇 –

我不確定關於交叉瀏覽器的兼容性。使用'$（this）.prop（'checked'）'代替'this.checked' –

@MaciejPaprocki'this.checked'是跨瀏覽器兼容的... –

你可以試試這個，

$(document).ready(function(){ 
     $('p').hide(); 
     $("input[type='checkbox']").click(function(){ 
     $("p").toggle(); 
     }); 
    });

http://jsfiddle.net/rGyRW/1/

來源

2013-12-21 14:30:38

-1

請，它的工作，你需要添加p {顯示：無}

來源

2013-12-21 14:32:35

也風格和錯誤是可怕的，不幸的是stackoverflow，不允許我編輯它:( –

文本通過jQuery在HTML中切換

回答

相關問題