Element mit Attribut anzeigen

Question

<input type="radio" name="group2" test="one" value="Water"> Water
<input type="radio" name="group2" test="two" value="Beer"> Beer<br>

<div style="display: none" test="one">aaaaaaa</div>
<div style="display: none" test="two">bbbbbbb</div>
<div style="display: none" test="one">ccccccc</div>

Ich möchte: wenn ich auf Radio Water mit Attribut test="one" klicke, dann sollen mir alle div mit Attribut test="one" angezeigt werden. Wie kann ich es mit jQuery machen?

LIVE: http://jsfiddle.net/hRCXV/

Answer 1

Versuchen Sie dies:

$("input[type='radio']").click(function() {
    var test = $(this).attr("test");
    $("div[test]").hide();
    $("div[test='" + test + "']").show();
});

Aktualisierte Fiedel

Bitte beachten Sie, dass die Erstellung eigener Attribute, wie Sie sie hier vorgenommen haben, nicht zulässig ist. Wenn Sie HTML5 verwenden, sollten Sie die Verwendung der data Attribut, um die Informationen zu speichern, die Sie für jedes Element benötigen.

Answer 2

Bringen Sie ein Etikett an der Water Text und einen Click-Handler, der den Attributselektor verwendet:

<label for="option1">
    <input type="radio" name="group2" id="option1" test="one" value="Water"> Water
</label>

<script>
$('label').click(function() {
    // Logic tells me that you want to only show the test elements whose
    //   attribute matches the selected radio element; Hide the previous ones:
    $('div[test]').hide();

    // Get test value:
    var test = $('#' + $(this).attr('for') ).attr('test');

    $('div[test="' + test + '"]').show();
});
</script>

Answer 3

$('input [value="Water"]').click(function() {
   $('[test="one"]').show();         
});

Answer 4

JsFiddle: http://jsfiddle.net/hRCXV/1/

$("input[type=radio][value=Water]").click(function()
                                           {
                                               $("[test=one]").show();
                                           });

Answer 5

Ich glaube, das ist etwas, wonach Sie suchen?

$(':radio[name="group2"]').click(function(e){    
    var test = $(this).attr('test');
$('div[test]').hide();
$('div[test='+test+']').show();
    });