이 글은 주로 Layui 테이블 체크박스의 모든 스타일과 기능을 선택하는 예를 공유합니다. 이전 버전에서는 기본 체크박스에 값이 있어야 하는데, 기본값은 "check" 입니다. 양식에서 선택하는 데 적합하지 않으며 변경이 어렵습니다. 다행히 Layui가 업그레이드된 후에는 이름을 쓰지 않도록 지원할 수 있습니다. value. , 테이블의 선택 작업에 적용됩니다.
1.layui 버전은 v1.0.9 rls 버전입니다(현재 최신 버전)
<span style="white-space:pre;"> </span><p class="layui-form"> <table class="layui-table"> <thead> <tr> <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th> <th>人物</th> <th>民族</th> <th>出场时间</th> <th>格言</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="" lay-skin="primary"></td> <td>贤心</td> <td>汉族</td> <td>1989-10-14</td> <td>人生似修行</td> </tr> <tr> <td><input type="checkbox" name="" lay-skin="primary"></td> <td>张爱玲</td> <td>汉族</td> <td>1920-09-30</td> <td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td> </tr> </tbody> </table> </p> <script type="text/javascript" src="plugins/layui/lay/dest/layui.all.js"></script> <script type="text/javascript"> var $ = layui.jquery, form = layui.form(); //全选 form.on('checkbox(allChoose)', function(data){ var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]'); child.each(function(index, item){ item.checked = data.elem.checked; }); form.render('checkbox'); }); </script>
2. rls 이전 버전은 여러 파일을 업데이트해야 합니다
(a). all inlayuilaydest .js 파일
(b)layuilaymodules의 form.js 파일
(c)layuicss의layui.css 파일
위 3개 파일을 최신 버전에서 원본 버전으로 덮어쓰면 체크박스를 쉽게 구현할 수 있습니다. 스타일.
관련 권장사항:
checkBox 라디오 선택 효과 예제 코드의 JS 구현
테이블의 두 열 CheckBox 중 하나만 선택할 수 있는 jQuery 코드
HTML 스타일을 아름답게 만드는 방법 체크박스와 라디오
위 내용은 Layui 테이블 체크박스의 예제 코드는 모든 스타일 기능을 선택합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!