jq对radio的控制问题

swordfly63 2012-09-06 11:54:41

需要达到的效果很简单，就是有两个单选扭，后面分别对应两个下拉菜单，下拉菜单display:none，选中哪个radio，后面的下拉菜单就显示出来。源码在下面：





<html>

<head></head>

<style>

	.nclassify{float:left;margin:10px}

	.nclassify select{display:none}

</style>

<body>

	<span class="nclassify">

		<input id="ncsn1" type="radio" name="ncsn" value="政府新闻" /><label>政府新闻</label>

		<select id="snc1">

			<option selected>全部</option>

			<option value="政府新闻类型一">政府新闻类型一</option>

			<option value="政府新闻类型二">政府新闻类型二</option>

			<option value="政府新闻类型三">政府新闻类型三</option>

			<option value="政府新闻类型四">政府新闻类型四</option>

			<option value="政府新闻类型五">政府新闻类型五</option>

		</select>

	</span>

	<span class="nclassify">

		<input id="ncsn2" type="radio" name="ncsn" value="企业新闻" /><label>企业新闻</label>

		<select id="snc2">

			<option selected>全部</option>

			<option value="企业新闻类型一">企业新闻类型一</option>

			<option value="企业新闻类型二">企业新闻类型二</option>

			<option value="企业新闻类型三">企业新闻类型三</option>

			<option value="企业新闻类型四">企业新闻类型四</option>

			<option value="企业新闻类型五">企业新闻类型五</option>

		</select>

	</span>

</body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

	<script>

		$(function(){

			$("input:radio[name='ncsn']:checked").siblings("select").css("display","block");

		});	

	</script>

</html>

现在问题来了，当选中radio后，对应的select不会立刻出来，需要刷新一下才有效果，如何能让select实时根据所选radio展现呢？

...全文

129 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

licip 2012-09-07

打赏
举报

用jquery来做这些操作是很容易的。上面已有答案。

swordfly63 2012-09-07

打赏
举报

多谢各位，需求变了说不用隐藏，所以昨天LZ把论坛里的筒子们给忘了。今天散分了

scscms太阳光 2012-09-06

打赏
举报

<script type="text/javascript">

    $(function(){

        $("input:radio").click(function(){

            $("select").hide();

            $(this).siblings("select").show();

        });

    });

</script>

shenlan_digo 2012-09-06

打赏
举报

画龙添脚 2012-09-06

打赏
举报

$(function(){
$("input[name='ncsn']").click(function(){
$(this).siblings("select").show();
$(this).parent().siblings().find("select").hide();
});
});

frank498 2012-09-06

打赏
举报

楼主转变一下思维方式：用JQ设置display:block，还不如用show()简单。。。
个人是这么理解的

泡泡鱼_ 2012-09-06

打赏
举报

[Quote=引用 2 楼的回复:]
JScript code
<script type="text/javascript">
$(function(){
$("input:radio").click(function(){
$("select").hide();
$(this).siblings("select").show();
}……
[/Quote]

楼上这位朋友正解

一、设置选中方法代码如下: $(“input[name=’名字’]”).get(0).checked=true; $(“input[name=’名字’]”).attr(‘checked’,’true’);...input type=”radio” value=”0″ name=”jizai” id=”0″/

今天小编就为大家分享一篇layui中使用jquery控制radio选中事件的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

rcswitcher是一款可以将原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的jQuery插件。它内置了light，dark,flat和modern四种主题，你只需要在参数中进行简单的控制，就可以生成非常漂亮的滑动开关按钮...

1.在父窗口中操作选中IFRAME中的所有单选钮$(window.frames[“iframe1”].document).find(”input[@type=’radio’]“).attr(”checked”,”true”); 2.在IFRAME中操作选中父窗口中的所有单选钮$(window.parent....

[removed] $(function(){ //输入框中文字颜色控制 $(“input:not(:last)”).css(“color”,”#999″); }); //用户名框鼠标焦点移进，文字消失 $(“input:first”).click(function () { var check1 = $(this).val();...