ラジオボタン選択毎に別ページへ飛ばすものを複数設置したい

前提

Javascriptはコピペで使用するくらいの理解度です。
ラジオボタンでの選択肢ごとに別ページへ飛ばすところまでは出来たのですが
複数設置すると上手く動かずで、ご相談させていただきたいです。

実現したいこと

ラジオボタンでの選択肢ごとに別ページへ飛ばす。
上記条件を1ページ内に複数設定したい。
ショッピングカートを複数設置するイメージです。

該当のソースコード

<script type="text/javascript">
function jump(){
    var flag = 0;
    for(i=0; i<document.forms[0].url.length; i++){
        if(document.forms[0].url[i].checked){
            flag = 1;
            window.location.href = document.forms[0].url[i].value;
        }
    }
    if(flag == 0){
        alert('選択されていません。');
    }
}
</script> 


<form>
  <input type="radio" name="url" value="https://www.0001.html" id="red">
  <label for="red">カラー：赤（S）</label>
  <input type="radio" name="url" value="https://www.0002.html" id="bk">
  <label for="bk">カラー：黒（S）</label>
  <input type="button" value="カートに入れる" onClick="jump();">
</form>

<form>
  <input type="radio" name="url" value="https://www.0003.html" id="red">
  <label for="red">カラー：赤（M）</label>
  <input type="radio" name="url" value="https://www.0004.html" id="bk">
  <label for="bk">カラー：黒（M）</label>
  <input type="button" value="カートに入れる" onClick="jump();">
</form>

試したこと

buttonが1つだけなら問題ないのですが、2つ目からリンク先が変になるor選択されていませんのコメントが出てしまいます。
分かりにくい説明で申し訳ございません。
もしお分かりになる方がおりましたらお力添えいただけると大変ありがたいです。
どうぞよろしくお願いいたします。

hakork

2022/07/25 09:11

お二人ともありがとうございます！どちらも試してみたのですがonClickが発火しないようです。 type="submit"にすると選択したvalueは返ってきているようなのですが… 貴重なお時間をいただいたのに申し訳ございません。

行動規範の内容に同意します

回答2件

引数で forms のインデックスを渡すのが簡単そう。

html
1<form>
2  <input type="radio" name="url" value="https://www.0001.html" id="red">
3  <label for="red">カラー：赤（S）</label>
4  <input type="radio" name="url" value="https://www.0002.html" id="bk">
5  <label for="bk">カラー：黒（S）</label>
6  <input type="button" value="カートに入れる" onClick="jump(0);">
7</form>
8
9<form>
10  <input type="radio" name="url" value="https://www.0003.html" id="red">
11  <label for="red">カラー：赤（M）</label>
12  <input type="radio" name="url" value="https://www.0004.html" id="bk">
13  <label for="bk">カラー：黒（M）</label>
14  <input type="button" value="カートに入れる" onClick="jump(1);">
15</form>

is
1function jump(n){
2    var flag = 0;
3    for(i=0; i<document.forms[n].url.length; i++){
4        if(document.forms[n].url[i].checked){
5            flag = 1;
6            window.location.href = document.forms[0].url[i].value;
7        }
8    }
9    if(flag == 0){
10        alert('選択されていません。');
11    }
12}