回答編集履歴

1 test_price() を追記しました。

退会済みユーザー

退会済みユーザー

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に変えられるようにすればいいです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る