选中复选框时,使用jQuery更改下拉菜单
Using jQuery to change a dropdown menu when a checkbox is checked
我对如何解决这个问题有点困惑。目前,当用户从下拉列表中更改"数量"时,会选中复选标记,但当其移动到零时,会取消选中复选标记。
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(){}
,它将在每次移动下拉列表时发生变化。这个问题有什么更好的解决办法?
根据我对您的fiddle的测试,以下代码似乎可以工作。复选框和选择都会相互影响。正如您的代码所提示的,此代码假设所有复选框都具有形式为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);
});
相关文章:
- Jquery下拉菜单的奇怪行为
- jQuery下拉菜单图像更改
- Jquery下拉菜单和输入表单功能不太正常
- Jquery下拉菜单位于幻灯片上方的一个显示位置
- jQuery下拉菜单使用slideUp()和slideDown()
- jquery下拉菜单修改所选文本,但在后续单击时显示先前所选文本的原始值
- jQuery下拉菜单和CSS媒体查询冲突
- 点击Jquery下拉菜单
- Jquery 下拉菜单无法正常工作
- jQuery下拉菜单行为不正常
- jQuery下拉菜单在纯JavaScript中
- 单击以关闭移动设备上的jQuery下拉菜单,同时保留其他行为
- JQuery 下拉菜单不会显示下拉菜单
- jQuery下拉菜单一遍又一遍
- jQUERY下拉菜单不会,当我点击它时关闭,除非我的锚点中有一个#tag.it 保持下拉,否则当我点击时什么都不会发生
- 使用jQuery下拉菜单更改谷歌地图图标
- Jquery 下拉菜单鼠标输入延迟
- jQuery下拉菜单将打开所有子菜单
- 哪个元素会影响我的jquery下拉菜单的位置-->使其正确运行
- 在Jquery下拉菜单中