group1のチェックボックスにチェックを入れると、文字列を配列ordersに取得し、配列番号の文字列をshow1~3に表示させたく以下のコードを書きました。文字列がordersに格納されておらず、どなたか原因が分かる方はいらっしゃいませんか。
jQuery
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 7 <script> 8 $(function() { 9 $('.group input[type="checkbox"]').on("change", function () { 10 var orders = []; 11 $('.group input:checked').each(function () { 12 orders.push($(this).parent().text()); 13 console.log(orders); 14 }); 15 16 $("#show1").text(orders[0]); 17 $("#show2").text(orders[1]); 18 $("#show3").text(orders[2]); 19 $("#show4").text(orders[3]); 20 }); 21 22 23 24 25 26 </script> 27</head> 28<body> 29 <div class="top"> 30 31 <div class="top_graph"> 32 <table border="" class = "graph"> 33 <tr> 34 <th colspan=1 height="10%" width = "10%"></th> 35 <th colspan=2 height="10%" width = "90%">/th> 36 </tr> 37 <tr align="center" class = "skill"> 38 <td width = "10%"> 39 40 </td> 41 <td width = "10%">1</td> 42 <td width = "90%" id="show1"> 43 44 </td> 45 </tr> 46 <tr align="center" class = "skill"> 47 <td width = "10%"> 48 49 </td> 50 <td width = "10%">2</td> 51 <td width = "90%" id="show2"> 52 53 </td> 54 </tr> 55 <tr align="center"> 56 <td width = "10%"> 57 58 </td> 59 <td width = "10%">3</td> 60 <td width = "90%" id="show3"> 61 62 </td> 63 </tr> 64 <tr align="center"> 65 <td width = "10%"> 66 67 </td> 68 <td width = "10%">4</td> 69 <td width = "90%" id="show4"> 70 71 </td> 72 </tr> 73 74 </table> 75 </div> 76 </div> 77 <div class ="group"> 78 <div class= "group1"> 79 <table border="" width="840px" height="700" class = "graph_s"> 80 <tr><th colspan=6 height="10%" ></th></tr> 81 <tr width="16%" height="10%"> 82 <th></th><th></th><th></th><th> 83 </th><th></th><th></th> 84 </tr> 85 <tr align="center"> 86 <td> 87 <label><input type="checkbox" class="G1" value="0.1" >aaa</label> 88 </td> 89 <td> 90 <label><input type="checkbox" class="G1" value="0.2" >bbb</label> 91 </td> 92 <td> 93 <label><input type="checkbox" class="G1" value="0.3" >ccc</label> 94 <td> 95 <label><input type="checkbox" class="G1" value="0.4" >ddd</label> 96 </td> 97 <td> 98 <label><input type="checkbox" class="G1" value="0.5" >eee</label> 99 </td> 100 <td> 101 <label><input type="checkbox" class="G1" value="0.6" >fff</label> 102 </td> 103 </tr> 104 105 </table> 106</div> 107</div> 108<script src="script.js"></script> 109</body> 110</html> 111
回答1件
あなたの回答
tips
プレビュー