从检查字段获取值以隐藏框

我遇到问题我尝试创建一个示例，其中可以显示和隐藏不同类型和星形的.box。我怎样才能从检查的无线电领域获得价值观？从检查字段获取值以隐藏框

我的代码

<!doctype html> 
 
<html> 
 
    <head> 
 
    <title>Hide</title> 
 
    <meta content=""> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
    <style> 
 
    #wrapper{ 
 
    float:left; 
 
    display:inline 
 
    } 
 
    .box{ 
 
    background-color:yellowgreen; 
 
    float:left; 
 
    height:100px; 
 
    margin:10px; 
 
    width:100px; 
 
    text-align:center 
 
    } 
 
    #navigation{ 
 
    width:100%; 
 
    min-height:50px; 
 
    float:left; 
 
    } 
 
    #navigation ul{ 
 
    padding-left:0px; 
 
    } 
 
    #navigation ul li{ 
 
    width:100%; 
 
    background-color:orange; 
 
    margin-bottom:10px; 
 
    float:left; 
 
    cursor:pointer; 
 
    height:30px; 
 
    text-align:center; 
 
    list-style-type:none 
 
    } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <script> 
 
    $(document).ready(function(){ 
 
    
 
    $("#navigation > ul > li > label > input, #navigation > #anz_star > li > label > input").click(function(){ 
 
     
 
     var type_id = $("#navigation > ul > li > label > input").data("loktyp").is("#navigation > ul > li > label > input :checked"); 
 
     var stars = $("#navigation > #anz_star > li > label > input").data("stars").is("#navigation > #anz_star > li > label > input :checked"); 
 
     var path = type_id + '-' + stars; 
 
     
 
      alert(path); 
 
     
 
     }); 
 
     
 
    }); 
 
    
 
    </script> 
 
    <div id="navigation"> 
 
    <ul> 
 
     <li><label for="d01"><input type="radio" name="typ" data-type="1" id="d01">Type 1</label></li> 
 
     <li><label for="d02"><input type="radio" name="typ" data-type="2" id="d02">Type 2</label></li> 
 
    </ul> 
 
    <p>Stars</p> 
 
    <ul id="anz_star"> 
 
     <li><label for="s66"><input type="radio" name="star" data-stars="6" id="s66">All stars</label></li> 
 
     <li><label for="s01"><input type="radio" name="star" data-stars="1" id="s01">1 Star</label></li> 
 
     <li><label for="s02"><input type="radio" name="star" data-stars="2" id="s02">2 Stars</label></li> 
 
     <li><label for="s03"><input type="radio" name="star" data-stars="3" id="s03">3 Stars</label></li> 
 
     <li><label for="s04"><input type="radio" name="star" data-stars="4" id="s04">4 Stars</label></li> 
 
     <li><label for="s05"><input type="radio" name="star" data-stars="5" id="s05">5 Stars</label></li> 
 
    </ul> 
 
    </div> 
 
    <div id="wrapper"> 
 
    <div class="box" data-type="1" data-stars="1">1 Star</div> 
 
    <div class="box" data-type="2" data-stars="2">2 Stars</div> 
 
    <div class="box" data-type="1" data-stars="1">1 Star</div> 
 
    <div class="box" data-type="2" data-stars="2">2 Stars</div> 
 
    <div class="box" data-type="2" data-stars="3">4 Stars</div> 
 
    <div class="box" data-type="1" data-stars="3">1 Star</div> 
 
    <div class="box" data-type="1" data-stars="3">4 Stars</div> 
 
    <div class="box" data-type="1" data-stars="4">1 Star</div> 
 
    <div class="box" data-type="2" data-stars="4">3 Stars</div> 
 
    <div class="box" data-type="1" data-stars="5">1 Star</div> 
 
    </div> 
 
    </body> 
 
</html>

我要显示和隐藏DIV盒子 “.box” 不同的 “类型” 和 “明星”。要做到这一点，我需要从复选框中获取值

