退会済みユーザー
2015/08/25 14:39 投稿
| ```html |
| <input type="checkbox" name="OPT-01" value="色つき" id="test1" price="1000" text="iro"><label for="test1">色をつける</label> |
| <input type="checkbox" name="OPT-02" value="ガラスつき" id="test2" price="1000" text="garasu"><label for="test2">ガラスをつける</label> |
| <input type="checkbox" name="OPT-03" value="ワックスサービス" id="test3" price="1000" text="wakkusu"><label for="test3">ワックスを塗る</label> |
| <button onclick="test_price();">priceの値をとる</button> |
| <button onclick="test_text();">textの値をとる</button> |
| ``` |
| ```javascript |
| function test_price() { |
| var elem = document.getElementsByName("OPT-01"); |
| var price = elem[0].getAttribute("price"); |
| alert(price); |
| var hidden_price = document.getElementsByName("PRC"); |
| hidden_price[0].value = parseInt(hidden_price[0].value) + parseInt(price) |
| } |
| function test_text() { |
| var elem = document.getElementsByName("OPT-01"); |
| var price = elem[0].getAttribute("text"); |
| alert(price); |
| } |
| ``` |
| > 一つのチェックボックス内に複数の(この場合テキストと価格の数値)を設定し |
| inputの中にprice="値"にしてそれを |
| getAttribute("price")にすれば値が取れます。 |
| じゃだめでしょうか |
| あとlabel～/label で囲いidとfor を結びつけるとlabel内の文字をクリックしてもチェックできるようになります。 |
| あとlabel～/label で囲いidとfor を結びつけるとlabel内の文字をクリックしてもチェックできるようになります。 |
| test_price() を追記しました。 |
| 実際に利用するには getElementsByName()を、そのオプションのnameに変えられるようにすればいいです。 |
