新版本1.4.2发布了。第一次升级到 1.4.x 版本请注意在1.4.0版本的重大变动,具体请阅读更新日志

开发者文档

这是js重写的选框组件,兼容ie8+。但是使用此组件必须引入sui.js。此组件内部依然通过原生的checkbox和radio来实现,所以不会影响原生的表单操作。
注意,在使用此组件的时候,如果要通过JS修改状态,最好不要通过直接修改input的方式来操作,而是通过checkbox api来调用。

  • 更新 v1.4.2: 增加了readonly状态。
  • 更新 v1.1.6: 修复了checkbox可能导致页面滚动的bug。

通过data-api使用

在初始化的时候同时设置好input的属性和label的class,否则在js加载之后可能会闪一下或者会出现状态不一致。
半选和未选中的值是一样的,只是样式不同而已。

复选框

单选框

半选

禁用

只读

因为checkbox是不支持readonly状态的,所以通过将label改为span来实现让用户无法操作

只读 只读
  1. <form class="sui-form">
  2. <h3>复选框</h3>
  3. <label class="checkbox-pretty inline checked">
  4. <input type="checkbox" checked="checked"><span>鸣人</span>
  5. </label>
  6. <label class="checkbox-pretty inline">
  7. <input type="checkbox"><span>佐助</span>
  8. </label>
  9. <label class="checkbox-pretty inline">
  10. <input type="checkbox"><span>我爱罗</span>
  11. </label>
  12. <h3>单选框</h3>
  13. <label class="radio-pretty inline checked">
  14. <input type="radio" checked="checked" name="radio"><span>服装</span>
  15. </label>
  16. <label class="radio-pretty inline">
  17. <input type="radio" name="radio"><span>电器</span>
  18. </label>
  19. <label class="radio-pretty inline">
  20. <input type="radio" name="radio"><span>美食</span>
  21. </label>
  22. <h3>半选</h3>
  23. <label class="checkbox-pretty inline halfchecked">
  24. <input type="checkbox"><span>半选</span>
  25. </label>
  26. <h3>禁用</h3>
  27. <label class="checkbox-pretty inline checked disabled">
  28. <input type="checkbox" checked="checked" disabled=""><span>不可选</span>
  29. </label>
  30. <label class="radio-pretty inline checked disabled">
  31. <input type="radio" checked="checked" disabled=""><span>不可选</span>
  32. </label>
  33. <h3>只读</h3>
  34. <p>因为checkbox是不支持readonly状态的,所以通过将label改为span来实现让用户无法操作</p><span class="checkbox-pretty inline checked readonly">
  35. <input type="checkbox" checked="checked"><span>只读</span></span><span class="radio-pretty inline checked readonly">
  36. <input type="radio" checked="checked"><span>只读</span></span>
  37. </form>

通过JS调用

复选框

  1. <form class="sui-form">
  2. <h3>复选框</h3>
  3. <label id="checkbox2" class="checkbox-pretty inline checked">
  4. <input type="checkbox" checked="checked"><span>选项一</span>
  5. </label>
  6. <div style="display:block;margin-top: 15px;" class="op sui-btn-group"><a name="check" href="javascript:void(0);" class="sui-btn btn-primary">选中</a><a name="uncheck" href="javascript:void(0);" class="sui-btn btn-primary">取消</a><a name="halfcheck" href="javascript:void(0);" class="sui-btn btn-primary">半选</a><a name="toggle" href="javascript:void(0);" class="sui-btn btn-primary">toggle</a><a name="disable" href="javascript:void(0);" class="sui-btn btn-primary">disable</a><a name="enable" href="javascript:void(0);" class="sui-btn btn-primary">enable</a></div>
  7. </form>
  8. <script>
  9. var $checkbox = $("#checkbox2").checkbox()
  10. $(".op").on("click", "a", function(e){
  11. var $a = $(e.currentTarget);
  12. $checkbox.checkbox($a.attr("name"))
  13. })
  14. </script>
  • 要把checkbox当做一个组件来用,最好不要通过js直接修改input的属性,要通过checkbox api来调用。
  • 禁用状态会禁止用户的操作,但是不会禁止通过api来修改状态。
  • 半选状态其实就是未选中,所以不会向后台提交。
方法 说明
check 选中
uncheck 取消选中
halfcheck 半选
disable 禁用
enable 启用