Getting a URL to decide value of a checkbox

Question

I have looked around and not found anything too useful as to how I can do this, so sorry if it's a repeat question.

I am trying to get it so if a user clicks a certain link, they will be sent to a page with a checkbox pre-checked.

For example, I have 3 categories

PSHE, Food and EHWB.

I have a page that has all post's with these categories on but with filters that only show the categories selected.

I want to have 3 links on the homepage, that if clicked, load the page with the checkbox of the corresponding link pre-checked.

What's the best way to do this?

All I haven't found so far is this:

$('input[type=checkbox').click(function(){
  window.location.hash = $(this).val();

});

This add's the value of the checkbox to the URL when clicked, i'm not sure if this is a stating point but any help would be appreciated. Thanks.

EDIT:

Here is my HTML as requested.

        <fieldset id="filters" class="form__section form__section--group form__section--categories">

          <legend class="form__section__title">
            <h2 class="form__section__title__text">Filter by category:</h2>
          </legend>

              <div class="form__item form__item--boolean form__item--checkbox">
                <button type="button" value=".all" id="checkAll">All</button>
              </div><!--/form__item-->
              <div class="form__item form__item--boolean form__item--checkbox">
                <input type="checkbox" name="ff-checkbox category-what-food" value=".category-what-food" id="category-what-food ff-checkbox-1" class="checkbox1" /><label for="category-what-food ff-checkbox-1">Food</label>
              </div><!--/form__item-->
              <div class="form__item form__item--boolean form__item--checkbox">
                <input type="checkbox" name="ff-checkbox category-what-pshe" value=".category-what-pshe" id="category-what-pshe ff-checkbox-2" class="checkbox1" /><label for="category-what-pshe ff-checkbox-2">PSHE</label>
              </div><!--/form__item-->
              <div class="form__item form__item--boolean form__item--checkbox">
                <input type="checkbox" name="ff-checkbox category-what-sex-education" value=".category-what-sex-education" id="category-what-sex-education ff-checkbox-3" class="checkbox1" /><label for="category-what-sex-education ff-checkbox-3">Sex Education</label>
              </div><!--/form__item-->
              <div class="form__item form__item--boolean form__item--checkbox">
                <input type="checkbox" name="ff-checkbox category-what-physical-education" value=".category-what-physical-education" id="category-what-physical-education ff-checkbox-4" class="checkbox1" /><label for="category-what-physical-education ff-checkbox-4">Physical Education</label>
              </div><!--/form__item-->
              <div class="form__item form__item--boolean form__item--checkbox">
                <input type="checkbox" name="ff-checkbox category-what-ehwb" value=".category-what-ehwb" id="category-what-ehwb ff-checkbox-5" class="checkbox1" /><label for="category-what-ehwb ff-checkbox-5">EHWB</label>
              </div><!--/form__item-->
              <div class="form__item form__item--boolean form__item--checkbox">
                <input type="checkbox" name="ff-checkbox category-what-environment" value=".category-what-environment" id="category-what-environment ff-checkbox-6" class="checkbox1" /><label for="category-what-environment ff-checkbox-6">Environment</label>
              </div><!--/form__item-->
              <div class="form__item form__item--boolean form__item--checkbox">
                <input type="checkbox" name="ff-checkbox category-what-policies" value=".category-what-policies" id="category-what-policies ff-checkbox-7" class="checkbox1" /><label for="category-what-policies ff-checkbox-7">Policies</label>
              </div><!--/form__item-->
              <div class="form__item form__item--boolean form__item--checkbox">
                <input type="checkbox" name="ff-checkbox category-what-governors" value=".category-what-governors" id="category-what-governors ff-checkbox-8" class="checkbox1"  /><label for="category-what-governors ff-checkbox-8">Governors</label>
              </div><!--/form__item-->

        </fieldset><!--/form__group-->

why don't you send it as a data parameter in the query string? — Manish Puri, Aug 06 '14 at 09:20
what about if you make your first link like: http://example.com/somepage.php?Food and than on somepage.php you can put condition if(isset($_GET['Food'])) echo checked — Dusan Plavak, Aug 06 '14 at 09:21
@ManishPuri If that would work as well, would you mind telling me how I would do this? Thanks for your responce. — Harry Francis, Aug 06 '14 at 09:34
@HarryFrancis $('input[type=checkbox]') ou are missing a `]` — Govind Singh, Aug 06 '14 at 09:46

score 0 · Answer 1 · answered Aug 06 '14 at 09:28

0

Yes Harry, your appoach is correct. Instead of assigning the checkbox value to location hash. write conditional statements to assign the required url itself to open

$('input[type=checkbox]').click(function() {
    var x = $(this).val();
    if (x == "cond 1") {
        window.open("url1", "_self");
    } else if (x == "cond2") {
        window.open("url2", "_self"); //and so on
    }
});

Hope it helps..

answered Aug 06 '14 at 09:28

Khaleel

1,212
2
16
34

Thanks for your response! could you help me with what exactly I need to put in this, thanks again. :) – Harry Francis Aug 06 '14 at 09:46
Ex: if (x == ".category-what-food") { window.open("correspondingurl", "_self"); }else if (x == ".category-what-pshe") { window.open("correspondingurl", "_self"); } // and so on, you can also append the value as #param to url if you are generating url dynamically – Khaleel Aug 06 '14 at 10:04

Getting a URL to decide value of a checkbox

1 Answers1