来源

2017-05-26 Juergen

试试这个来显示您的数据类型和数据星的值匹配的框。

<!doctype html> 
 
<html> 
 
    <head> 
 
    <title>Hide</title> 
 
    <meta content=""> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
    <style> 
 
    #wrapper{ 
 
    float:left; 
 
    display:inline 
 
    } 
 
    .box{ 
 
    background-color:yellowgreen; 
 
    float:left; 
 
    height:100px; 
 
    margin:10px; 
 
    width:100px; 
 
    text-align:center 
 
    } 
 
    #navigation{ 
 
    width:100%; 
 
    min-height:50px; 
 
    float:left; 
 
    } 
 
    #navigation ul{ 
 
    padding-left:0px; 
 
    } 
 
    #navigation ul li{ 
 
    width:100%; 
 
    background-color:orange; 
 
    margin-bottom:10px; 
 
    float:left; 
 
    cursor:pointer; 
 
    height:30px; 
 
    text-align:center; 
 
    list-style-type:none 
 
    } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <script> 
 
    $(document).ready(function(){ 
 
    
 
    $("input[type=radio]").click(function(){ 
 
     
 
     var type_id = $('input[type=radio][name=typ]:checked').attr('data-type'); 
 
     var stars = $('input[type=radio][name=star]:checked').attr('data-stars'); 
 
     var path = type_id + '-' + stars; 
 

 
     // Start to show matched boxes 
 
     //$('#wrapper .box').hide(); 
 
     //$('#wrapper div[data-type="'+type_id+'"][data-stars="'+stars+'"]').show(); 
 
     // End to show matched boxes 
 

 
     // Start to hide matched boxes 
 
     $('#wrapper .box').show(); 
 
     $('#wrapper div[data-type="'+type_id+'"][data-stars="'+stars+'"]').hide(); 
 
     // End to hide matched boxes 
 

 
      alert(path); 
 
     
 
     }); 
 
     
 
    }); 
 
    
 
    </script> 
 
    <div id="navigation"> 
 
    <ul> 
 
     <li><label for="d01"><input type="radio" name="typ" data-type="1" id="d01">Type 1</label></li> 
 
     <li><label for="d02"><input type="radio" name="typ" data-type="2" id="d02">Type 2</label></li> 
 
    </ul> 
 
    <p>Stars</p> 
 
    <ul id="anz_star"> 
 
     <li><label for="s66"><input type="radio" name="star" data-stars="6" id="s66">All stars</label></li> 
 
     <li><label for="s01"><input type="radio" name="star" data-stars="1" id="s01">1 Star</label></li> 
 
     <li><label for="s02"><input type="radio" name="star" data-stars="2" id="s02">2 Stars</label></li> 
 
     <li><label for="s03"><input type="radio" name="star" data-stars="3" id="s03">3 Stars</label></li> 
 
     <li><label for="s04"><input type="radio" name="star" data-stars="4" id="s04">4 Stars</label></li> 
 
     <li><label for="s05"><input type="radio" name="star" data-stars="5" id="s05">5 Stars</label></li> 
 
    </ul> 
 
    </div> 
 
    <div id="wrapper"> 
 
    <div class="box" data-type="1" data-stars="1">1 Star</div> 
 
    <div class="box" data-type="2" data-stars="2">2 Stars</div> 
 
    <div class="box" data-type="1" data-stars="1">1 Star</div> 
 
    <div class="box" data-type="2" data-stars="2">2 Stars</div> 
 
    <div class="box" data-type="2" data-stars="3">4 Stars</div> 
 
    <div class="box" data-type="1" data-stars="3">1 Star</div> 
 
    <div class="box" data-type="1" data-stars="3">4 Stars</div> 
 
    <div class="box" data-type="1" data-stars="4">1 Star</div> 
 
    <div class="box" data-type="2" data-stars="4">3 Stars</div> 
 
    <div class="box" data-type="1" data-stars="5">1 Star</div> 
 
    </div> 
 
    </body> 
 
