1、首先我们新建一个空白文档,在文档上方写上“年龄选择”几个字,如图所示:
![[AS3编程教学]Flash组件之单选按钮CheckBox使用](https://exp-picture.cdn.bcebos.com/87c8bf46b7b1eef9dd2f8ccfbfb33c4132ba322a.jpg)
2、其次我们按下Ctrl+F7,打开组件面板,拖一个CheckBox控件到库里:
![[AS3编程教学]Flash组件之单选按钮CheckBox使用](https://exp-picture.cdn.bcebos.com/3d002dbad341037d48a509c5a9bc7dc5ce672d2a.jpg)
3、新建一个文档类TextCheckBox.as,我们输入以下代码,旨在先动态创建我们需要数量的单选组件在舞台上。package{i罪焐芡拂mport flash.display.Sprite;import fl.controls.CheckBox;/*** CheckBox组件测试使用* @author Tiger* 2012/3/16 15:05*/public class TextCheckBox extends Sprite{private var ageList:Array = ["小于18岁", "18岁至28岁", "29岁至39岁", "40岁至50岁","50岁至60岁", "60岁以上"];private var checkList:Array = [];public function TextCheckBox(){createCheckList();}private function createCheckList():void{var len:int = ageList.length;for (var i:int = 0; i < len; i++){var mCB:CheckBox = new CheckBox ();mCB.label = ageList[i];mCB.x = 210mCB.y = 80 + i * (mCB.height + 10);this.addChild(mCB);checkList[i] = mCB;}}}}
![[AS3编程教学]Flash组件之单选按钮CheckBox使用](https://exp-picture.cdn.bcebos.com/7c84d1672b5fd546b50478a77fd0b503c9d2242a.jpg)
4、写完这段函数并将文档类关联到文件属性面板上,发布测试,你便会发现舞台上已经有了几个显示年龄的控件,只是这个时候控件是可以多选的:
![[AS3编程教学]Flash组件之单选按钮CheckBox使用](https://exp-picture.cdn.bcebos.com/f591ab03c8d246fef1dc0230b8bf3bef344f1e2a.jpg)
5、一个人的年龄只可能满足上面的某一个条件,不可能同时满足,所以说我们要给这些组件添加选中事件处理,选中某一个时,同时取消别的被选项目,继续晚上创建函数如下:private function createCheckList():void{var len:int = ageList.length;for (var i:int = 0; i < len; i++){var mCB:CheckBox = new CheckBox ();mCB.label = ageList[i];mCB.x = 210mCB.y = 80 + i * (mCB.height + 10);mCB.addEventListener(Event.CHANGE, selectCBHandler);this.addChild(mCB);checkList[i] = mCB;}}private function selectCBHandler(e:Event):void{var mCB:CheckBox = e.target as CheckBox;var len:int = checkList.length;for (var i:int = 0; i < len; i++){if (checkList[i] == mCB) continue;checkList[i].selected = false;}}
![[AS3编程教学]Flash组件之单选按钮CheckBox使用](https://exp-picture.cdn.bcebos.com/3aae2b4f50b8b43e154997f97132939c2df7192a.jpg)
6、再次发布测试,此时我们可以实现单选了。
![[AS3编程教学]Flash组件之单选按钮CheckBox使用](https://exp-picture.cdn.bcebos.com/92dd32f7dfb2dc190abe9ba895def4dca139102a.jpg)
7、现在的问题是,我们单选了某个年龄,但是没有任何地方显示出来单选的内容提示,同时单选按钮鼠标移上去没有鼠标手出现,而且单选按钮的文字太小,看不大清除...所以我们继续把代码完善到如下所示://创建单选按钮private function createCheckList():void{var len:int = ageList.length;for (var i:int = 0; i < len; i++){var mCB:CheckBox = new CheckBox ();mCB.label = ageList[i];mCB.x = 210mCB.y = 80 + i * (mCB.height + 10);mCB.setSize(120, 25);mCB.useHandCursor = true;mCB.addEventListener(Event.CHANGE, selectCBHandler);setFormat(mCB);this.addChild(mCB);checkList[i] = mCB;}}//设置外观private function initParms():void{mForMat = new TextFormat();mForMat.align = TextFieldAutoSize.CENTER;mForMat.font = "微软雅黑";mForMat.size = 14;txtInfo = new TextField();txtInfo.x = 150;txtInfo.y = 300;txtInfo.autoSize = TextFieldAutoSize.LEFT;this.addChild(txtInfo);}private function setFormat(cb:CheckBox):void{cb.setStyle("textFormat", mForMat);}//处理点击事件private function selectCBHandler(e:Event):void{var mCB:CheckBox = e.target as CheckBox;var len:int = checkList.length;for (var i:int = 0; i < len; i++){if (checkList[i] == mCB) continue;checkList[i].selected = false;}txtInfo.text = "我的年龄:" + mCB.label;}
![[AS3编程教学]Flash组件之单选按钮CheckBox使用](https://exp-picture.cdn.bcebos.com/1f9feadca039131f047e136ae275f2c4ed990a2a.jpg)
8、现在发布测试,我们希望的功能全部有了,一个Flash控件做的年龄选择功能就完成了。
![[AS3编程教学]Flash组件之单选按钮CheckBox使用](https://exp-picture.cdn.bcebos.com/6834ecc4ec995943d493884d95425d6b05d1042a.jpg)