Menu
I have the following code that I'm trying to get working. What I want is to have the table rows with class "generator" show up if the checkbox is checked and removed if it is unchecked (default). I have tested jquery and I know it is loading ok so that is not the issue.
The following is my code that I have tried to adapt from jQuery checkbox event handling:
<script>
$('#gen_form input:checkbox').click(function() {
var $this = $(this);
// $this will contain a reference to the checkbox
if ($this.is(':checked')) {
$(".generator").toggle();
} else {
$(".generator").toggle();
}
});
</script>
<?php if(isset($msg)){ echo "<span id='msg'>".$msg."</span>"; }?>
<h2>Add CLLI</h2>
<form method="post" id='gen_form'>
<table class="form_table_newuser">
<tr>
<td class='tdl'>Generator</td><td class='tdr'><input type='checkbox' id='showGen' name='generator' /></td><td> </td>
</tr>
<tr class='generator'>
<td class='tdl'>Start Time</td><td class='tdr'><input type='text' name='start_time' class='textbox'/></td><td> <span class='error'>*<?php echo $errors['start_time']; ?></span></td>
</tr>
<tr class='generator'>
<td class='tdl'>End Time</td><td class='tdr'><input type='text' name='end_time' class='textbox'/></td><td> <span class='error'>*<?php echo $errors['end_time']; ?></span></td>
</tr>
I'm still pretty new to jQuery and am learning. Everything I have tried with the checkbox checking has failed. I can use a button and it worked (with different code), but I need to be able to use the checkbox. I tried a few more things before posting this that say they all deal with the checkbox but none of them have done anything at all when clicking the checkbox.
241
The onchange event occurs when the value of an element has been changed. For radiobuttons and checkboxes, the onchange event occurs when the checked state has been changed.
There are two events that you can attach to the checkbox to be fired once the checkbox value has been changed they are the onclick and the onchange events.
prop() and is() method are the two way by which we can check whether a checkbox is checked in jQuery or not. prop(): This method provides an simple way to track down the status of checkboxes. It works well in every condition because every checkbox has checked property which specifies its checked or unchecked status.
You need to wrap the function in a document ready callback, otherwise the elements don't exist at the time the handler is bound:
$(document).ready(function() {
$('#gen_form input:checkbox').click(function() {
$(".generator").toggle(); // simplifies to this
});
});
Also, jQuery .toggle() handles hiding/showing alternately for you.
51
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
