带属性的显示元素

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> 

我想：如果我点击无线电水属性测试=“一”然后应该显示我所有的属性测试=“一”的股利。我怎样才能使它与jQuery？

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

Answer 1

试试这个：

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

Updated fiddle

请注意，您在此处创建属于您自己的属性无效。如果您使用的是HTML5，则应考虑使用data属性来存储与每个元素相关的所需信息。

Answer 2

附上标签贴到Water文本，并使用属性选择一个单击处理程序：

<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

我相信这是你正在寻找的东西？

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

Answer 6

试试这个

jQuery(document).ready(function(){ 
    var yourAttributeName = 'test'; 
    var allDivs = jQuery('div['+yourAttributeName+']'); 

    jQuery('input['+yourAttributeName+']').click(function(){ 
     allDivs.hide().filter('[' + yourAttributeName + '=' +  jQuery(this).attr(yourAttributeName) + ']').show();  
    }) 
    //check the init checked 
    .filter(':checked') 
    //and fire click event to filter 
    .click(); 
});