2013-05-22 30 views
0

我有两个单选按钮。一个在另一个下面。我希望下面的一个显示在第一个选中按钮的下方,并保持在第一个宽度的范围内并以动态的方式。 感谢您的帮助。根据另一个显示jQuery UI单选按钮

<script> 
$(function() { 
$("#categorie").buttonset(); 
$("#types").buttonset(); 
}); 
</script> 
</head> 
<body> 
<form> 

<div id="categorie"> 
<input type="radio" id="categorie1" name="categorie" checked="checked"/><label for="categorie1">bla</label> 
<input type="radio" id="categorie2" name="categorie" /><label for="categorie2">bla</label> 
<input type="radio" id="categorie3" name="categorie" /><label for="categorie3">bla</label> 
</div> 

<div id="types"> 
<input type="radio" id="type1" name="type" checked="checked"/><label for="type1">bla</label> 
<input type="radio" id="type2" name="type" /><label for="type2">bla</label> 
<input type="radio" id="type3" name="type" /><label for="type3">bla</label> 
</div> 

回答

0

我不知道这是否是你的问题,直到我的理解,在的jsfiddle 检查了这一点,http://jsfiddle.net/t7x9B/18/

$('input[name="categorie"]').click(function(){ 
    $('#categorie').find('#inner').remove(); 
    $(this).parent().append($("#types").html()); 
}); 

和HTML

<div id="categorie"> 
    <div id="first" style="display:block;float:left"> 
     <input type="radio" id="categorie1" name="categorie" checked="checked" /> 
     <label for="categorie1">bla1</label> 
    </div> 
    <div id="second" style="display:block;float:left"> 
     <input type="radio" id="categorie2" name="categorie" /> 
     <label for="categorie2">bla2</label> 
    </div> 
    <div id="third" style="display:block;float:left"> 
     <input type="radio" id="categorie3" name="categorie" /> 
     <label for="categorie3">bla3</label> 
    </div> 
</div> 
<div id="types" style="display:none;"> 
    <div id="inner"> 
     <br> 
     <input type="radio" id="type1" name="type" checked="checked" /> 
     <label for="type1">bla_a</label> 
     <br> 
     <input type="radio" id="type2" name="type" /> 
     <label for="type2">bla_b</label> 
     <br> 
     <input type="radio" id="type3" name="type" /> 
     <label for="type3">bla_c</label> 
    </div> 
</div> 
相关问题