选中复选框时,使用jQuery更改下拉菜单

时间:2014-10-23 23:00:13

标签: javascript jquery html

我对如何解决这个问题感到有些困惑。目前,当用户更改"数量"从下拉列表中,它检查复选标记,但当它移动到零时,取消选中复选标记。

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

表格的一部分:

<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>

我想这样做,如果没有选中复选标记并检查它,它会将数量更改为1,如果取消选中它,它将变为零。但是因为我在这里有另外的jquery,如果我使用$('.checkbox').on('change',fucntion(){},每次下移移动时它都会改变。什么是解决这个问题的更好方法?

1 个答案:

答案 0 :(得分:1)

以下代码似乎适用于我对小提琴的测试。复选框和选择都相互影响。正如您的代码提示,此代码假定所有复选框都具有switchName#形式的ID,其中#是一个数字。

不要忘记更改实际代码的10 switchName 长度)以匹配您的ID。

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