欢迎来到 54818模板网!这是一个yzmcms的模板分享站。

实时获取Input的Radio单选按钮的选中状态

相关案例演示

        在插件的开发中,需要做一个功能,实例是input的Radio单选按钮,需要根据用户实时选择来控制DIV的显示或隐藏。显然jQuery的.attr方法是达不到效果的,它只能获取input的默认属性值。并不能实时获取用户的选择。于是我想到了用jQuery的另一个.prop方法。

        input的Radio单选按钮用.prop('checked')来获取选中状态,它有一个特点,它获取选中按钮除了第1个是返回true外,之后的单选按钮都是返回false。正好,我这里只有两个单选按钮,所以用这个没问题。选择第1个是true,第2个是false。根据判断就可以显示或隐藏DIV了。


<label><input name="fblm" value="0" type="radio">不限制栏目</label>
<label><input name="fblm" value="1" type="radio" checked>指定发布栏目</label>

<div id="fblm"> </div>


<script type="text/javascript">
$("input[name='fblm']").click(function () {
	var zt = $("input[name='fblm']").prop('checked');
	//alert(zt);
	if(zt){
		$("#fblm").hide();
	}else{
		$("#fblm").show();
	}
})
</script>


        如果你的单选按钮多于2个,那你用.prop方法就达不到效果。这时你需要用选择器的:checked方法来获取值,来判断处理了。

<label><input name="fblm" value="0" type="radio">不限制栏目</label>
<label><input name="fblm" value="1" type="radio" checked>发布栏目1</label>
<label><input name="fblm" value="2" type="radio">发布栏目2</label>

<div id="fblm"> </div>


<script type="text/javascript">
$("input[name='fblm']").click(function () {
	var zt = $("input[name='fblm']:checked").val();
	if(zt == 1) $("#fblm").hide();
	if(zt == 2) $("#fblm").show();
})
</script>


开始没想到用:checked方法。


2021/08/20 补充一下,还可以通过 $(this) 加 attr 来获取单选按钮的值。

$("input[name='fbxz'],input[name='xjxz']").click(function () {
	var mz = $(this).attr("name");//这里是获取当前点击的按钮的name
	var zt = parseInt($(this).attr("value"));//这里是获取当前点击的按钮value
	//var zt = $("input[name="+mz+"]:checked").val();//这个是上面的老方法
	if(zt==1){
		$(mz).show();
	}else{
		$(mz).hide();
	}
})

    作者:54818模板网 关注:1386 时间:2021-08-20 21:52:32
    相关网站教程