1

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

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 应该打开，并且现在没有选择第一个单选按钮。然后我可以在它们之间切换。这可能吗 ？

4

5 回答 5

1

为什么不简单地$('#twoCarDiv').show();在开头添加？

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

示范

于 2013-05-26T17:59:11.843 回答
1

我建议：

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

JS 小提琴演示。

上面的 jQuery 使用该change()方法（为了使用label元素来切换checked收音机input仍然可以工作。

隐藏相关元素。

找到相关的元素（id并且this.value是跨浏览器兼容的，没有必要将其包装在 jQuery 调用中；除非您多次使用相同的值，否则不会节省缓存值）。

过滤最初选择的元素，找到选中的元素，然后触发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 小提琴演示。

参考：

于 2013-05-26T18:00:12.537 回答
0 
$(document).ready(function() {
$("div.desc").hide();
$('#twoCarDiv').show();
$("input[name$='cars']").click(function() {
    var test = $(this).val();
    $("div.desc").hide();
    $("#" + test).show();
});
});
于 2013-05-26T17:59:40.163 回答
0

只是不要隐藏第一个而只隐藏第二个：

$(document).ready(function() {
    $("#threeCarDiv").hide();
于 2013-05-26T18:00:28.840 回答
0

您可以执行此操作的另一种方法是将值 2/3 存储在自定义data-属性中并设置单击div#desc的data-value单选按钮的值+ ' cars selected.'

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

这是一个演示

编辑

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.');
    });
于 2013-05-26T18:25:24.583 回答