checkbox 表示

来源:互联网 发布:python 可变参数 编辑:程序博客网 时间:2024/05/21 03:19
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });


$(function(){
  $('#hide_over_30').change(function(){
    $('.over_30').toggle();
  })
  
  $('#hide_all').change(function(){
    $('.all').toggle();
  })
})


});
</script>
</head>
<body>
<label><input id="hide_all" type="checkbox">全体的に非表示</label> 
<br> 
<label><input id="hide_over_30" type="checkbox">30歳以上を非表示</label>    


<table>
  <thead>
    <th><td>名前</td><td>年齢</td></th>
  </thead>
  <tbody>
    <tr class="all over_30"><td>鈴木</td><td>35</td></tr>
    <tr class="all over_30"><td>佐藤</td><td>30</td></tr>
    <tr class="all"><td>斎藤</td><td>28</td></tr>
  </tbody>
</table>
<br>
<hr>
<table>
<tr>
 <th>商品名</th>
 <th>個数</th>
 <th>価格</th>
 </tr>
 <tr>
 <td>パン</td>
 <td>10</td>
 <td>100円</td>
 </tr>
 <tr>
 <td>おにぎり</td>
 <td>10</td>
 <td>100円</td>
 </tr>
 <tr>
 <td>水</td>
 <td>10</td>
 <td>100円</td>
 </tr>
 </table>
</body>
</html>