jquery 现实多状态控件 (status & power(2,0)) = power(2,0)

数据库表设计的时候，会有很些多状态的需求，比如招聘职位需要同时发布到武汉，广州，上海

实现方法有很多种，我选择了在职位表中建一个 int 型字段保存多种状态，这个涉及到一些算法，我要查询武汉和广州的职位的sql语句大概是这样：

select * from 职位表
where 1 = 1
and (status & power(2,3)) = power(2,3) --武汉
and (status & power(2,1)) = power(2,1) --广州

以下为相应的控件

<p><input type="text" multi_status="赛程,积分榜,射手榜,盘路,新闻" /></p>
<p><input type="text" multi_status="上海,广州,北京,武汉" /></p>
<p><input type="text" multi_status="审核,推荐,付款,删除" /></p>

<script type="text/javascript" src="http://120.27.139.230:3000/distadmin/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script type="text/javascript">
var multi_status_count = 0;
$('input[multi_status]').each(function(index, el) {
    el = $(el);
    var status = el.attr('multi_status').split(',');
    var val = el.val();
    if (isNaN(parseInt(val, 10))) el.val(val = 0);
    for (var a = 0; a < status.length; a++) {
        var chkid = 'multi_status_checkbox_' + multi_status_count++;
        var chk = $('<input type="checkbox" id="' + chkid + '"' +
            ((val & Math.pow(2, a)) == Math.pow(2, a) ? ' checked' : '') +
            ' onclick=""/><label for="' + chkid + '">' + status[a] + '</label>');
        el.before(chk);
        (function(a) {
            $('#' + chkid).click(function() {
                el.val(val = parseInt(val, 10) + (this.checked ? 1 : -1) * Math.pow(2, a));
            });
        })(a);
    }
    //if (status.length) el.hide();
});
</script>