js 当在文本框中输入文字时对应的多选项同时勾选中

最新推荐文章于 2021-12-14 14:42:41 发布

我是高手高手高高手

最新推荐文章于 2021-12-14 14:42:41 发布

阅读量1.2k

点赞数

分类专栏： jQuery JS技巧

本文链接：https://blog.csdn.net/haibo0668/article/details/79763753

版权

JS技巧同时被 2 个专栏收录

244 篇文章 3 订阅

订阅专栏

jQuery

128 篇文章 1 订阅

订阅专栏

一、常规用法，输入文字自动勾上

<!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');
?>