爲什麼我的輸入從不隱藏？

我想顯示一個輸入（類型=電子郵件），如果checkbox被選中。如果沒有選中，我想隱藏它。我的問題是，輸入字段始終可見。爲什麼我的輸入從不隱藏？

的jQuery：

$("#newsletterCheckbox").change(function() { 
    if ($(this).is(":checked")) { 
     $("#newsletterInputfield").show(); 
    } else { 
     $("#newsletterInputfield").hide(); 
    } 
});

HTML：

<input name="checkboxNewsletter" type="checkbox" id="newsletterCheckbox" />Newsletter 

... 

<div id="newsletterInputfield"> 
    <input type="email" placeholder="Email*" id="email" class="inputFields" /> 
</div>

我試過This和很多其他的例子。提前致謝。

來源

2014-10-03 minimen

哪裏是你自己的小提琴？可能他沒有看過他的控制檯，並且在HTML之前包含了JavaScript。 – GuyT 2014-10-03 07:59:08

我設置了一個[你自己的代碼小提琴]（http://jsfiddle.net/jwqm9wxj/1/），它工作正常 - 我沒有看到任何問題。 – 2014-10-03 08:00:37

[Your code]（http://jsfiddle.net/xy0nadkp/）似乎可以正常工作。當檢查狀態更改爲未選中時，元素將被隱藏。你的意思是它從一開始就表現出來嗎？這是因爲你的代碼只能在'change'事件中運行，並且在頁面加載時不會發生變化。如果你想隱藏它，你最好用css隱藏它。 – 2014-10-03 08:01:31

我不確定我的問題是否正確。

要隱藏字段在開始添加這段JavaScript代碼：如果在未選中複選框開始

$("#newsletterCheckbox").change(function() { 
    EmailTextboxVisibility(); 
}); 

function EmailTextboxVisibility(){ 
    if ($("#newsletterCheckbox").is(":checked")) { 
     $("#newsletterInputfield").show(); 
    } else { 
     $("#newsletterInputfield").hide(); 
    } 
} 

$(document).ready(function() { 
    EmailTextboxVisibility(); 
});

這將隱藏您的電子郵件文本框。

這裏我jsfiddle

來源

2014-10-03 08:04:46

OP的鏈接jsfiddle不是他的 - 這是他看到的一個例子 - 並且它沒有任何更新就能正常工作。 – 2014-10-03 08:06:29

我的問題是，爲什麼我的代碼在測試時不起作用，但是[這裏]（http://jsfiddle.net/xy0nadkp/）它確實有效 – minimen 2014-10-03 08:09:45

對不起我的壞。我已經更新了我的答案。 – 2014-10-03 08:25:27

添加此style="display:none"到#newsletterInputfield

$("#newsletterCheckbox").change(function() { 
 
     if ($(this).is(":checked")) { 
 
      $("#newsletterInputfield").show(); 
 
     } else { 
 
      $("#newsletterInputfield").hide(); 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input name="checkboxNewsletter" type="checkbox" id="newsletterCheckbox" />Newsletter 
 

 
... 
 

 
<div id="newsletterInputfield" style="display:none"> 
 
    <input type="email" placeholder="Email*" id="email" class="inputFields" /> 
 
</div>

或更改您的代碼此

$("#newsletterInputfield").hide();/**add this*/ 
 
$("#newsletterCheckbox").change(function() { 
 
    if ($(this).is(":checked")) { 
 
     $("#newsletterInputfield").show(); 
 
    } else { 
 
     $("#newsletterInputfield").hide(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input name="checkboxNewsletter" type="checkbox" id="newsletterCheckbox" />Newsletter 
 

 
... 
 

 
<div id="newsletterInputfield"> 
 
    <input type="email" placeholder="Email*" id="email" class="inputFields" /> 
 
</div>

來源

2014-10-03 08:13:34

也許它對你的問題的解釋，但你所擁有的代碼除了我能看到的一件事以外都是很好的。

根據你的榜樣，最初您的複選框取消選中 - 所以最初 email輸入應該被隱藏。這是我能看到的唯一問題，它不是隱藏起始。

所以我會改變你的包裝DIC有顯示無風格：

<div id="newsletterInputfield" style="display:none">

，而不是這個

<div id="newsletterInputfield">

從這個

除了您如何引用jQuery和你的頁面的其餘部分看起來可能是一個問題，但我們不能看到...

來源

2014-10-03 08:17:42

我的解決方案只使用CSS3和HTML。

無需使用Javascript。

這裏的想法是使用:checked選擇器來設置所需元素的樣式。

的HTML：

<input type="checkbox" id="foo" value="1" checked="checked"/> 
<div id="checked-a"> 
    Some content 
</div> 

<input type="email" id="hdn1" value="yes" />

現在CSS：

#hdn1 { 
    display:none; 
} 

#foo:checked ~ #hdn1 { 
    display:inline !important; 
}

您可以添加一個過渡，使它看起來更好，但它不是必需的。

檢查這裏的一個例子，與過渡和display部分註釋掉：http://jsfiddle.net/d3aokkv7/2/

來源

2014-10-03 08:23:43

HTML：

<input name="checkboxNewsletter" type="checkbox" id="newsletterCheckbox" />Newsletter... 

<div id="newsletterInputfield" style="display:none;"> 
    <input type="email" placeholder="Email*" id="email" class="inputFields" /> 
</div>

JQuery的：

$("#newsletterCheckbox").change(function() { 
     $("#newsletterInputfield").toggle(); 
});

JsFiddle

來源

2014-10-03 08:26:32 Norrj

的代碼是好，只需要把所有的document.ready：

**$(document).ready(function() {** 
     $("#newsletterCheckbox").change(function() { 
      ... 
     }); 
    **});**

謝謝你們的幫助:)

來源

2014-10-03 08:28:36 minimen

爲什麼我的輸入從不隱藏？

回答

相關問題