Question

我有多个复选框（26）。他们的ID是“check-box-1”，“check-box-2”等。

如何使这些复选框在代码$('#check-box-XXX').prop('checked', true);中起作用，以便脚本（或css）根据链接地址自动添加到＃check-box-1或#check-box-2？以下是代码：http://codepen.io/NeedHate/pen/XJpLBK 这里还有一张需要的图片。 http://eyes.in.ua/wp-content/uploads/2014/07/Accordion.png

Answer 1

好的，让我们看看这是否有帮助，

首先保存与窗口相关的所有复选框的位置：

var i = 0,
    lb = $('label[for*=check-box]'),
    ck = $('input[type=checkbox]'),
    len = lb.length,
    lbPos = definePositions();

function definePositions(){
    var i = 0,
        pos = [];
    // save the positions of the labels into an array
    for(;i<len;i++){ // iterate through the array with all of the checkboxes in order to save their position
        pos[i] = lb.eq(i).offset().top; // this gives you the current position of the label
    }
    return pos;
}

然后，将事件滚动绑定到窗口，每次用户滚动页面时，它将检查是否有任何复选框位置小于或等于窗口的当前滚动。如果确实如此，则会选中该框，否则将检查错误。

// bind the page scroll event and check for the positions
$(window).unbind('scroll').scroll(function() {
    var s = $(window).scrollTop();
    for(i=0;i<len;i++){ // iterate through the array with all the positions of the checkboxes
        if(lbPos[i]<=s){ // if the position of the checkbox is less or equal to current scroll
            ck.eq(i).prop('checked', true); // prop the checkbox for true to open
        }else{
            ck.eq(i).prop('checked', false); // fallback to false to all other checkboxes
        }
    }
    lbPos = definePositions(); // redefine the label positions, since it changes with the accordion
});

多个复选框和Jquery

1 个答案: