multiple category checkbox

Question

I have two categories list Gender and Brand. First category

<ul>
  <li><input type="checkbox" id="checkboxa" class="chkbox" value="url.php?gender=children" name="gender"> Kid</li>
  <li><input type="checkbox" id="checkboxb" class="chkbox" value="url.php?gender=male" name="gender"> Male</li>
<li><input type="checkbox" id="checkboxc" class="chkbox" value="url.php?gender=female" name="gender"> Female</li>
</ul>

Second Category

<ul>
  <li><input type="checkbox" id="checkbox1" class="chkbox" value="url.php?barnd=brand1" name="brand"> Brand1</li>
  <li><input type="checkbox" id="checkbox2" class="chkbox" value="url.php?barnd=brand2" name="brand"> Brand2</li>
  <li><input type="checkbox" id="checkbox3" class="chkbox" value="url.php?barnd=brand3" name="brand"> Brand3</li>
  <li><input type="checkbox" id="checkbox4" class="chkbox" value="url.php?barnd=brand4" name="brand"> Brand4</li>
</ul>

This is my js:

<script>
$(document).ready(function() {
$('.chkbox').on('change', function() {
if ($(this).is(':checked')) {
  var url = $(this).val();
  console.log(url);

  window.location = url;
}
});
});
</script>

Right now my page is reloading when one item is checked. I want to make the page reload only when one item of each category is checked. Plz help... Thanks in advance.....

PS: url should be like url.php?brand=$brand&&gender=$gender $:-checked

Dan Philip Bejoy · Accepted Answer · 2017-04-30 05:14:45Z

2

Change your if condition to

if($("input[name='gender']:checked").length && $("input[name='brand']:checked").length) {
  var url = $(this).val();    
  window.location = url;
}

$('.chkbox').on('change', function() {
  var gender = $("input[name='gender']:checked"),
    brand = $("input[name='brand']:checked");
  if (gender.length && brand.length) {
    var url = "url.php?brand=" + brand.val() + "&&gender=" + gender.val();
    console.log(url);
    //window.location = url;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="checkbox" id="checkboxa" class="chkbox" value="children" name="gender"> Kid</li>
  <li>
    <input type="checkbox" id="checkboxb" class="chkbox" value="male" name="gender"> Male</li>
  <li>
    <input type="checkbox" id="checkboxc" class="chkbox" value="female" name="gender"> Female</li>
</ul>
<ul>
  <li>
    <input type="checkbox" id="checkbox1" class="chkbox" value="brand1" name="brand"> Brand1</li>
  <li>
    <input type="checkbox" id="checkbox2" class="chkbox" value="brand2" name="brand"> Brand2</li>
  <li>
    <input type="checkbox" id="checkbox3" class="chkbox" value="brand3" name="brand"> Brand3</li>
  <li>
    <input type="checkbox" id="checkbox4" class="chkbox" value="brand4" name="brand"> Brand4</li>
</ul>

edited Apr 30, 2017 at 5:14

answered Apr 30, 2017 at 4:37

Dan Philip Bejoy

4,4032 gold badges20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dan Philip Bejoy Over a year ago

@lazyme114 It works. I've added a snippet. Are there any errors in your browser console.

lazyme114 Over a year ago

My mistake it started working... But I needed url to be something like url.php?brand=brand&&gender=gender

Dan Philip Bejoy Over a year ago

@lazyme114 I've updated the snippet. Modified the values of input and commented the redirect part.

Dan Philip Bejoy Over a year ago

In case of multiple options selected it would choose the value of the first input checked. I guess you only want one option to be checked , in that case you should go for input type radio.

Geee · Accepted Answer · 2017-04-30 04:44:34Z

Here is the snippet.

$(document).ready(function() {
  $('#fcat .chkbox').on('change', function() {
    if ($(this).is(':checked')) {
      var url = $(this).val();
      if ($(this).is(':checked')) {
        if ($('.cat').is(':checked')) {
          alert(url);
          window.location = url;
        }else{
          alert('Select gender!');
        }
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><input type="checkbox" id="checkboxa" class="cat" value="url.php?gender=children" name="gender"> Kid</li>
  <li><input type="checkbox" id="checkboxb" class="cat" value="url.php?gender=male" name="gender"> Male</li>
<li><input type="checkbox" id="checkboxc" class="cat" value="url.php?gender=female" name="gender"> Female</li>
</ul>

<ul id="fcat">
  <li><input type="checkbox" id="checkbox1" class="chkbox" value="url.php?barnd=brand1" name="brand"> Brand1</li>
  <li><input type="checkbox" id="checkbox2" class="chkbox" value="url.php?barnd=brand2" name="brand"> Brand2</li>
  <li><input type="checkbox" id="checkbox3" class="chkbox" value="url.php?barnd=brand3" name="brand"> Brand3</li>
  <li><input type="checkbox" id="checkbox4" class="chkbox" value="url.php?barnd=brand4" name="brand"> Brand4</li>
</ul>

If you check gender checkbox and select brand it will reload your brand location else return alert to select gender first. Hope this help you!

Greetings!

Erick Lanford Xenes · Accepted Answer · 2017-04-30 05:09:13Z

<ul>
  <li><input type="checkbox" id="checkboxa" class="chkbox chkType1" value="url.php?gender=children" name="gender"> Kid</li>
  <li><input type="checkbox" id="checkboxb" class="chkbox chkType1" value="url.php?gender=male" name="gender"> Male</li>
<li><input type="checkbox" id="checkboxc" class="chkbox chkType1" value="url.php?gender=female" name="gender"> Female</li>
</ul>
<ul>
  <li><input type="checkbox" id="checkbox1" class="chkbox chkType2" value="url.php?barnd=brand1" name="brand"> Brand1</li>
  <li><input type="checkbox" id="checkbox2" class="chkbox chkType2" value="url.php?barnd=brand2" name="brand"> Brand2</li>
  <li><input type="checkbox" id="checkbox3" class="chkbox chkType2" value="url.php?barnd=brand3" name="brand"> Brand3</li>
  <li><input type="checkbox" id="checkbox4" class="chkbox chkType2" value="url.php?barnd=brand4" name="brand"> Brand4</li>
</ul>

And the javascript:

    <script>
    $(document).ready(function() {
    $('.chkbox').on('change', function() {
    if ($(this).is(':checked')) {

    if(($('.chkType1').length > 0 && $('.chkType2').length > 0))
     {
        var url = $(this).val();

url += '?brand='+$($('.chkType1')[0]).val()+'&&gender=' + $($('.chkType2')[0]).val();

        console.log(url);

      window.location = url;
    }
    }
    });
    });
    </script>

Collectives™ on Stack Overflow

multiple category checkbox

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related