效果:
 1 <style type="text/css">
 2                     #t>div{padding:16px;}
 3                     #t dl{margin:16px 0;}
 4                     #t dt{padding:16px 16px 16px 0;color:#999;}
 5                     #t dd{display:inline;margin:16px;}  /*不要这句竖着排*/
 6                 </style>
 7                 <div class="controls" id="t">
 8                 </div>
 9                 <script type="text/javascript">
10 var types_ = ["凉", "寒", "平", "热", "温", "酸", "淡", "咸", "涩", "苦", "甘", "辛"];
11 var types = ["凉", "寒", "平", "热", "温", "酸", "淡", "咸", "涩", "苦", "甘", "辛"];
12 for(i=0,h+="</div><dl><dt>性味　<input type=\"checkbox\" onchange=\"oc(this);\" /> 全选</dt></dt>";i<types.length;i++)
13    {
14     h+='<dd><input type="checkbox" name="xw[]" value="'+i+'" ';
15     if(1<<i&types_)h+="checked ";h+='/> '+types[i]+"</dd>"
16    }
17 /*{h += '<dd><input type="checkbox" name="xw[]" value="' + i + '" /> ' + types[i] + "</dd>";}*/
18 function oc(el){
19     b = el.checked;el=el.parentNode.parentNode.getElementsByTagName("input");
20     for(i=1;i<el.length;i++)el[i].checked=b;
21    }
22 t.innerHTML=h+"</dl>";
23 </script>
网页显示(html,js)

 

1 if(isset($_POST['xw'])&&is_array($_POST['xw']))
2             {
3                 $_POST['belong']=0;
4                 for($i=0;$i<count($_POST['xw']);$i++)
5                     $_POST['belong']|=1<<$_POST['xw'][$i];
6                 unset($_POST['xw']);
7             }
接收数据