实现 select 多个 "Check/Uncheck All" 事件

Question

我有以下标记

<select ng-model="sltStatus" id="sltStatusFilter" multiple class="right">
    <option value="0">View All</option>
    <option value="1">Study 1</option>
    <option value="2">Study 2</option>
    <option value="3">Study 3</option>
    <option value="4">Study 4</option>
</select>

下面是JavaScript代码

$('select').material_select();

具体化为此使用复选框。

fiddle

我怎样才能拥有 check/uncheck 所有功能，我用 Google 搜索了很多但没有找到任何相关内容。

Answer 1

Materialize 对 UX 元素应该如何表现和视觉交互有自己的看法。为此，我建议您添加个人 jQuery 功能来解决您想要这样做的问题：

    // Listen for click on toggle checkbox
$('#select-all').click(function(event) {   
    if(this.checked) {
        // Iterate each checkbox
        $(':checkbox').each(function() {
            this.checked = true;                        
        });
    }
});

<input type="checkbox" name="select-all" id="select-all" />

Answer 2

根据您的评论我了解到，我认为这就是您想要的

$('ul.dropdown-content li').first().click(function(){    
  $('ul.dropdown-content li:not(:first-child)').each(function(index) {
           $(this).find("input[type=checkbox]").prop("checked", $('ul.dropdown-content li').first().find("input[type=checkbox]").prop("checked"));                       
        });
});

已更新 fiddle https://jsfiddle.net/xv0p06d3/21/

请注意这一点，因为我使用的似乎是来自 Materialize 的 class...因此，如果 class 发生变化，您将需要更改代码.您可以找到一种方法来使用您自己的代码来获取 ul/li 元素。

希望对您有所帮助。

更新
上面的答案是纯粹的 jquery（就像你的 fiddle 和 jquery 一样）...使用 angular 进行这项工作的一种方法是创建这样的指令。

app.directive('selectMultiple', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).find('select').material_select();
            $(element).find("ul li").first().click(function(){  
            $(element).find("ul li:not(:first-child)").each(function(index) {
                   $(this).find("input[type=checkbox]").prop("checked", $(element).find("ul li").first().find("input[type=checkbox]").prop("checked"));                      
                 });
            });
        }
    };
});

勾选Angularfiddlehttp://jsfiddle.net/TH87t/1545/

亲切的问候。

Answer 3

物化很难定制！正如您将在 inspect element 中看到的那样，您的 select 正在用 class select-wrapper 编写一些不同的 div 所以我用 class for check/uncheck 函数 ...

$(".select-wrapper ul li:first").on("click",function(){    
    if($(this).hasClass("active")){
        $(this).parent().find("li").addClass("active selected");
        $(this).parent().find("input[type=checkbox]").prop("checked", true);
    } else {
        $(this).parent().find("li").removeClass("active selected");
        $(this).parent().find("input[type=checkbox]").prop("checked", false);
    }    
});

Answer 4

我发现的问题是，如果您尝试使用 $('select').val(...) 设置值，复选框不会更新。您需要再次手动调用 $('select').material_select() 更新它们：

$('select').material_select();
$('select').on('change',function () {
    var selected=$('select').val();
  if (selected.indexOf('0')===0) {
    $('select').val(['0','1','2','3','4']).material_select();
  }
})

此变通方法标记了所有选项，但关闭了 select，而且触发打开操作似乎不起作用。 Materialise 网络中关于此的文档对此很差，可能没有以编程方式控制组件的选项。

这里是一个不完整的演示，但是你可以了解大概的思路：

https://jsfiddle.net/xv0p06d3/23/

Answer 5

MaterializeCSS 内部不支持此功能。但是，这可以使用 jQuery 的 DOM 操作方法来实现。

绑定click事件：插件会在<select>上添加initializedclass，并为对应的<ul>添加一个唯一ID，以select-options-。我们可以使用这些知识来 select 第一个 <li> children 即下拉列表中的 "Check All" 选项。
检查 "Check All" 是否被 select 编辑：插件将在 select 编辑的项目上添加 active class。使用 hasClass()，我们可以检查 active class 是否添加到 select.
Selecting/Deselecting其他选项：利用上一步，我们可以得到"Check All"的状态。使用它，我们可以迭代其他选项并在适当的元素上触发 click 事件。
Bonus 更新选项文本：要更新选项文本，请使用 text() 方法获取文本并与 Check All 进行比较。使用 contents() 和 textContent 可以轻松更新文本。

注意：这段代码完全依赖于third-party插件创建的DOM元素。如果更新后，插件更改了 HTML 结构，则此代码将不起作用或需要相应更新。

Demo

$('select').material_select();

$('select[select-all].initialized').prev('ul[id^="select-options-"]').children('li:first').on('click', function() {
  var selector = 'li.active';
  if ($(this).hasClass('active')) {
    selector = 'li:not(".active")';
  }

  $(this).siblings(selector).each(function() {
    $(this).click();
  });

  $('span', this).contents().last()[0].textContent = $(this).text().trim() === 'Check All' ? 'Uncheck All' : 'Check All';
  // Check values of selected options
  console.log($(this).parent().next().val());
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>


With "select-all" option
<div class="input-field col s5">
  <select multiple select-all searchable="search here..">
    <option value="0">Check All</option>
    <option value="1">Yellow</option>
    <option value="2">Green</option>
    <option value="3">Pink</option>
    <option value="4">Orange</option>
  </select>
  <label>Materialize Multiple Select</label>
</div>


<br />
Without "Select All" option
<div class="input-field col s5">
  <select multiple searchable="Animals">
    <option value="0">Cat</option>
    <option value="1">Dog</option>
    <option value="2">Horse</option>
    <option value="3">Pig</option>
    <option value="4">Lion</option>
  </select>
  <label>Materialize Multiple Select</label>
</div>

实现 select 多个 "Check/Uncheck All" 事件

Materialize select muliple "Check/Uncheck All" event

javascript

jquery

multi-select

angularjs