</html>

来源

2017-05-26 07:38:34

谢谢你，它的工作！你知道我该如何隐藏.box，其中.box data-type =“1”和data-stars =“4”？ – Juergen

我已经在解决方案中的注释模式中添加了用于隐藏框代码的逻辑，您可以通过评论显示框逻辑和取消隐藏逻辑来检查它。 –

短期和简单的代码。既然你没有任何其他形式/输入元素，你可以检查并使用此代码如下：

$(document).ready(function(){ 
 

 
    $("input").click(function(){ 
 
    if($(this).data('type')) 
 
     alert($(this).data('type')) 
 
    if($(this).data('stars')) 
 
     alert($(this).data('stars')) 
 
    }); 
 

 
});

#wrapper{ 
 
    float:left; 
 
    display:inline 
 
    } 
 
    .box{ 
 
    background-color:yellowgreen; 
 
    float:left; 
 
    height:100px; 
 
    margin:10px; 
 
    width:100px; 
 
    text-align:center 
 
    } 
 
    #navigation{ 
 
    width:100%; 
 
    min-height:50px; 
 
    float:left; 
 
    } 
 
    #navigation ul{ 
 
    padding-left:0px; 
 
    } 
 
    #navigation ul li{ 
 
    width:100%; 
 
    background-color:orange; 
 
    margin-bottom:10px; 
 
    float:left; 
 
    cursor:pointer; 
 
    height:30px; 
 
    text-align:center; 
 
    list-style-type:none 
 
    }

<!doctype html> 
 
<html> 
 
    <head> 
 
    <title>Hide</title> 
 
    <meta content=""> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <div id="navigation"> 
 
    <ul> 
 
     <li><label for="d01"><input type="radio" name="typ" data-type="1" id="d01">Type 1</label></li> 
 
     <li><label for="d02"><input type="radio" name="typ" data-type="2" id="d02">Type 2</label></li> 
 
    </ul> 
 
    <p>Stars</p> 
 
    <ul id="anz_star"> 
 
     <li><label for="s66"><input type="radio" name="star" data-stars="6" id="s66">All stars</label></li> 
 
     <li><label for="s01"><input type="radio" name="star" data-stars="1" id="s01">1 Star</label></li> 
 
     <li><label for="s02"><input type="radio" name="star" data-stars="2" id="s02">2 Stars</label></li> 
 
     <li><label for="s03"><input type="radio" name="star" data-stars="3" id="s03">3 Stars</label></li> 
 
     <li><label for="s04"><input type="radio" name="star" data-stars="4" id="s04">4 Stars</label></li> 
 
     <li><label for="s05"><input type="radio" name="star" data-stars="5" id="s05">5 Stars</label></li> 
 
    </ul> 
 
    </div> 
 
    <div id="wrapper"> 
 
    <div class="box" data-type="1" data-stars="1">1 Star</div> 
 
    <div class="box" data-type="2" data-stars="2">2 Stars</div> 
 
    <div class="box" data-type="1" data-stars="1">1 Star</div> 
 
    <div class="box" data-type="2" data-stars="2">2 Stars</div> 
 
    <div class="box" data-type="2" data-stars="3">4 Stars</div> 
 
    <div class="box" data-type="1" data-stars="3">1 Star</div> 
 
    <div class="box" data-type="1" data-stars="3">4 Stars</div> 
 
    <div class="box" data-type="1" data-stars="4">1 Star</div> 
 
    <div class="box" data-type="2" data-stars="4">3 Stars</div> 
 
    <div class="box" data-type="1" data-stars="5">1 Star</div> 
 
    </div> 
 
    </body> 
 
</html>

来源

2017-05-26 07:54:04

从检查字段获取值以隐藏框

回答

相关问题