[Checkbox]善用 or / and 實現多選項目, 資料表欄位不用增加
這不是原創文, 是從專案中學習而來的.
先給sample code
<html>
<head>
<title></title>
<script src="jquery-1.7.1.js"></script>
<script>
$(function(){
$('#my_eval').click(function(){
var sum = 0;
$('input[type="checkbox"]').each(function(){
$cbx = $(this);
if($cbx.attr('checked')){
sum = sum | parseInt($cbx.val())
}
});
$('#txt').val(sum);
});
$('#my_set').click(function(){
var sum = $('#txt').val();
$('input[type="checkbox"]').each(function(){
$cbx = $(this);
var checked = (sum & parseInt($cbx.val()))>0;
$cbx.attr('checked',checked);
});
});
});
</script>
</head>
<body>
<input type="checkbox" id="c_1" name="cb" value="1">
<input type="checkbox" id="c_2" name="cb" value="2">
<input type="checkbox" id="c_4" name="cb" value="4">
<input type="checkbox" id="c_8" name="cb" value="8">
<input type="button" id="my_eval" value="Eval">
<br />
<input type="text" id="txt">
<input type="button" id="my_set" value="Set">
</body>
</html>
畫面中共有4個checkbox, 而資料庫只有設計一個欄位放置使用者的輸入, 此時二進位登場,
每一個checkbox都代表一個二進位的進位位址. 如: 二進位(0 1 0 0) = 十進位(4), 二進位(1 0 0 0) = 十進位(8) ...
然後當我們在送出資料給資料庫儲存時, 只需要把所有被勾選的值 OR 起來, 即為總合, 資料表只要一個欄位存起來就好.
未來就算多幾個選項也沒關係, 都不用擴充資料表欄位.
回到畫面顯示時, 資料表會將總合的值回傳回來, 只需要將每一個checkbox的值拿去做AND, 若之前有被加總過就會是自己的值(或直接判斷>0)
這樣就可以把該勾選的勾起來囉.
當然這也是有些缺點, 因為資料庫在查詢時就必須依賴方法來處理. 如: ORACLE. bitand( express1 , express1)
select bitand(15,2) from dual ;
加上無法使用者索引(Index). 效能會較差.