Question

So I have the basics for this, but it isn’t working how I would like

The problem:

When the page loads it shows the div even though the box is not checked.

The code:

<div class="element">
<label for="jtf">Jackpot Times: <a href='javascript:void(0);'
NAME='Help' title=' Help '
onClick=window.open('raffle.html','Ratting','width=520,height=570,0,status=0,');><font size='1'>[?]</font></a></label>
<table width='100%'><tr><td align='right'>Daily:</td><td align='left'><input type='checkbox' <?php echo $checkered ?> name='daily' id='daily' value='1' /></td><td align='right'>Weekly:</td><td align='left'><input type='checkbox' <?php echo $checkered1 ?> name='weekly' value='1' /></td><td align='right'>Monthly:</td><td align='left'><input type='checkbox' <?php echo $checkered2 ?> name='monthly' value='1' /></td><td align='right'>Yearly:</td><td align='left'><input type='checkbox' name='yearly' <?php echo $checkered3 ?> value='1' /></td></tr></table>
</div>
<div id='daily_x'>
<div class='element'>
<label for='daily_x'>Daily Jackpot Starting Pot:</label>
<input type='text' name='daily_x' value='<?php echo $rafde?>' />
</div>
</div>
<script>
$('#daily').change(function() {
    if(this.checked){
      $('#daily_x').show();
    }
    else{
      $('#daily_x').hide();
    }
});
</script>

When the page loads the check box with the id daily is not checked, but it is still showing the div.

I have this set up similar for a select box, but was able to add $(document).ready(function() in order to hide when something wasn’t selected, this however does not seem to work when using check boxes.

Answer 1

First, use onready, onload() states, trigger change, after setup listener:

<div class='element'>
<label for='daily_x'>Daily Jackpot Starting Pot:</label>
<input type='text' name='daily_x' value='<?php echo $rafde?>' />
</div>
</div>
<script>
$(function() {
 $('#daily').change(function() {
     if($(this).attr('checked')){
       $('#daily_x').show();
     }
     else{
       $('#daily_x').hide();
     }
 });
 $('#daily').trigger('change');
});
</script>