检查复选框值是否已更改(选中或取消选中),然后运行功能

时间:2012-01-19 13:59:15

标签: jquery

您好我是jquery的新手,并且想知道执行以下操作会有多么简单。

我有许多列表项都包含动态提取的内容,这意味着每个列表项的高度可能会有所不同。我正在运行一个jquery函数来检查每个列表项的高度,然后将所有列表项设置为最高列表项的高度。这一切都可以在$(window).resize(function()事件中正常工作,但是我正在寻找一个函数来调整当复选框状态被更改(选中或取消选中)时要触发的列表项。我正在努力弄清楚我如何有效地做到这一点。

对此的任何帮助都将非常感激。

由于 乔恩

我正在使用的代码如下 - 不使用.change()事件但使用(window).resize事件。建议将非常感谢 - 提前感谢

var currentTallest = 0,
                currentRowStart = 0,
                rowDivs = new Array();

            function setConformingHeight(el, newHeight) {
                    // set the height to something new, but remember the original height in case things change
                    el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
                    el.height(newHeight);
            }

            function getOriginalHeight(el) {
                    // if the height has changed, send the originalHeight
                    return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
            }

            function columnConform() {

                    // find the tallest element in the row, and set the heights of all of the elements to match it.
                    $('#results > li').each(function() {

                            // "caching"
                            var $el = $(this);

                            var topPosition = $el.position().top;

                            if (currentRowStart != topPosition) {

                                    // we just came to a new row.  Set all the heights on the completed row
                                    for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);

                                    // set the variables for the new row
                                    rowDivs.length = 0; // empty the array
                                    currentRowStart = topPosition;
                                    currentTallest = getOriginalHeight($el);
                                    rowDivs.push($el);

                            } else {

                                    // another div on the current row.  Add it to the list and check if it's taller
                                    rowDivs.push($el);
                                    currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest);

                            }
                            // do the last row
                            for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);

                    });

            }


           $('fieldset#filter[type="checkbox"]').change(function() { 
                    columnConform();

            });

1 个答案:

答案 0 :(得分:1)

您可以使用jQuery的change事件来捕获复选框上的更改。

e.g。 $('input[type="checkbox"]').change(function(){ /* resize logic in here */ });

您可以更改input[type="checkbox"]位以缩小范围。

如果您要选择myChkbox类的任何复选框,请使用:$('.myChkbox')...如果您希望将其应用于特定表单(id = myform)中的所有复选框,请使用:{{1等等......