Using jQuery to change a dropdown menu when a checkbox is checked

Question

i'm a bit confused about how to go about this problem. Currently when a user changes the "quantity" from the dropdown, it checks the checkmark, but when its moved to zero the checkmark is unchecked.

var val = 0
  $('.drop').on('change',function() {
    var val = $(this).val();
    if(val > 0) {
      var product = $(this).attr("prodindex");
      $('#switchName' + product).prop('checked', true);
    }
    else {
      var product = $(this).attr("prodindex");
      $('#switchName' + product).prop('checked', false);
    }
  });

part of the form:

<input class='check' id='switchName0' type='checkbox'>
                      <label for='switchName0'></label>
                    </div>
                    <div class='col-lg-8'>
                      <input id="order_products__product_id" name="order_products[][product_id]" type="hidden" value="4" />
                      test
                      <br>
                      <div class='subheader'>$22.00</div>
                    </div>
                    <div class='col-lg-2'>
                      <select class="drop" data-cost-per-unit="2200" id="test" name="order_products[][quanity]" prodindex="0"><option value="0">0</option>
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
                      <option value="5">5</option>
                      <option value="7">7</option>
                      <option value="8">8</option>
                      <option value="9">9</option>
                      <option value="10">10</option>
                      <option value="11">11</option>
                      <option value="12">12</option>
                      <option value="13">13</option>
                      <option value="14">14</option>
                      <option value="15">15</option></select>
                    </div>
                  </div>
                </div>
              </div>
            </div>

I want to make it so if the checkmark is not checked and you check it, it changes the quantity to 1 and if you uncheck it, it goes to zero. But since I have this other jquery here, if i use $('.checkbox').on('change',fucntion(){} it will change every time the dropdown is moved. Whats a better solution to this problem?

I'm a bit confused here. Do you want the checkbox to change the option, the option to change the checkbox, or both? — afsantos
– afsantos, Commented Oct 23, 2014 at 23:10
I want the checkbox when clicked to change the value of the dropdown to 1. But I still want it to be checked when an option is picked from the dropdown. So if the dropdown is at 0, and you click the checkbox, it changes the dropdown value to 1. After that if you add a higher value to the dropdown, it stays checked unless its 0. — TuxedoTomson
– TuxedoTomson, Commented Oct 23, 2014 at 23:14

afsantos · Accepted Answer · 2014-10-23 23:34:47Z

1

The following code seems to work, from my tests on your fiddle. Both the checkbox and the select affect each other. This code assumes, as your code hints, that all checkboxes will have an id of the form switchName#, where # is a number.

Don't forget to change the 10 (switchName length) on your actual code to match your ids.

var $drops = $('.drop');

$('.check').on('change', function() {
    var val = $(this).prop('checked'),
        product = this.id.slice(10);
    $drops.filter(function (i, e) {
        return $(this).attr('prodindex') == product;
    }).val(val ? '1' : '0');
});

$drops.on('change',function() {
    var val = +(this.value),
        product = $(this).attr("prodindex");
    $('#switchName' + product).prop('checked', val > 0);
});

answered Oct 23, 2014 at 23:34

afsantos

5,2064 gold badges32 silver badges55 bronze badges

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

2 Comments

TuxedoTomson Over a year ago

Thanks, How could I do this if I have more than 10 products? My id's would then jump into double digits. When page is loaded, there will always be a different amount of switches.

afsantos Over a year ago

@TuxedoTomson I considered that situation. That's why I've used this.id.slice(10). It gets the substring starting from index 10 (where the digits start) until the end of the string (no matter how many digits there are). You may as well have a thousand products, the code works just the same with no changes needed.

Collectives™ on Stack Overflow

Using jQuery to change a dropdown menu when a checkbox is checked

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related