「checkboxとradioの選択された値の取得」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

checkboxとradioの選択された値の取得

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>checkboxとradioの選択された値の取得</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.   $(document).ready(function () {
  11.     ko.applyBindings(new ViewModel());
  12.   });
  14.   function ViewModel() {
  15.     var self = this;
  17.     self.KoCheck = ko.observableArray();
  18.     self.KoRadio = ko.observable("");
  20.     valueCheckbox = ko.computed(function() {
  21.       msgCheckValue = "";
  22.       if (self.KoCheck().length < 1)
  23.       {
  24.         return "未チェック";
  25.       }
  26.       for (i=0; i<self.KoCheck().length; i++)
  27.       {
  28.         if (msgCheckValue != "")
  29.         {
  30.           msgCheckValue += "、";
  31.         }
  32.         msgCheckValue += self.KoCheck()[i];
  33.       }
  34.       return msgCheckValue;
  35.     }, self);
  36.     
  37.     valueRadio = ko.computed(function() {
  38.       if (self.KoRadio() == "")
  39.       {
  40.         return "未チェック";
  41.       }
  42.       return self.KoRadio();
  43.     }, self);
  45.   }
  46. </script>
  48. </head>
  49. <body>
  51. <h1>checkboxとradioの選択された値の取得</h1>
  53. <h2>checkbox</h2>
  54. <label><input type="checkbox" value="丸ごとしまうま" data-bind="checked: KoCheck" />丸ごとしまうま</label>
  55. <label><input type="checkbox" value="ねぎま" data-bind="checked: KoCheck" />ねぎま</label>
  56. <label><input type="checkbox" value="ひな皮" data-bind="checked: KoCheck" />ひな皮</label><br />
  58. <p>
  59. チェックされたのは「<span style="color:red;" data-bind="text: valueCheckbox"></span>」です。<br />
  60. <small>※observableArray()を使う。observable()の場合、true/falseのどちらかになる</small>
  61. </p>
  63. <h2>radioボタン</h2>
  64. <label><input type="radio" value="ナンコツ" data-bind="checked: KoRadio" />ナンコツ</label>
  65. <label><input type="radio" value="砂肝" data-bind="checked: KoRadio" />砂肝</label>
  66. <label><input type="radio" value="つくね" data-bind="checked: KoRadio" />つくね</label>
  68. <p>チェックされたのは「<span style="color:red;" data-bind="text: valueRadio"></span>」です。</p>
  72. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  73. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  74. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  75. </div>
  77. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  78. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  79. </div>
  81. </body>
  82. </html>