补充layui的复选框必选一项或若干项，不选中或者点击提交都可提示错误信息

关于bootstrap的复选框必选若干项以及提示，请看这里

头文件

<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>

html

<form class="layui-form" action=""><div class="layui-form-item" pane><label class="layui-form-label">复选框</label><div class="layui-input-block"><input type="checkbox" name="like[write]" title="写作" lay-filter="choiceOne" name="param[]" lay-verify="required"><input type="checkbox" name="like[read]" title="阅读" lay-filter="choiceOne" name="param[]" lay-verify="required"><input type="checkbox" name="like[dai]" title="发呆" lay-filter="choiceOne" name="param[]" lay-verify="required"></div></div><div class="layui-form-item" pane><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form>

<script>layui.use('form', function () {var form = layui.form;// 复选框form.on('checkbox(choiceOne)', function (data) {console.debug(data);var len = $("input:checked").length;if (len < 1) {$(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");$(data.elem).prop("checked", false);layer.msg('请至少选择一项！', { icon: 5 });return false;}});//监听提交form.on('submit(formDemo)', function (data) {var len = $("input:checked").length;if (len < 1) {layer.msg('请至少选择一项！', { icon: 2 });}return false;});});</script>

点击提交时

先选中一项再取消

补充layui的复选框必选一项或若干项，不选中或者点击提交都可提示错误信息相关推荐

Jquery 复选框全选与反选点击执行一次然后失效解决方案
Jquery 复选框全选与反选点击执行一次然后失效解决方案参考文章: (1)Jquery 复选框全选与反选点击执行一次然后失效解决方案 (2)https://www.cnblogs.com/feng ...
复选框全选效果，根据单个复选框的选择情况确定全选复选框是否被选
复选框全选与全不选效果逻辑:复选框的checked属性与复选框全选效果对应起来,全选复选框checked:true 时,全部复选框checked:true: 全选框checked:false 时,全 ...
JS 原生实现复选框全选反选功能
** JS 原生实现复选框全选反选功能 ** 按钮功能实现思路: 全选按钮: 直接将全选按钮的状态赋值给每一个复选框. 复选框:只有当所有的复选框选中时,全选按钮才能选中,所以每当复选框每点击一次就 ...
jQuery中的几个案例：隔行变色、复选框全选和全不选
1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...
自制jQuery 复选框全选与反选插件
(function ($) { //复选框全选 $.fn.checkAll = function (options) { var defaults = { chName:"checkName ...
DevExpress XtraGrid RepositoryItemCheckEdit 复选框多选的解决方法（转）
DevExpress XtraGrid RepositoryItemCheckEdit 复选框多选的解决方法(转) 参考文章: (1)DevExpress XtraGrid RepositoryIte ...
复选框全选以及获取所有选中的值
复选框全选以及获取所有选中的值总结一下 jsp中获取数据 <%Map<String,List> map = (Map<String,List>)Function ...
input单选框复选框点选不上选不中
今天在项目中遇到了一个问题,问题是什么呢? 就是:input单选框.复选框点选不上问题.选不中问题? input单选框.复选框点选不上问题.选不中问题的效果图如下: 解决 input单选框.复选 ...
java 模板生成PDF文件复选框勾选
java 模板生成PDF文件复选框勾选 // pdf填充时要有第三个参数s.setField("A", On, true);

补充layui的复选框必选一项或若干项，不选中或者点击提交都可提示错误信息

补充layui的复选框必选一项或若干项，不选中或者点击提交都可提示错误信息相关推荐

最新文章

热门文章