Layui 테이블 체크박스 모두 선택 스타일 및 기능 예시 선택

아래에서는 레이의 테이블 체크박스의 모든 스타일과 기능을 선택하는 예를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

이전 버전에서는 기본 체크박스에 값이 있어야 합니다. 기본값은 "check"라는 단어입니다. 양식에서 선택하는 데 적합하지 않으며 변경이 어렵습니다. 다행히 Layui가 업그레이드된 후에는 지원할 수 있습니다. 테이블의 선택 작업에 ​​맞게 이름 값을 쓰지 않습니다.

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(&#39;checkbox(allChoose)&#39;, function(data){
		 var child = $(data.elem).parents(&#39;table&#39;).find(&#39;tbody input[type="checkbox"]&#39;);
		 child.each(function(index, item){
		  item.checked = data.elem.checked;
		 });
		 form.render(&#39;checkbox&#39;);
		});
	</script>

2 버전은 v1.0.9 rls 이며 이전 버전은 여러 업데이트가 필요합니다. files

(a)layuilaydest의layui.all.js 파일

(b)layuilaymodules의 form.js 파일

(c)layuicss의layui.css파일

최신 버전에서 위 세 파일을 덮어씁니다. 원래 버전으로 돌아가면 체크박스 스타일을 쉽게 구현할 수 있습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vuex의 간단한 사용에 대한 자세한 설명

Vue 모바일 UI 프레임워크 슬라이딩 로딩 방식의 데이터

Vue 라우팅 지연 로딩 구현 방식

위 내용은 Layui 테이블 체크박스 모두 선택 스타일 및 기능 예시 선택의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!