So I have a bunch of divs that are hidden on load unless a checkbox is ticked.
It works on the change event, but on the refresh of the page the divs return hidden unless you turn the checkbox off and then back on.
I was wondering if there is a way to check which checkbox is ticked on load and then display:block, rather than ticking and unticking.
HTML/PHP
<div class="misc-pub-section">
<label><b>Year of release</b></label>
<input name="review_release_year" value="<?php echo $review_release_year; ?>" />
</div>
<div class="misc-pub-section">
<label><b>Director/Author/Company/Developer</b></label>
<input name="review_owner" value="<?php echo $review_owner; ?>" />
</div>
<div class="misc-pub-section">
<label><b>Generic Website Link</b></label>
<input name="review_website_link" value="<?php echo $review_website_link; ?>" />
</div>
<div class="misc-pub-section feature-short-webseries" style="display:none;">
<label><b>IMDb Title Link</b></label><br/>
<em style="color: #999;">imdb.com/title/</em><input size="9" name="review_imdb_link" value="<?php echo $review_imdb_link; ?>" />
</div>
<div class="misc-pub-section feature-short-webseries" style="display:none;">
<label><b>Story rating (out of 5)</b></label>
<input max="5" name="review_story_rating" value="<?php echo $review_story_rating; ?>" />
</div>
<div class="misc-pub-section feature-short-webseries-videogame" style="display:none;">
<label><b>Enjoyment rating (out of 5)</b></label>
<input max="5" name="review_enjoy_rating" value="<?php echo $review_enjoy_rating; ?>" />
</div>
<div class="misc-pub-section feature-short" style="display:none;">
<label><b>Soundtrack rating (out of 5)</b></label>
<input max="5" name="review_sound_rating" value="<?php echo $review_sound_rating; ?>" />
</div>
<div class="misc-pub-section webseries" style="display:none;">
<label><b>Attention span rating (out of 5)</b></label>
<input max="5" name="review_span_rating" value="<?php echo $review_span_rating; ?>" />
</div>
<div class="misc-pub-section hardware-software" style="display:none;">
<label><b>Features rating (out of 5)</b></label>
<input max="5" name="review_features_rating" value="<?php echo $review_features_rating; ?>" />
</div>
<div class="misc-pub-section hardware-software" style="display:none;">
<label><b>Function rating (out of 5)</b></label>
<input max="5" name="review_function_rating" value="<?php echo $review_function_rating; ?>" />
</div>
<div class="misc-pub-section hardware-software" style="display:none;">
<label><b>Value rating (out of 5)</b></label>
<input max="5" name="review_value_rating" value="<?php echo $review_value_rating; ?>" />
</div>
<div class="misc-pub-section software" style="display:none;">
<label><b>Operating System</b></label>
<input name="review_system_rating" value="<?php echo $review_system_rating; ?>" />
</div>
<div class="misc-pub-section videogame" style="display:none;">
<label><b>Graphics rating (out of 5)</b></label>
<input max="5" name="review_graphics_rating" value="<?php echo $review_graphics_rating; ?>" />
</div>
<div class="misc-pub-section videogame" style="display:none;">
<label><b>Gameplay rating (out of 5)</b></label>
<input max="5" name="review_gameplay_rating" value="<?php echo $review_gameplay_rating; ?>" />
</div>
jQuery
$(function() {
var a = $("#in-review-type-14"), b = $("#in-review-type-67"), f = $("#in-review-type-68"), d = $("#in-review-type-69"), e = $("#in-review-type-70"), c = $("#in-review-type-71"), h = $("#review-typechecklist input");
$(h).change(function() {
a.is(":checked") || b.is(":checked") || c.is(":checked") ? $(".feature-short-webseries").show() : $(".feature-short-webseries").hide();
a.is(":checked") || b.is(":checked") || c.is(":checked") || e.is(":checked") ? $(".feature-short-webseries-videogame").show() : $(".feature-short-webseries-videogame").hide();
a.is(":checked") || b.is(":checked") ? $(".feature-short").show() : $(".feature-short").hide();
c.is(":checked") ? $(".webseries").show() : $(".webseries").hide();
f.is(":checked") || d.is(":checked") ? $(".hardware-software").show() : $(".hardware-software").hide();
d.is(":checked") ? $(".software").show() : $(".software").hide();
e.is(":checked") ? $(".videogame").show() : $(".videogame").hide()
})
});
If the logic for the
changeevent handler function already works correctly all you need to do is trigger that event handler when the page loads (after it has been bound):On an unrelated note, ternary operators are generally used for storing or passing values based on a condition, rather than branching execution (that’s what an
ifstatement is for). Your code will work, you’ll just get errors if you run it through a tool such as JSLint it will complain about it.