前端的常见事件

1.给指定类型的radio绑定事件(例如)
	$("input:radio[name='type']").on('ifChecked', function(event){
       var value = $(this).val();
        if (value == '2') {
            $("#link").show();
        } else{
            $("#link").hide();
        }
	 });

2.获取选中的下拉框文本,值,索引
    var text = $("#selectId").find("option:selected").text().replace(/^\s+|\s+$/g,"");//选中的文本
 	var value = $('#selectId  option:selected') .val();//选中的值
	var index = $("#selectId").get(0).selectedIndex;//索引

3.下拉框事件
	var options = $("#selectId").find("option"); //获取select下拉框的所有值

4.获取指定类型的单选框值
	var value=  $('input[name="type"]:checked').val(); 

5.模板渲染下拉框
   /**
	 * 模板解析器
	 * @param html
	 * @param options
	 * @returns
	 */
	function templateEngine(html, options) {
	    var re = /<!([^!>]+)?!>/g,
	        reExp = /(^( )?(if|for|else|switch|case|formatDate|break|{|}))(.*)?/g,
	        code = 'var r=[];\n',
	        cursor = 0;
	    var add = function(line, js) {
	        js ? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n') :
	            (code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
	        return add;
	    }
	    while (match = re.exec(html)) {
	        add(html.slice(cursor, match.index))(match[1], true);
	        cursor = match.index + match[0].length;
	    }
	    add(html.substr(cursor, html.length - cursor));
	    code += 'return r.join("");';
	    return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);
	}

	/**
	 * 更新chosen数据
	 * @param id
	 */
	function updateChosen(id){
		$("#"+id).trigger("chosen:updated");
	}

 使用案例:
	<div class="form-group">
       <label class="col-sm-3 control-label">所属应用系统：</label>
        <div class="col-sm-6">
            <select class="form-control chosen-select" multiple name="systemId" id="systemId" 
             data-placeholder="请选择所属应用系统" >
            </select>
        </div>
    </div>

 	// 1. 先定义一个下拉框模板
 	<script type="text/template" id="system">
	    <! for (index in this){ !>
	    <option value="<!this[index].systemId!>" hassubinfo="true"><!this[index].systemName!></option>
	    <! } !>
	</script>
	
    // 2. 调用模板解析器,封装渲染指定的下拉框
     updateSystem:function () {
     	 //前面的id是你需要渲染的下拉框id,后面的id是你定义的下拉框模板id
         $('#systemId').html(templateEngine($("#system").html(), systems));
         //此方法非常重要:就是将你指定的下拉框进行数据渲染
         updateChosen(systemId);
     },