从选中字段中获取值以隐藏框

时间：2017-05-26 07:23:08

标签： jquery

我有一个问题我尝试创建一个示例，我可以显示和隐藏不同类型和星星的.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”。 要做到这一点，我需要从复选框中获取值

2 个答案:

答案 0 :(得分：0)

尝试此选项以显示与数据类型和数据星相匹配的框。

<!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>

答案 1 :(得分：0)

简短的代码。由于您没有任何其他表单/输入元素，您可以检查并使用以下代码：

＆＃13;
＆＃13; 
$(document).ready(function(){

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

});
＆＃13; 
#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
    }
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题