複選框checkbox控制多個內容的顯示與隱藏
阿新 • • 發佈:2019-01-27
當點選複選框的時候,對應的內容會根據複選框的選中與否進行展示,checkbox複選款可動態迴圈增加,對應的內容展示區的內容要與複選框一一對應
程式碼如下:
樣式表部分:
<style type="text/css">
.b4,.b2,.b3{ display: none}
.show{ display: block}
</style>
html部分:
<table class="a0"> <tr> <td><input type="checkbox" class="a1" checked>a1</td> <td><input type="checkbox" class="a1">a2</td> <td><input type="checkbox" class="a1">a3</td> <td><input type="checkbox" class="a1">a4</td> </tr> </table> <div class="b0"> <div class="b1">b1</div> <div class="b2">b2</div> <div class="b3">b3</div> <div class="b4">b4</div> </div>
指令碼部分:
<script type="text/javascript" language="javascript"> $(function(){ $(".a0 tr td").each(function(index, element) { $(this).children("input").click(function(){ if($(this).is(':checked')) { $(".b0 div:eq("+index+")").show() }else{ $(".b0 div:eq("+index+")").hide() } console.log(this) }) }); }) </script>
請務必引用jquery,建議1.9X版本