如何在jqueryMobile 1.4.2自定义选择中添加select all选项

我正在使用jqueryMobille版本1.4.2我有一个星期几的选择下拉列表

  Select All Monday Tuesday Wednesday Thursday Friday Saturday Sunday  

我想添加select All选项，选择其选择的所有选项。当取消选择任何其他选项时，它还应显示切换行为。 但是，当我在select All框中添加任何事件时，它不会调用它，因为jquery会创建一个包含所有选项的虚拟选择，并且事件不会传输给它。 基本上，它应该像bootstrap multiselect一样工作。 http://davidstutz.github.io/bootstrap-multiselect/我试图将它与我的应用程序集成，但它不起作用。 请建议任何其他选择。

Answer 1

这在jQM小部件中没有提供，但是通过一些额外的脚本，您可以实现此function。

给定选择标记：

  Days of the week Select All Monday Tuesday Wednesday Thursday Friday Saturday Sunday  

弹出jQM的菜单列表被分配了选择ID +“-menu”的id。 因此，我们可以处理菜单按钮的click事件，看看是否单击了select all：

 var IsSelectAllOperation = false; $(document).on("click", "#selectDays-menu li a", function(){ //was select all clicked (data-option-index="1") var idx = $(this).closest("li").data("option-index"); if (idx == '1') { var IsChecked = $(this).hasClass("ui-checkbox-on"); if (IsChecked){ //select all IsSelectAllOperation = true; $("#selectDays-menu li a").each(function( index ) { var IsHidden = $(this).closest("li").hasClass("ui-screen-hidden"); var NotChecked = $( this ).hasClass("ui-checkbox-off"); if (!IsHidden && NotChecked){ $(this).click(); } }); IsSelectAllOperation = false; } } else { //uncheck the select all option if (!IsSelectAllOperation) { var $selall = $('#selectDays-menu li[data-option-index="1"] a'); if ($selall.hasClass("ui-checkbox-on")){ $selall.click(); } } } }); 

我们使用事件委托来处理名为“selectDays-menu”的选择菜单中任何锚点的点击。 然后我们检查包含锚点的LI上名为option-index的数据属性。 选项0是隐藏占位符，1是全选选项，其余为2,3,4等。

因此，如果单击1，我们会查看是否正在选中或取消选中。 如果正在检查它，则迭代其余选项，如果尚未选中它们，则触发它们上的click事件。

如果单击任何其他选项，我们取消选中全选选项。

这是一个有效的DEMO