「koでデータ全部の色、指定したデータの色をcheckboxで変更」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

koでデータ全部の色、指定したデータの色をcheckboxで変更

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>koでデータ全部の色、指定したデータの色をcheckboxで変更</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
  9. <script type="text/javascript">
  10.   function ViewModel() {
  11.     var self = this;
  13.     self.pCol = ko.observable(true);
  14.     self.tCol = ko.observable(true);
  16.     self.testData = ko.observable();
  17.     var aryData = new Array(
  18.       {name: "ねぎ間",         price: "168", taste: "味噌、ポン酢、芥子"},
  19.       {name: "ハツ",           price: "136", taste: "塩、味噌"},
  20.       {name: "レバー",         price: "136", taste: "塩、味噌、芥子"},
  21.       {name: "ぼんちり",       price: "136", taste: "塩、味噌、ポン酢、芥子"},
  22.       {name: "はらみ",         price: "136", taste: "塩、たれ、芥子"},
  23.       {name: "うずら玉子",     price: "136", taste: "味噌、芥子"},
  24.       {name: "なんこつ",       price: "136", taste: "塩、ポン酢"},
  25.       {name: "手羽先",         price: "168", taste: "塩、たれ、味噌、ポン酢、芥子"},
  26.       {name: "せせり",         price: "136", taste: "塩、味噌、芥子"},
  27.       {name: "白レバー",       price: "168", taste: "味噌、ポン酢"},
  28.       {name: "コニク",         price: "110", taste: ""},
  29.       {name: "丸ごとシマウマ", price: "290", taste: "塩、たれ、味噌、ポン酢、芥子"}
  30.     );
  32.     for ( var i = 0; i<aryData.length; i++ ) {
  33.       aryData[i].chkPrice = ko.observable(true); // CSS用のフラグ：金額
  34.       aryData[i].chkTaste = ko.observable(true); // CSS用のフラグ：味付け
  35.       aryData[i].pThisCol = ko.observable(true); // checkbox用：金額
  36.       aryData[i].tThisCol = ko.observable(true); // checkbox用：味付け
  37.     }
  39.     self.testData(aryData);
  40.     
  41.     // 外にある「金額の色」のチェックボックスを押したとき
  42.     self.pChgAllCss = function(data) {
  43.       for ( var i = 0; i<self.testData().length; i++ ) {
  44.         // CSSとcheckboxの変更
  45.         self.testData()[i].chkPrice(self.pCol());
  46.         self.testData()[i].pThisCol(self.pCol());
  47.       }
  48.       return true;
  49.     };
  51.     // 外にある「味付の色」のチェックボックスを押したとき
  52.     self.tChgAllCss = function(data) {
  53.       for ( var i = 0; i<self.testData().length; i++ ) {
  54.         // CSSとcheckboxの変更
  55.         self.testData()[i].chkTaste(self.tCol());
  56.         self.testData()[i].tThisCol(self.tCol());
  57.       }
  58.       return true;
  59.     };
  61.     // 中にある「金額の色」のチェックボックスを押したとき
  62.     self.pChgCss = function(data) {
  63.       data.chkPrice(data.pThisCol());
  64.       return true;
  65.     };
  67.     // 中にある「味付の色」のチェックボックスを押したとき
  68.     self.tChgCss = function(data) {
  69.       data.chkTaste(data.tThisCol());
  70.       return true;
  71.     };
  73.   }
  75.   $(document).ready(function () {
  76.     ko.applyBindings(new ViewModel());
  77.   });
  78. </script>
  80. <style type="text/css">
  81. .cssPrice{background-color:#ccffff;}
  82. .cssTaste{background-color:#ffccff;}
  83. </style>
  85. </head>
  86. <body>
  88. <h1>データ全部の色、指定したデータの色をcheckboxで変更</h1>
  90. <label><input type="checkbox" data-bind="checked: pCol, click: pChgAllCss" />金額の色</label>、
  91. <label><input type="checkbox" data-bind="checked: tCol, click: tChgAllCss" />味付の色</label><br />
  93. <div style="margin-top:0.5em;padding:0.5em;border:1px solid #333;">
  94. <table data-bind="foreach: testData()">
  95. <tr>
  96. <td data-bind="text: name"></td>
  97. <td data-bind="text: price, css: {'cssPrice': chkPrice()==true}"></td>
  98. <td data-bind="text: taste, css: {'cssTaste': chkTaste()==true}"></td>
  99. <td>
  100. <label><input type="checkbox" data-bind="checked: pThisCol, click: $root.pChgCss" />金額の色</label>
  101. <label><input type="checkbox" data-bind="checked: tThisCol, click: $root.tChgCss" />味付の色</label><br />
  102. </td>
  103. </tr>
  104. </table>
  105. </div>
  107. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  108. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  109. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  110. </div>
  112. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  113. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  114. </div>
  116. </body>
  117. </html>