jQuery Mobile教程-中级篇-checkboxradio插件

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

特别申明:本系列教程由小春撰写

本文我们来深度认识一下jQuery Mobile的checkboxradio插件
表单中的radio与checkbox都依赖它进行初始化增强以及一些事件的绑定(disable、enable、checked、unchecked)等

补充:如果你对button还是比较陌生的话,可以查看我们的《基础篇-表单篇》

1、disable(禁用)

示例:

	//禁用
	$("#disable_checkbox").bind('click',function(){
		$("#major_eng").checkboxradio("disable");
	});

2、enable(启用)

示例:

	//启用
	$("#enable_checkbox").bind('click',function(){
		$("#major_eng").checkboxradio("enable");
	});

3、checked(选中)

示例:

	//选中
	$("#checked_checkbox").bind('click',function(){
		$("#major_eng").attr("checked",true).checkboxradio("refresh");
	});

4、unchecked(不选中)

示例:

	//不选中
	$("#unchecked_checkbox").bind('click',function(){
		$("#major_eng").attr("checked",false).checkboxradio("refresh");
	});

5、动态创建

示例:

//动态创建
$("#unchecked_checkbox").bind('click',function(){
	//一次哦
	if($("#dynamic_checkbox_group").length < 1){
		var arr = [
			'<fieldset id="dynamic_checkbox_group" data-role="controlgroup">',
			'<legend>前端基本技术:</legend>',
			'<input type="checkbox" id="fe_js" name="fe" value="1"/><label for="fe_js">js</label>',
			'<input type="checkbox" checked="checked" id="fe_css" name="fe" value="1"/><label for="fe_css">css(默认选中)</label>',
			'</fieldset>'
		];
		
		
		$(arr.join("")).insertAfter("#major_group");
		
		//可以设置主题:
		$("#fe_css").checkboxradio({
			theme:"e"
		})
		//触发create
		$.mobile.pageContainer.trigger("create");
	}
});

demo

PS:
1、有问题欢迎在官网留言或者直接联系我:@zhangyaochun_fe
2、可以在官网的问答频道进行提问,我们会尽快回复
3、谢谢您对w3cplusjquery mobile系列教程的关注

关于小春

专注于前端开发,对ECMA底层有深入探究和兴趣…热衷新技术深入调研学习,涉足移动前端许久,爱好分享交流…个人博客focus-fe。欢迎随时关注我:新浪微博

Nike MagistaX Proximo II TF white Fluorescent yellow women football shoes

如需转载,烦请注明出处:https://www.w3cplus.com/blog/712.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部