Question

我正在尝试使用单选按钮切换，我找到了一个几乎完全符合我需要的例子：

HTML

<div id="myRadioGroup">
2 Cars<input type="radio" name="cars" checked="checked" value="twoCarDiv"  />
3 Cars<input type="radio" name="cars" value="threeCarDiv" />
<div id="twoCarDiv" class="desc">
    2 Cars Selected
</div>
<div id="threeCarDiv" class="desc">
    3 Cars Selected
</div>
</div>

JS

$(document).ready(function() {
$("div.desc").hide();
$("input[name$='cars']").click(function() {
    var test = $(this).val();
    $("div.desc").hide();
    $("#" + test).show();
});
});

js小提琴链接：http://jsfiddle.net/saifrahu28/XD4kr/

在这个示例中，我可以在按钮之间进行切换和切换并打开他们的Div，但我想要的是当页面加载时，第一个div应该打开，选择第一个单选按钮，现在没有。然后我可以在它们之间切换。这可能吗？

Answer 1

为什么不在开始时添加$('#twoCarDiv').show();？

$(document).ready(function() {
    $("div.desc").hide();
    $('#twoCarDiv').show();

Demonstration

Answer 2

我建议：

$(document).ready(function() {
    $("div.desc").hide();
    $("input[name$='cars']").change(function() {
        $("div.desc").hide();
        $("#" + this.value).show();
    }).filter(function(){
        return this.checked;
    }).change();
});

JS Fiddle demo

上面的jQuery使用change()方法（为了使用label元素来切换checked无线电input仍然有效。

隐藏相关元素。

查找具有相关id的元素（并且this.value是跨浏览器兼容的，不需要在jQuery调用中包装它;除非你＆＃ 39;重复使用相同的值不止一次，没有节省来缓存价值）。

过滤最初选择的元素，找到已选中的元素，然后触发change事件。

当HTML被修改为使用change()元素时，label的使用变得更加明显（因此单击文本会导致已检查的无线电更改）：

<div id="myRadioGroup">
    <label>2 Cars<input type="radio" name="cars" checked="checked" value="twoCarDiv"  /></label>
    <label>3 Cars<input type="radio" name="cars" value="threeCarDiv" /></label>
    <div id="twoCarDiv" class="desc">
        2 Cars Selected
    </div>
    <div id="threeCarDiv" class="desc">
        3 Cars Selected
    </div>
</div>

JS Fiddle demo

参考文献：

change()。
filter()。

Answer 3

$(document).ready(function() {
$("div.desc").hide();
$('#twoCarDiv').show();
$("input[name$='cars']").click(function() {
    var test = $(this).val();
    $("div.desc").hide();
    $("#" + test).show();
});
});

Answer 4

只是不要先隐藏它们而只隐藏第二个：

$(document).ready(function() {
    $("#threeCarDiv").hide();

Answer 5

另一种方法是将值2/3存储在自定义data-属性中，并将div#desc的值设置为data-value点击的单选按钮+ ' cars selected.' < / p>

这样，您只需使用1 div.desc并更改其值即可。它还减少了jQuery代码的风格。

这是demo

修改

<强> HTML

  <div id="myRadioGroup">
    2 Cars<input data-value="2" type="radio" name="cars" checked="checked" value="twoCarDiv"  />
    3 Cars<input data-value="3" type="radio" name="cars" value="threeCarDiv" />

    <div id="desc">
        2 Cars selected.
    </div>
</div>

<强>的jQuery

   var $desc = $('div#desc');
    $(document).on('click', 'input', function() {
        $desc.text($(this).data('value') + ' cars selected.');
    });

单选按钮切换功能

5 个答案:

修改