复选框 oncheck javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23198915/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
checkbox oncheck javascript
提问by user3494929
I have a checkbox That I need to show a div when it is clicked. I have 3 different javascripts that i have attempted to get this to work with.
我有一个复选框，我需要在单击时显示一个 div。我有 3 个不同的 javascripts，我试图让它使用。
//function showhide() {
// var checkbox = document.getElementById("assist");
// var expanded1 = document.getElementById("expanded");
// var expanded2 = document.getElementById("expanded2");
// expanded1.style.visibility = (expanded1.style.visibility == 'false') ? "true" : "false";
// alert('test');
//}
function(){
var checkbox = document.getElementById("assist");
var expanded1 = document.getElementById("expanded");
var expanded2 = document.getElementById("expanded2");
checkbox.onchange = function () {
expanded1.style.visibility = this.checked ? 'true' : 'false';
alert('test');
}
//function check() {
// $('chk').click(function () {
// if (this.checked) {
// $("#expanded").show();
// $("#expanded2").show();
// }
// else {
// $("#expanded").hide();
// $("#expanded2").hide();
// }
// });
//}
This is the checkbox below.
这是下面的复选框。
<input type="checkbox" runat="server" id="assist" onclick="showhide();" /></div>
The divs that need to be shown/hidden are expanded and expanded2.
需要显示/隐藏的div被展开和展开2。
I cannot get the javascript functions to be hit from the checkbox could someone tell me what is wrong.
我无法从复选框中获取 javascript 函数，有人可以告诉我出了什么问题。
回答by MrCode
Use the window.onloadevent to assign the change handler and remove the inline onclickfrom the HTML. Also the visibility CSS should be visibleor hidden.
使用该window.onload事件分配更改处理程序并onclick从 HTML 中删除内联。此外，可见性 CSS 应该是visible或hidden。
window.onload = function () {
var checkbox = document.getElementById("assist");
var expanded1 = document.getElementById("expanded");
checkbox.onchange = function () {
expanded1.style.visibility = this.checked ? 'visible' : 'hidden';
};
};
回答by v2solutions.com
For Hiding the DIV using Jquery you can try below code:
要使用 Jquery 隐藏 DIV，您可以尝试以下代码：
instead of this.checked use $(this).is(':checked')
而不是 this.checked 使用 $(this).is(':checked')
$('.chk').click( function () {
var $this = $(this);
if( $this.is(':checked') == true ) {
$("#div1").show();
} else {
$("#div1").hide();
}
});
回答by M.chaudhry
html
html
<input type="checkbox" runat="server" id="assist" onclick="showhide();" />
<div class="required1" id="mycheckboxdiv1" style="display:none" >
your code;
</div>
this will do for u :)
jquery
这对你有用:)
jquery
<script>
$(document).ready(function() {
$('#mycheckboxdiv1').hide();
$('#assist').click(function(){
if($('#assist').is(':checked')){
$('#mycheckboxdiv1').toggle();
}
else
{
$('#mycheckboxdiv1').hide();
}
});
});
</script>
http://jsfiddle.net/maree_chaudhry/QmXCV/here is fiddle
回答by dsgriffin
You're already using jQuery, so you could just use:
您已经在使用 jQuery，因此您可以使用：
$("#assist").change(function(){
$("#expanded, #expanded2").toggle();
});
