一、常规用法，输入文字自动勾上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<div><input type="checkbox"><input type="text"></div>
<div><input type="checkbox"><input type="text"></div>
<div><input type="checkbox"><input type="text"></div>
</body>
<script>
$("input").on("input",function(){
if($(this).val()!=''){
$(this).prev().attr("checked",true);
}else{
$(this).prev().attr("checked",false);
}
})
</script>
</html>
二、增强用法 输入文字自动勾上，删除内容自己取消勾上
<!--<?php
defined('IN_MET') or exit('No permission');
//require $this->template('ui/head');
echo <<<EOT
-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>排课</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="{$_M['url']['pub']}layui/layui.js"></script>
<link rel="stylesheet" href="{$_M['url']['pub']}layui/css/layui.css">
<script type="text/javascript">
添加一行、删除一行封装方法///
/**
* 为table指定行添加一行
*
* tab 表id
* row 行数，如：0->第一行 1->第二行 -2->倒数第二行 -1->最后一行
* trHtml 添加行的html代码
*
*/
function addTr(tab, row, trHtml,tbResponse){
//获取table最后一行 $("#tab tr:last")
//获取table第一行 $("#tab tr").eq(0)
//获取table倒数第二行 $("#tab tr").eq(-2)
// var $tr=$("#"+tab+" tr").eq(row);
//var $tr=$("#tab tr").eq(row);
var tr=$("#tab"+tbResponse+" tbody").eq(row);
if(tr.size()==0){
alert("指定的table id或行数不存在！");
return;
}
tr.before(trHtml);
}
function delTr(ckb){
//获取选中的复选框，然后循环遍历删除
var ckbs=$("input[name="+ckb+"]:checked");
if(ckbs.size()==0){
alert("要删除指定行，需选中要删除的行！");
return;
}
ckbs.each(function(){
$(this).parent().parent().remove();
});
}
/**
* 全选
*
* allCkb 全选复选框的id
* items 复选框的name
*/
function allCheck(allCkb, items){
$("#"+allCkb).click(function(){
$('[name='+items+']:checkbox').attr("checked", this.checked );
});
}
添加一行、删除一行测试方法///
$(function(){
//全选
allCheck("allCkb", "ckb");
});
function addTr2(tab, row,tbResponse){
var trHtml="<tr align='center'><td><input type='hidden' name='u_id[]' value='a'><input type='checkbox' name='ckb' title='写作' lay-skin='primary' ></td><td><input type='text' name='s1[]' class='ui-input met-center' style='width:100%;' value='' placeholder='标题'></td><td><input type='text' name='s2[]' class='ui-input met-center' style='width:100%;' value='' placeholder='开始时间'></td><td><input type='text' name='s2[]' class='ui-input met-center' style='width:100%;' value='' placeholder='课时'></td></tr>";
addTr(tab, row, trHtml,tbResponse);
}
function delTr2(){
delTr('ckb');
}
</script>
</head>
<body style="margin: 20px;">
<fieldset class="layui-elem-field">
<legend>增加/修改章节</legend>
<div class="layui-field-box">
<form class="layui-form layui-form-pane" action="{$_M[url][own_form]}a=do_class_course_save&pid={$_M['form']['pid']}&cid={$_M['form']['cid']}&id={$_M['form']['id']}" method="post">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">标题</label>
<div class="layui-input-inline">
<input name="title" lay-verify="title|required" autocomplete="off" placeholder="请输入章节标题" class="layui-input" type="text" value="{$c_rs['title']}">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">排序</label>
<div class="layui-input-inline">
<input name="no_order" lay-verify="required|number" autocomplete="off" placeholder="请输入数字" class="layui-input" type="text" value="{$c_rs['no_order']}">
</div>
<div class="layui-form-mid layui-word-aux">越大越前</div>
</div>
<div class="layui-inline">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
</div>
</div>
</form>
</div>
</fieldset>
<form action="{$_M[url][own_form]}a=do_class_course_save&pid={$_M['form']['pid']}&cid={$_M['form']['cid']}&id={$_M['form']['id']}" method="post">
<div class="layui-collapse">
<!--
EOT;
$rs=DB::get_all("SELECT id,title,no_order FROM ".$_M['table']['my_live_course']." WHERE classtype=1 and pid='$pid' and class_id='$cid' ORDER BY no_order desc,id desc");
foreach($rs as $key => $val){
echo <<<EOT
-->
<div class="layui-colla-item">
<h2 class="layui-colla-title">{$val['title']} <button class="layui-btn layui-btn-primary layui-btn-xs">排序{$val['no_order']}</button><a href="{$_M[url][own_form]}a=do_class_course&pid={$_M['form']['pid']}&cid={$_M['form']['cid']}&id={$val['id']}" class="layui-btn layui-btn-normal layui-btn-xs">修改</a> </h2>
<div class="layui-colla-content layui-show">
<a href='javascript:;' οnclick="addTr2('tab', -1,{$val['id']})" class="layui-btn layui-btn-sm"><i class='fa fa-plus-circle'></i>添加直播</a><input name="submit" type="button" value="删除直播" class="layui-btn layui-btn-sm layui-btn-danger" style="margin-right:20px;" οnclick="delTr2()">
<table class="layui-table" id="tab{$val['id']}">
<colgroup>
<col width="90">
<col >
<col width="300">
<col width="100">
</colgroup>
<thead>
<tr>
<th><input lay-skin="primary" type="checkbox" id="quanxuan{$val['id']}" value="{$val['id']}" οnclick="isQuanxuan({$val['id']})">全选</th>
<th>标题</th>
<th>开始时间</th>
<th>课时</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<!--
EOT;
}
echo <<<EOT
-->
</div>
</form>
<script>
//点击全选
// var qx=false;
function isQuanxuan(qxNum){
var qx=$("#quanxuan"+qxNum).prop("checked");
console.log(qx)
if(qx){
$("#tab"+qxNum+" input[type='checkbox']").each(function(){
$(this).prop("checked",true);
})
//qx=false;
}else{
$("#tab"+qxNum+" input[type='checkbox']").each(function(){
$(this).prop("checked",false);
})
//qx=true;
}
}
$(document).on("blur","input",function(){
if($(this).val()!=''){
$(this).parents("tr").children("td").first().children().eq(1).attr("checked",true);
}else{
$(this).parents("tr").children("td").first().children().eq(1).attr("checked",false);
}
})
</script>
<script>
//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
layui.use(['layer', 'form','element', 'laydate'], function(){
var element = layui.element,
$ = layui.jquery,
laydate = layui.laydate,
form = layui.form,
layer = layui.layer;
//日期
laydate.render({
elem: '#starttime'
,type: 'datetime'
});
<!--
EOT;
if($turnovertext){
echo <<<EOT
-->
layer.msg('{$turnovertext}');
<!--
EOT;
}
echo <<<EOT
-->
});
</script>
</body>
</html>
<!--
EOT;
//require $this->template('ui/foot');
?>
