Javascript 在jQuery Mobile中全选/取消全选选项

我正在尝试使用jQuery Mobile进行全选、全选。这看起来很琐碎，但我一整天都在为这件事倾诉心声。这就是它看起来的样子：

这是

<div data-role="page" id="one">
  <div data-role="content">
    <label for="sel">Select the Options</label>
    <select name="sel" id="sel" data-native-menu="false" multiple="multiple">
      <option value="-1" selected>-All Brands-</option>
      <option value="1">Prod 1</option>
      <option value="2">Prod 2</option>
      <option value="3">Prod 3</option>
    </select>
  </div>
</div>

---

我已经尝试了很多东西，但都做不好。

好的，jquery mobile multi-select只有一个更改事件，正如您可能读到的那样。所以我能想到的唯一方法是存储所有品牌项目的状态，然后检查它是否已更改，然后选择或取消选择所有。下面是您的JSFIDLE，其中包含更改：

像这样：

var arr = [];
$("#sel").on("change", function (event, ui) {

    var allSelected = $("option:first", this).attr("selected");

    if (this.wasAllSelected && !allSelected) {
        $("#sel option:selected").removeAttr("selected");
        this.wasAllSelected = allSelected;
    }
    else if (!this.wasAllSelected && allSelected) {
        $("#sel option").attr("selected", "selected");
        this.wasAllSelected = allSelected;
    }
    $("#sel").selectmenu("refresh", true);
})

// For de-selecting

$( '#yourSelectMenuId'  ).val( '' ).change();
$( '#yourSelectMenuId-listbox ul li a' ).removeClass( 'ui-checkbox-on' );
$( '#yourSelectMenuId-listbox ul li a' ).addClass( 'ui-checkbox-off' );

---

如果选择操纵类，则可以如下手动操作：

var arr = [];
$("#sel").on("change", function (event, ui) {

    var allSelected = $("option:first", this).attr("selected");

    if (this.wasAllSelected && !allSelected) {
        $("#sel option:selected").removeAttr("selected");
        this.wasAllSelected = allSelected;
    }
    else if (!this.wasAllSelected && allSelected) {
        $("#sel option").attr("selected", "selected");
        this.wasAllSelected = allSelected;
    }
    $("#sel").selectmenu("refresh", true);
})

// For de-selecting

$( '#yourSelectMenuId'  ).val( '' ).change();
$( '#yourSelectMenuId-listbox ul li a' ).removeClass( 'ui-checkbox-on' );
$( '#yourSelectMenuId-listbox ul li a' ).addClass( 'ui-checkbox-off' );

---

不要忘记将-listbox扩展添加到jqm自动添加的选择菜单id中。

使用

.prop（“selected”，true/false）

。它修复了所有品牌框，但由于该处理程序在选择框更改时运行，因此单击任何其他项都不起作用。谢谢Damon。这很有帮助。我注意到的一件事是，如果“所有品牌”选项默认为选中，那么下次您勾选1选项时，它会选择全部。查看这里的Fiddle以了解我的意思-我刚刚将selected属性添加到option元素。如果您将所有品牌默认为selected，则还需要将wasAllSelected的默认值更改为true，以便它与复选框处于相同的状态。这并不简单，但一种方法是测试This.wasAllSelected是否尚未初始化，如果尚未初始化，则将其设置为true，如下所示：注意，如果您将所有品牌默认为selected，则确实需要将其全部设置为selected，否则它们将不同步。