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>

效果如下:

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