チェックボックスから特定の数だけチェックさせ、そのvalue値をパラメータとしてリンク先に渡す方法です。
var itemNumで個数を設定。この個数以上、もしくはこの個数以下チェックされていてもアラートを表示させます。
チェックボックスのvalue値をパラメータとして連結させ、リンク先に渡します。
リンク先はjmpURLで設定します。
■Javascriptソース
var itemNum = 3; // 選択する個数を設定
function check() {
if (document.myform.elements['flag[]'].length) {
count = 0;
for (var i=0;i
}
}
if (count == itemNum) {
var jmpURL = "./itemVar?item1=" + document.myform.elements[0].value + "&item2=" + document.myform.elements[1].value + "&item3=" + document.myform.elements[2].value;
window.location.href= jmpURL;
return false;
} else {
var artTxt = "商品は必ず" + itemNum + "個チェックしてください。"; alert(artTxt);
return false;
}
}
}
if (document.myform.elements['flag[]'].length) {
count = 0;
for (var i=0;i
}
}
if (count == itemNum) {
var jmpURL = "./itemVar?item1=" + document.myform.elements[0].value + "&item2=" + document.myform.elements[1].value + "&item3=" + document.myform.elements[2].value;
window.location.href= jmpURL;
return false;
} else {
var artTxt = "商品は必ず" + itemNum + "個チェックしてください。"; alert(artTxt);
return false;
}
}
}
■HTMLソース
<p>メニューからご希望の3つをお選びください。</p>
<form id="myform" name="myform" method="post" action="" onsubmit="return check()">
<ul>
<li><input type="checkbox" name="flag[]" value="itm1" />塩ラーメン</li>
<li><input type="checkbox" name="flag[]" value="itm2" />みそラーメン</li>
<li><input type="checkbox" name="flag[]" value="itm3" />しょうゆラーメン</li>
<li><input type="checkbox" name="flag[]" value="itm4" />チャーシューメン</li>
<li><input type="checkbox" name="flag[]" value="itm5" />タンタンメン</li>
</ul>
<p>
<input type="submit" name="Submit" value="送信" />
</p>
</form>
<form id="myform" name="myform" method="post" action="" onsubmit="return check()">
<ul>
<li><input type="checkbox" name="flag[]" value="itm1" />塩ラーメン</li>
<li><input type="checkbox" name="flag[]" value="itm2" />みそラーメン</li>
<li><input type="checkbox" name="flag[]" value="itm3" />しょうゆラーメン</li>
<li><input type="checkbox" name="flag[]" value="itm4" />チャーシューメン</li>
<li><input type="checkbox" name="flag[]" value="itm5" />タンタンメン</li>
</ul>
<p>
<input type="submit" name="Submit" value="送信" />
</p>
</form>
コメントする