Layui 테이블 체크박스의 예제 코드는 모든 스타일 기능을 선택합니다.

이 글은 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!