jquery移动端多选组件

随着移动端的普及，越来越多的网站和应用需要适配移动设备，而移动端多选组件成为了必要的功能之一。而基于jQuery的移动端多选组件也成为了开发者的选择。

<div class="select-multiple">
  <span class="title">选择爱好</span>
  <div class="options">
    <label>
      <input type="checkbox" name="option" value="1"> 阅读
    </label>
    <label>
      <input type="checkbox" name="option" value="2"> 摄影
    </label>
    <label>
      <input type="checkbox" name="option" value="3"> 音乐
    </label>
  </div>
</div>

以上代码展示了一个简单的移动端多选组件，整体包裹在一个class为select-multiple的div中，title为选择爱好，options中展示多个复选框选项。当用户选择复选框时，只需要在JavaScript代码中获取选中的值并进行相应的处理即可。

$('.options input[type="checkbox"]').on('change',function() {
  var options = [];
  $('.options input[type="checkbox"]:checked').each(function() {
    options.push($(this).val());
  });
  console.log(options);
});

以上代码中添加了一个监听复选框change事件的函数，当用户改变复选框的选中状态时会触发该函数，在函数中获取选中的值并将其放入一个数组中，并打印出来。在实际使用中，可以根据情况对数组进行进一步的处理。

使用jQuery实现移动端多选组件可以提高开发效率和用户体验，同时也可以通过样式和动画的控制进行个性化定制。