Javascript 在“选择”下拉列表中，根据选项值更改隐藏/显示复选框

因此，我有一系列按钮，用于关闭/打开一周中每一天的所有复选框，目前看起来非常混乱，因此我希望将所有按钮都转换为一个下拉选择字段，例如，将选项更改为“星期一”时，将运行“星期一”jquery以隐藏所有“星期一”复选框

这是html

<input type='submit' name='submit_performances' value='update all'>
    <input type='button' id='select-all-toggle' name='select-all-toggle' value='Hide/Show all Performances'>
    <input type='button' id='select-all-toggle-monday' name='select-all-toggle-monday' value='Hide/Show all Monday Performances'>
    <input type='button' id='select-all-toggle-tuesday' name='select-all-toggle-tuesday' value='Hide/Show all Tuesday Performances'>
    <input type='button' id='select-all-toggle-wednesday' name='select-all-toggle-wednesday' value='Hide/Show all Wednesday Performances'>
    <input type='button' id='select-all-toggle-thursday' name='select-all-toggle-thursday' value='Hide/Show all Thursday Performances'>
    <input type='button' id='select-all-toggle-friday' name='select-all-toggle-friday' value='Hide/Show all Friday Performances'>
    <input type='button' id='select-all-toggle-saturday' name='select-all-toggle-saturday' value='Hide/Show all Saturday Performances'>
    <input type='button' id='select-all-toggle-sunday' name='select-all-toggle-sunday' value='Hide/Show all Sunday Performances'>
    </form>

这是jQuery

<script>
$(document).ready(function() {
    $('#select-all-toggle').toggle(
        function() {
            $('.select-all-identifier').prop('checked', true);
        },
        function() {
            $('.select-all-identifier').prop('checked', false);
        }
    );
});

$(document).ready(function() {
    $('#select-all-toggle-monday').toggle(
        function() {
            $('.monday').prop('checked', true);
        },
        function() {
            $('.monday').prop('checked', false);
        }
    );
});

$(document).ready(function() {
    $('#select-all-toggle-tuesday').toggle(
        function() {
            $('.tuesday').prop('checked', true);
        },
        function() {
            $('.tuesday').prop('checked', false);
        }
    );
});

$(document).ready(function() {
    $('#select-all-toggle-wednesday').toggle(
        function() {
            $('.wednesday').prop('checked', true);
        },
        function() {
            $('.wednesday').prop('checked', false);
        }
    );
});

$(document).ready(function() {
    $('#select-all-toggle-thursday').toggle(
        function() {
            $('.thursday').prop('checked', true);
        },
        function() {
            $('.thursday').prop('checked', false);
        }
    );
});

$(document).ready(function() {
    $('#select-all-toggle-friday').toggle(
        function() {
            $('.friday').prop('checked', true);
        },
        function() {
            $('.friday').prop('checked', false);
        }
    );
});

$(document).ready(function() {
    $('#select-all-toggle-saturday').toggle(
        function() {
            $('.saturday').prop('checked', true);
        },
        function() {
            $('.saturday').prop('checked', false);
        }
    );
});

$(document).ready(function() {
    $('#select-all-toggle-sunday').toggle(
        function() {
            $('.sunday').prop('checked', true);
        },
        function() {
            $('.sunday').prop('checked', false);
        }
    );
});
</script>

$（文档）.ready（函数（）{
$（“#选择所有切换”）。切换(
函数（）{
$（'.select all identifier'）.prop（'checked'，true）；
},
函数（）{
$（'.select all identifier'）.prop（'checked'，false）；
}
);
});
$（文档）.ready（函数（）{
$（“#选择所有切换星期一”）。切换(
函数（）{
$（'.monday'）.prop（'checked'，true）；
},
函数（）{
$（'.monday'）.prop（'checked'，false）；
}
);
});
$（文档）.ready（函数（）{
$（“#选择所有切换星期二”）。切换(
函数（）{
$（'.星期二'）.prop（'checked'，true）；
},
函数（）{
$（'.星期二'）.prop（'checked'，false）；
}
);
});
$（文档）.ready（函数（）{
$（“#选择所有切换星期三”）。切换(
函数（）{
$（'.星期三'）.prop（'checked'，true）；
},
函数（）{
$（'.星期三'）.prop（'checked'，false）；
}
);
});
$（文档）.ready（函数（）{
$（“#选择所有切换周四”）。切换(
函数（）{
$（'.星期四'）.prop（'checked'，true）；
},
函数（）{
$（'.星期四'）.prop（'checked'，false）；
}
);
});
$（文档）.ready（函数（）{
$（“#选择所有切换星期五”）。切换(
函数（）{
$（'.friday'）.prop（'checked'，true）；
},
函数（）{
$（'.friday'）.prop（'checked'，false）；
}
);
});
$（文档）.ready（函数（）{
$（“#选择所有切换周六”）。切换(
函数（）{
$（'saturday'）.prop（'checked'，true）；
},
函数（）{
$（'saturday'）.prop（'checked'，false）；
}
);
});
$（文档）.ready（函数（）{
$（“#选择所有切换周日”）。切换(
函数（）{
$（'sunday'）.prop（'checked'，true）；
},
函数（）{
$（'.sunday'）.prop（'checked'，false）；
}
);
});

任何帮助都将不胜感激

---

谢谢，

检查文档ftw！jquery文档有一个事件可以准确地处理这一点，页面如下：

如果你向下滚动一点，你会看到一个互动的例子，展示了它如何与选择框一起工作，如果我没有弄错的话，这正是你想要的

另外，根据您的示例代码提供了两个javascript一般提示：

正如上面评论中提到的，您只需要准备一个文档，就可以将所有代码放在单个函数中

别再说了！通过解析选择器字符串，可以将所有这些单独的方法转换为一个方法。如果在每个按钮上放置两个类而不是一个ID，则可以有效地剪切此处的大部分代码。第一个类是

select all toggle

，第二个类是星期几。然后，您可以使用

在任何元素上运行切换和更改事件。选择所有切换

选择器，并使用jquery的

$（el）.attr（'class'）

来完成第二个类并返回当天的值

---

我当然可以在这里给你写一个更清晰的答案，但我认为这对学习没有好处。请仔细阅读此处的建议并尝试修改您的代码--我敢打赌，无需我给您一个答案，您就可以完成此操作：）

您无需声明文档。每次使用新切换时，准备就绪。只要一次就可以了。