チェックボックスをクリックした際、自動的に他の値も

質問

■チェックボックスをクリックした際、自動的に他の値も追加したい

下記のようなチェックボックスがあった際に、
<input type="checkbox" name="hoge[]" value="1" />ホゲ　
<input type="checkbox" name="piyo[]" value="1" />ピヨ　
<input type="checkbox" name="puyo[]" value="1" />プヨ　

ホゲをクリックしたら、value="1"になるかと思うのですが、
このvalue部分を動的に生成することはできるでしょうか？

例えば、ホゲをクリックしたら(ホゲをクリックした時だけ)、
自動的に、
<input type="checkbox" name="hoge[]" value="1" />
<input type="checkbox" name="hoge[]" value="2" />
<input type="checkbox" name="hoge[]" value="3" />
<input type="checkbox" name="hoge[]" value="4" />
<input type="checkbox" name="hoge[]" value="5" />
<input type="checkbox" name="hoge[]" value="6" />
<input type="checkbox" name="hoge[]" value="7" />
<input type="checkbox" name="hoge[]" value="8" />
<input type="checkbox" name="hoge[]" value="9" />
をクリックしたのと同じ処理が走るよう、スクリプトで書くには、
どうすればよいでしょうか？

回答No.2

yambejp · ベストアンサー

じゃ、ほかのcheckboxを表示しなければいいのでは？

<form>
<input type="checkbox" name="hoge[]" value="1" onclick="check(this);" />
<div style="display:none">
<input type="checkbox" name="hoge[]" value="2" />
<input type="checkbox" name="hoge[]" value="3" />
<input type="checkbox" name="hoge[]" value="4" />
<input type="checkbox" name="hoge[]" value="5" />
<input type="checkbox" name="hoge[]" value="6" />
<input type="checkbox" name="hoge[]" value="7" />
<input type="checkbox" name="hoge[]" value="8" />
<input type="checkbox" name="hoge[]" value="9" />
</div>
<input type="submit" value="go" />
</form>

もちろん、チェックすたびに動的につくったり、消したりしてもいいですが
今回のように条件がはっきりしているなら見せたり消したりで
十分なような気がします

お礼

回答ありがとうございました。

＞ほかのcheckboxを表示しなければいいのでは？
そうですね。
とりあえず、それでうまくいきましたー

回答No.1

yambejp

状況がよくわかりませんがこういうことですか？
（それとも動的にcheckboxを作りたいということかな・・）

<script>
function check(obj){
var f=obj.form;
for(var i=0;i<f.length;i++){
if(f[i].name==obj.name && f[i]!=obj){
f[i].checked=obj.checked;
}
}
}
</script>

<form>
<input type="checkbox" name="hoge[]" value="1" onclick="check(this);" />
<input type="checkbox" name="hoge[]" value="2" />
<input type="checkbox" name="hoge[]" value="3" />
<input type="checkbox" name="hoge[]" value="4" />
<input type="checkbox" name="hoge[]" value="5" />
<input type="checkbox" name="hoge[]" value="6" />
<input type="checkbox" name="hoge[]" value="7" />
<input type="checkbox" name="hoge[]" value="8" />
<input type="checkbox" name="hoge[]" value="9" />
</form>

補足

回答ありがとうございます。

やりたいことは、
動的にcheckboxを作りたい、に近いのですが、

具体的には、
name="hoge[]" のチェックボックスを1つだけ用意して、
<input type="checkbox" name="hoge[]" value="1" />

クリックをすると、
value="1"からvalue="9"までの値を取得したい、です（←ここを動的に？したいです）

値は動的に取得したいのですが、
チェックボックスの見た目は、あくまで1つだけ、という風に、したいです