Question

我有一些包含图像的单选按钮：

<input type="radio" name="site" id="au" value="1" /><label for="au"><img src="images/auditup.jpg" alt="Audit" /></label>
<input type="radio" name="site" id="ma" value="2" /><label for="ma"><img src="images/repairup.jpg" alt="Maintenance" /></label>
<input type="radio" name="site" id="tr" value="3" /><label for="tr"><img src="images/transportup.jpg" alt="Transport" /></label>
<input type="radio" name="site" id="vi" value="4" /><label for="vi"><img src="images/visitup.jpg" alt="Visit" /></label>

我有6个div与内容

<div id="hygiene">
<p>some text</p>
<input type="checkbox" name="achygiene" value="1" id="achygiene" /><label for="achygiene">I agree to the terms and conditions.</label>
</div>

<div id="security">
<p>some text</p>
<input type="checkbox" name="acsecurity" value="1" id="acsecurity" /><label for="acsecurity">I agree to the terms and conditions.</label>
</div>

<div id="terms">
<p>some text</p>
<input type="checkbox" name="acterms" value="1" id="acterms" /><label for="acterms">I agree to the terms and conditions.</label>
</div>

<div id="defence">
<p>some text</p>
<input type="checkbox" name="acdefence" value="1" id="acdefence" /><label for="acdefence">I agree to the terms and conditions.</label>
</div>

<div id="safety">
<p>some text</p>
<input type="checkbox" name="acsafety" value="1" id="acsafety" /><label for="acsafety">I agree to the terms and conditions.</label>
</div>

我想要的是当有人正在勾选ID为“au”的单选按钮时（f.e.）div卫生，条款，防御显示。但是当有人正在勾选带有“ma”的单选按钮时，div（f.e.）的卫生和安全性正在显示。而对于另一个单选按钮，所有的div都在显示。它可能不是随机的！所以我必须设置当你勾选一个单选按钮时会打开什么div。请记住，某些单选按钮具有相同的div

我根本不擅长jQuery，所以这就是我在这里寻求帮助的原因。

编辑：我在堆栈上找到了很多例子，但没有任何带有多个div的例子

例如这段代码：

$(function(){
    $(':radio').click(function() {
        $('#' + $(this).attr('class')).fadeIn().siblings('div').hide();
    })
    .filter(':checked').click();//trigger the click event
});

我理解它的工作方式，但如果id和/或类的名称不能相同，则不知道怎么做

Answer 1

为每个div命名一个类，命名应该显示它的单选按钮。元素可以有多个类，它们不需要为它们分配CSS样式。

HTML：

<div id="hygiene" class="au ma">

jQuery的：

$('input[name=site]').on('click', function(e) {
    var id = this.id;
    $('div.'+id).show().siblings(':not(.'+id+')').hide();
});

http://jsfiddle.net/mblase75/mjLkR/

您可能需要根据完整HTML的结构调整选择器。

Answer 2

您可以在每个收音机中使用data- *属性来指定要显示的div，例如

<input type="radio" name="site" id="au" value="1" class="trigger" data-target="#hygiene, #security"/>
<label for="au">
    <img src="images/auditup.jpg" alt="Audit" />
</label>
<input type="radio" name="site" id="ma" value="2" class="trigger" data-target="#safety, #defence"/>
<label for="ma">
    <img src="images/repairup.jpg" alt="Maintenance" />
</label>
<input type="radio" name="site" id="tr" value="3" class="trigger" data-target="#hygiene, #defence"/>
<label for="tr">
    <img src="images/transportup.jpg" alt="Transport" class="trigger" data-target="#hygiene, #security"/>
</label>
<input type="radio" name="site" id="vi" value="4" class="trigger" data-target="#terms, #safety"/>
<label for="vi">
    <img src="images/visitup.jpg" alt="Visit" />
</label>
<div id="hygiene" class="contents">
    <p>some text hygiene</p>
    <input type="checkbox" name="achygiene" value="1" id="achygiene" />
    <label for="achygiene">I agree to the terms and conditions.</label>
</div>
<div id="security" class="contents">
    <p>some text security</p>
    <input type="checkbox" name="acsecurity" value="1" id="acsecurity" />
    <label for="acsecurity">I agree to the terms and conditions.</label>
</div>
<div id="terms" class="contents">
    <p>some text terms</p>
    <input type="checkbox" name="acterms" value="1" id="acterms" />
    <label for="acterms">I agree to the terms and conditions.</label>
</div>
<div id="defence" class="contents">
    <p>some text defence</p>
    <input type="checkbox" name="acdefence" value="1" id="acdefence" />
    <label for="acdefence">I agree to the terms and conditions.</label>
</div>
<div id="safety" class="contents">
    <p>some text safety</p>
    <input type="checkbox" name="acsafety" value="1" id="acsafety" />
    <label for="acsafety">I agree to the terms and conditions.</label>
</div>

然后

jQuery(function () {
    var $contents = $('.contents').hide();
    $('.trigger').change(function () {
        $contents.hide();
        $($(this).data('target')).show()
    })
})

演示：Fiddle

单击单选按钮时显示多个div

2 个答案: