I want to display and hide a table using a checkbox. The table appears and disappears with no problem . But the checkbox is not getting checked . I have Jquery v1.8.2 . i have the following code :
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('#checkbox').toggle(function() {
document.getElementById('table').style.display = "inline";
}, function() {
document.getElementById('table').style.display = "none";
});
</script>
</head>
<body>
<form action="" method="POST" enctype="multipart/form-data">
<input type="checkbox" id="checkbox">
<br />
<table id="table" style="display: none;">
<tr>
<td>
<input type="file" name="file">
<input type="submit" name="upload" value="upload">
</td>
</tr>
</table>
</form>
</body>
</html>
I want to display and hide a table using a checkbox. The table appears and disappears with no problem . But the checkbox is not getting checked . I have Jquery v1.8.2 . i have the following code :
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('#checkbox').toggle(function() {
document.getElementById('table').style.display = "inline";
}, function() {
document.getElementById('table').style.display = "none";
});
</script>
</head>
<body>
<form action="" method="POST" enctype="multipart/form-data">
<input type="checkbox" id="checkbox">
<br />
<table id="table" style="display: none;">
<tr>
<td>
<input type="file" name="file">
<input type="submit" name="upload" value="upload">
</td>
</tr>
</table>
</form>
</body>
</html>
5 Answers
Reset to default 5Try this way -
$('#checkbox').change(function () {
if ($(this).is(":checked")) {
$('#table').show();
} else {
$('#table').hide();
}
});
Working demo --> http://jsfiddle/pmNAe/
Try
$('#checkbox').click(function () {
if (this.checked) {
$('#table').show();
} else {
$('#table').hide();
}
});
Demo: Fiddle
You can Try like
$('#checkbox').click(
var my_dis = document.getElementById('table').style.display;
if(my_dis == 'inline')
document.getElementById('table').style.display = "none";
else //if(my_dis == 'none')
document.getElementById('table').style.display = "inline";
);
Check the solution in this fiddle:
JSFiddle
$('#checkbox').change(function(){
var $this = $(this);
var $table = $("#table");
if($this.is(":checked"))
$table.show();
else
$table.hide();
});
Try this JSFIDDLE
Note: You can use change instead of click but but change get fired only after blur in firefox.
$(function(){
$('#checkbox').click(function (){
if(this.checked){
$("#table").show();
}else{
$("#table").hide();
}
});
});
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744201460a4562897.html
评论列表（0条）