現在私は以下のようなカードゲームのカードをまとめるサイトを自作しようとしてます。
それで弾数の欄のcheckboxを操作すれば下のカードの表の弾数からフィルターされるようにしたいのですが、どうするのかわかりませんご教授お願い致します。
html
コード ```<!DOCTYPE html> <html class="no-js" lang="ja" ng-app="myApp"> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NOVACard</title> </head> <body> <div> <header> <h1 id="Top">NOVA Card Search Engine</h1> <nav> <ul> <li><a href="#about">NOVAカード検索機</a></li> <li><a href="#contact">お問い合わせ</a></li> <li><a href="https://www.fundeal.jp/">NOVA TCG - ファンディール公式サイト</a></li> </ul> </nav> </header> <section> <h2 id="about">NOVAカード検索機</h2> <p>カード一覧</p> <table border="2"> <tr> <th>弾数</th> <th>1<input type="checkbox" name="c1" id="c1"></th> <th>2<input type="checkbox" name="c2" id="c2"></th> <th>3<input type="checkbox" name="c3" id="c3"></th> <th>4<input type="checkbox" name="c4" id="c4"></th> <th>5<input type="checkbox" name="c5" id="c5"></th> <th>EX1<input type="checkbox" name="cEX1" id="cEX1"></th> </tr> <tr> <th>6<input type="checkbox" name="c6" id="c6"> </th> <th>7<input type="checkbox" name="c7" id="c7"></th> <th>8<input type="checkbox" name="c8" id="c8"></th> <th>9<input type="checkbox" name="c9" id="c9"></th> <th>10<input type="checkbox" name="c10" id="c10"></th> <th>EX2<input type="checkbox" name="cEX2" id="cEX2"></th> <th>PR<input type="checkbox" name="cPR" id="cPR"></th> </tr> </table> <table border="2"> <tr> <th>黒<input type="checkbox" name="cblack" id="cblack"> </th> <th>白<input type="checkbox" name="cwhite" id="cwhite"></th> <th>緑<input type="checkbox" name="cgreen" id="cgreen"></th> <th>青<input type="checkbox" name="cbule" id="cbule"></th> <th>赤<input type="checkbox" name="cred" id="cred"></th> <th>無<input type="checkbox" name="cless" id="cless"></th> </table> <table border="2"> <tr> <th>キャラ<input type="checkbox" name="cCC" id="cCC"> </th> <th>サーバント<input type="checkbox" name="cSV" id="cSV"></th> <th>スペル<input type="checkbox" name="cSP" id="cSP"></th> <th>マジックアイテム<input type="checkbox" name="cMI" id="cMI"></th> </table> <table border="1"> <th><p>所属</p></th> <th><select name="syozoku" id="syozoku"> <option value="2">ギフト</option> </select></th> <th><p>種族</p></th> <th><select name="syuzoku" id="syuzoku"> <option value="2">大罪</option> </select></th> <th><select name="AT" id="AT"> <p>Attack</p> <option value="2">0</option> <option value="3">100</option> <option value="4">200</option> <option value="5">300</option> <option value="6">400</option> <option value="7">500</option> <option value="8">600</option> <option value="9">700</option> <option value="10">800</option> <option value="11">900</option> </select></th> <th><select name="ST" id="ST"> <p>Stamina</p> <option value="2">0</option> <option value="3">100</option> <option value="4">200</option> <option value="5">300</option> <option value="6">400</option> <option value="7">500</option> <option value="8">600</option> <option value="9">700</option> <option value="10">800</option> <option value="11">900</option> </select></th> </table> <table border="5"> <tr> <th>弾数</th> <th>色</th> <th>名前</th> <th>所属</th> <th>種族</th> <th>レベル/コスト</th> <th>Attack</th> <th>Stamina</th> </tr> <tr> <td>1弾</td> <td>黒</td> <td><a href="./img/01B/01B01.PNG" data-lightbox="group"><img src="./img/01B/01B01.PNG" alt="" width="140px" height="100">色欲のティーティア</a></td> <td>ギフト</td> <td>大罪</td> <td>1</td> <td>-</td> <td>-</td> </tr> <td>1弾</td> <td>黒</td> <td><a href="./img/01B/01B02.PNG" data-lightbox="group"><img src="./img/01B/01B02.PNG" alt="" width="140px" height="100">憤怒のフィオリア</a></td> <td>ギフト</td> <td>大罪</td> <td>1</td> <td>300</td> <td>200</td> </tr> </table> </section> <section> <h3 id="contact">お問い合わせ</h3> <p>サイトに関するお問い合わせ</p> <form action="#" method="POST"> <dl> <dt><label for="username">お名前(必須):</label> </dt> <dd><input type="text" name="username" id="username" value=""></dd> <dt><label for="email">メールアドレス:</label></dt> <dd><input type="email" name="email" id="email" value=""></dd> <dt><label for="type">お問い合わせ種類</label></dt> <dd> <select name="type" id="type"> <option value="1">このサイトについて</option> <option value="2">その他</option> </select> </dd> <dt><label for="content">お問い合わせ内容:</label></dt> <dd><textarea name="content" id="content" cols="30" rows="10"></textarea></dd> </dl> <p><input type="submit" value="送信する"></p> </form> </section> <h3><a href="https://www.fundeal.jp/">NOVA TCG ファンディール公式サイト</a></h3> <footer><a href="#Top">Topに戻る</footer> </div> </body> </html>
まだ回答がついていません
会員登録して回答してみよう