雖然判斷式一行一行寫不是難事，但卻稍嫌累贅，所以花了些時間想瞭解 jQuery 是否可以處理的更漂亮。於是找到了一個可行的方法，並將他記錄下來！
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function CheckNeedOne()
{
var msg='有值的共有：'+$(".data").filter(function(index){ if($(this).val()=='') return false; return true; }).size();
if($(".data").filter(function(index){ if($(this).val()=='') return false; return true; }).size()==0)
{
alert(msg+'\n至少要填一項！');
return false;
}
alert(msg);
return true;
}
</script>
</head>
<body>
<input type="text" id="tbx01" class="data"><br>
<input type="text" id="tbx02" class="data"><br>
<input type="text" id="tbx03" class="data"><br>
<input type="text" id="tbx04" class="data"><br>
<input type="text" id="tbx05" class="data"><br>
<input type="button" value="Send" onclick="return CheckNeedOne();">
</body>
</html>
執行結果：
主要是使用了 jQuery 所提供的 filter(function(index) ) 方法。原先的 $(".data")，讓我取得了5個輸入方塊，再透過 filter( ) 來過濾我所需要的資料。只是這次所要過濾的規則，希望是透過自己所定的規則，判斷輸入方塊是否有值，也就是待會要寫在 function(index) 裡的程式。
在 function(index) 裡，如果目前所檢查的輸入方塊有值，就回傳 true ，反之，則回傳 false。所以就寫成：
if($(this).val()=='') return false; return true;
所以，符合 filter(function(index)) 的結果，都是有資料的輸入方塊，最後再透過 .size() 來取得符合的數目，用它來判斷是否大於0，如果沒有的話，就會跳出警告訊息。
$(".data").filter(function(index){ if($(this).val()=='') return false; return true; }).size()
希望自己下次再看到這填寫歷任女友的需求時，還會找到更簡潔的作法。
沒有留言:
張貼留言