单击单选按钮时更改内容的更短方式

Question

我想知道是否有更短的方法:

    <script>
       $(document).ready(function() {           
        $("#deliverer").change(function() {
         $("#opttuser").hide();
         $("#optdeliverer").show();
        });
        $("#tuser").change(function() {
         $("#optdeliverer").hide();
         $("#opttuser").show();
       });
     });
    </script>
    <input type="radio" id="deliverer" value="deliverer" name="type"/>
<input type="radio" name="type" value="tuser" id="tuser" />
    <div id='optuser'>//some input fields</div>
    <div id='optdeliverer'>//some other input fields

它没有任何问题,但我觉得这可以用更短的方式完成.所以有吗？

Answer 1

尝试这样的事情......我添加checked并使用css(demo)隐藏了相反的div :

HTML

<input type="radio" id="deliverer" value="deliverer" name="type" checked />
<input type="radio" name="type" value="tuser" id="tuser" />
<div id='optuser'>//some input fields</div>
<div id='optdeliverer'>//some other input fields</div>

码

$(document).ready(function() {
    $("#deliverer, #tuser").change(function() {
        $("#optdeliverer, #optuser").toggle();
    });
});

CSS

#optdeliverer { display: none; }