JQuery 实现checkbox与radio级联

最终效果：点击checkbox，radio中动态显示选中的checkbox选项，并默认选中第一项。checkbox没选择是提示并默认选中第一项。

1. checkbox 部分代码。

<div id="jddis" style="display:block;">	
   视图阶段	
	<input type="checkbox" checked="true" name="phasefilters" value="csm" id="csmcheckbox">现状 
	<input type="checkbox" checked="true" name="phasefilters" value="dm" id="dmcheckbox">需求 
	<input type="checkbox" checked="true" name="phasefilters" value="rp" id="rpcheckbox">规划
</div>

2.radio 部分代码

<div id="bianjishitujieduan" style="display:block;"></div>

此处由JS来动态生成radio代码。

3.checkbox添加事件

$("#csmcheckbox").click(edit_cycleRadio);

$("#dmcheckbox").click(edit_cycleRadio);

$("#rpcheckbox").click(edit_cycleRadio);

4.JS 部分代码

	function edit_cycleRadio(){
   		var edit_html="";// 编辑区使用
   		var eflag = 0;
   		$("input[name='phasefilters']:checked").each(function(){
   			var filter = $(this).val();
   		 if(filter=='csm'){
   			 if(eflag == 0){
   				edit_html = edit_html + "<input type='radio' name='editCycleRadio' value='edit_csm' checked>现状	";
   				eflag++ ;
   			 }else{
   				edit_html = edit_html + "<input type='radio' name='editCycleRadio' value='edit_csm' >现状	"; 
   			 }
   			
		 }else if(filter=='dm'){
			 if(eflag == 0){
				 edit_html = edit_html + "<input type='radio' name='editCycleRadio' value='edit_dm' checked>需求";	
					eflag++ ;
			 }else{
				 edit_html = edit_html + "<input type='radio' name='editCycleRadio' value='edit_dm'>需求";	
			 }
			
		 }else if(filter=='rp'){
			 if(eflag == 0){
				 edit_html = edit_html + "<input type='radio' name='editCycleRadio' value='edit_rp' checked>规划";	
					eflag++ ;
			 }else{
				 edit_html = edit_html + "<input type='radio' name='editCycleRadio' value='edit_rp'>规划";	
			 }
		 }
   		});
   		if(eflag == 0){
   			alert("至少选择一个视图！");
   			edit_html = edit_html + "<input type='radio' name='editCycleRadio' value='edit_csm' checked>现状	";
   			document.getElementById("csmcheckbox").checked = true;
   		}
   	 $('#bianjishitujieduan').html(edit_html);
   	
   	}

截图：