Load hidden div with checkbox on load

Question

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()
  })
});

Answer 1

If the logic for the change event handler function already works correctly all you need to do is trigger that event handler when the page loads (after it has been bound):

$(h).change(function() {
    ...
}).trigger('change');

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 if statement 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.

Answer 2

You need to create cookie for every check box option.

For example if you check one option and DIV is visible now, then create cookie for that DIV call it something related to that DIV and set it's content to something that will associate yo that it is ON like true.

Then when reloading page check in php if that cookie exists and it's content = true and if that set style display to block of that particular DIV.

For turning off visibility you can either set cookie time to -x seconds to make it expired or update cookie content to false.

You can make cookie with javascript on same page on which you click those checkbox-es no need for reloading.

Answer 3

页面的每次加载都会删除DOM，因此您必须将临时数据保存在Cookie中。