两个复选框的联动效果

最新推荐文章于 2022-04-18 19:49:16 发布

原创最新推荐文章于 2022-04-18 19:49:16 发布 · 3.2k 阅读

CC 4.0 BY-SA版权

本文探讨如何创建两个复选框的联动交互，当用户操作一个复选框时，另一个复选框的状态会相应改变。示例代码中，通过alert展示了变量i和val在不同状态下的输出值，分别为0, 1, 2和aaa, bbb, ccc。" 78589896,7328249,电商网站购物车布局探讨,"['前端开发', '网页布局', 'UI设计', '用户体验', '电商网站']

$('input[name="merchantIds"]').each(function(){
    $(this).click(function () {
        var chkStr = "";
        $('input[name="merchantIds"]:checked').each(function(i, o){
            chkStr += $(this).val()+",";
        });
        $.ajax({
            type: "POST",
            url: "shop/findByMerchantIds?merchantIds="+chkStr,
            success: function(msg) {
                if (msg.success) {
                    var obj = msg.obj;
                    $("#shopIdsControl .checkboxSpan").hide();
                    $.each(obj, function(shopIndex, shop){
                        $("#shopIdsControl input[value='"+shop.id+"']").parents(".checkboxSpan").show();
                    });
                }
            }
        });
    });
});

1
2
3
4
5 var arr1
 = [ "aaa", "bbb", "ccc" ]; 
$.each(arr1, function(i,val){ 
alert(i); 
alert(val);
});
alert(i)将输出0，1，2
alert(val)将输出aaa，bbb，ccc