jq遍历input(type='text'),并实时监听文本框内容是否为空及全选反选

一.如下图,监听四个文本框,输入任意三项即可进行查询,否则无法进行查询操作

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<input type="text" name="" value="a"/>
<input type="text" name="" value="b"/>
<input type="text" name="" value="c"/>
<input type="text" name="" value=""/>
<input type="button" class="find" value="查询"/>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		bl();
	})
	function bl(){
		$count= 0;
		$("input[type='text']").each(function(i,v){
		
			if($(this).val()==''){
				$count++;
			}
		});
		alert($count);
		if($count>1){
			$('.find').attr('disabled', true);
		}else if($count==0 || $count ==1){
			$('.find').attr('disabled', false);
		}
	}

	$("input[type='text']").change(function(){
		bl();
	})
	
</script>
</html>

二.全选反选

    $(function() {
        //实现全选反选
        $("#theadInp").on('click', function() {
            $("tbody input:checkbox").prop("checked", $(this).prop('checked'));
        })
        $("tbody input:checkbox").on('click', function() {
            //当选中的长度等于checkbox的长度的时候,就让控制全选反选的checkbox设置为选中,否则就为未选中
            if($("tbody input:checkbox").length === $("tbody input:checked").length) {
                $("#theadInp").prop("checked", true);
            } else {
                $("#theadInp").prop("checked", false);
            }
        })
    })
<table id="realTime_Table" class="table table-hover" style="min-width: 100%;">
						<tr>
							<th>
								<input type="checkbox" id="theadInp" />
							</th>
							<th>id</th>
							<th>标题</th>
							<th>价格(MAT)</th>
							<th>行业</th>
							<th>适用场景</th>
							<th>类型</th>
							<th>介绍</th>
							<th>操作</th>
						</tr>
						<tr>
							<td><input type="checkbox" /></td>
							<td>11</td>
							<td>【满意为止】logo设计原创商标设计公司企业品牌标志店标VI字体图标</td>
							<td>100.000000</td>
							<td>餐饮行业</td>
							<td>企业/协会 产品/品牌 门店</td>
							
							<td>图形LOGO 图文LOGO 卡通LOGO</td>
							<td>服务简介服务简介服务简介服务简介</td>
							<td>
								<a href="">修改</a> |
								<a href="#" id="del">删除</a>
							</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td>
							<td>11</td>
							<td>【满意为止】logo设计原创商标设计公司企业品牌标志店标VI字体图标</td>
							<td>100.000000</td>
							<td>餐饮行业</td>
							<td>企业/协会 产品/品牌 门店</td>
							
							<td>图形LOGO 图文LOGO 卡通LOGO</td>
							<td>服务简介服务简介服务简介服务简介</td>
							<td>
								<a href="">修改</a> |
								<a href="#" id="del">删除</a>
							</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td>
							<td>11</td>
							<td>【满意为止】logo设计原创商标设计公司企业品牌标志店标VI字体图标</td>
							<td>100.000000</td>
							<td>餐饮行业</td>
							<td>企业/协会 产品/品牌 门店</td>
							
							<td>图形LOGO 图文LOGO 卡通LOGO</td>
							<td>服务简介服务简介服务简介服务简介</td>
							<td>
								<a href="">修改</a> |
								<a href="#" id="del">删除</a>
							</td>
						</tr>
					</table>

效果如下:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章