【JavaScript】チェックボックスにチェックを入れ、画像ボタンAまたはBを押すと、それぞれ別のページに進む、というJavaScriptを教えてください。

(チェックを入れないと、「チェックを入れてください」などの警告が出て、画面が進まない、という感じで)
ボタンが2つあること、画像であることで、初心者の私はすっかり躓いています。
よろしくお願いいたします。
----------
申し訳ないですが、
「ここに例がたくさんある」
「画像ボタンじゃなくてラジオボタンなら」
などの回答はご遠慮いただきたく…。
初心者なので、そのものズバリのスクリプトを回答(またはURLを)いただけるとうれしいです。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:
  • 終了:--
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答4件)

id:aki73ix No.1

回答回数5224ベストアンサー獲得回数27

ポイント10pt

<HTML>

<HEAD>

<BASE HREF=”http://nifberry.727.net/”>

</HEAD>

<BODY>

<!-- まずフォームに名前を付けます -->

<form name=”form1”>

<!-- CheckBoxにも名前を付けます -->

<input name=”check1” type=”checkbox”>遊びに行く


<!-- 画像ボタンにも名前を付けます

onMouseOver カーソルが上に来た時のイベント

onMouseOut カーソルがはみ出た時のイベント

onMouseDown ボタンを押した時のイベント

onMouseUp ボタンを離したときのイベント

Bupの最初のパラメータが画像の種類

2つ目のパラメータが1の時は普通の画像2の時は、押した時の画像です

-->

<img name=”hk_button” src=”/test/hoiku.gif” height=”76” width=”252” onMouseOver=”Bup(1,1)”


onMouseOut=”Bup(1,1)” onMouseDown=”Bup(1,2)” onMouseUp=”Bup(1,1)”>

<img name=”ak_button” src=”/naver/akiinsky.gif” height=”76” width=”252” onMouseOver=”Bup(2,1)”


onMouseOut=”Bup(2,1)” onMouseDown=”Bup(2,2)” onMouseUp=”Bup(2,1)”>

</form>

</BODY>

<script language=”javascript”>

<!-- //

function Bup(is,img){

if(img==1){

if(is==1){

//通常の画像1 images の後にボタンの名前が入ります

document.images(”hk_button”).src=’/test/hoiku.gif’;

}

else{

//通常の画像2 images の後にボタンの名前が入ります

document.images(”ak_button”).src=’/naver/akiinsky.gif’;

}

}

else{

// ここで、チェックが入っているか確認します、フォームとチェックボックスの名前がココに入ります

if(!document.forms[”form1”].elements[”check1”].checked){

alert(”チェックされてません”);

// 処理しないで戻ります

return;

}

if(is==1){

//押している画像1 images の後にボタンの名前が入ります

document.images(”hk_button”).src=’/test/hoiku2.gif’;

// ジャンプしますURL2

location.href=”http://d.hatena.ne.jp/hoiku/”;

}

else{

//押している画像2 images の後にボタンの名前が入ります

document.images(”ak_button”).src=’/naver/akiinsky2.gif’;

// ジャンプしますURL2

location.href=”http://d.hatena.ne.jp/aki73ix/”;

}

}

}

// -->

</script>

</HTML>


こんなかんじかな?

id:ku__ra__ge No.2

回答回数118ベストアンサー獲得回数40

ポイント10pt

以下をテキストファイルに貼り付けて、ファイル名を「xxx.html」にすればで出来ます。

あとは、適当に画像や飛び先を変更してください。


<html>

<head>

<script languarge=”JavaScript”>

<!--

function gotoNextPage(){

for(var i=0;i<document.test_form.test_radio.length;i++){

if(document.test_form.test_radio[i].checked){

if(i==0) location.href=”http://www.google.ne.jp/”;

if(i==1) location.href=”http://www.yahoo.co.jp/”;

return;

}

}

alert(’選択されていません。’);

}

-->

</script>

</head>

<body>

<form name=”test_form”>

google<input type=”radio” name=”test_radio”> yahoo<input type=”radio” name=”test_radio”>


</form>


<img src=”img1” onClick=”gotoNextPage()” alt=”画像ボタンA”>


<img src=”img1” onClick=”gotoNextPage()” alt=”画像ボタンB”>


</body>

</html>

id:schie

ありがとうございます。

言葉足らずで申し訳ありませんでした。意図したのは、

「チェックボックスは一つ」で、

「チェックが入っていると、Aを押すとurlAに飛び、Bを押すとurlBに飛ぶ」

といった感じです。

(ボタンA,Bに違うURLが割り当てられている感じ?)

2005/07/15 00:30:40
id:dungeon-master No.3

回答回数571ベストアンサー獲得回数40

ポイント55pt

<html>

<head><title>test</title>

<script language=’JavaScript’>

function examcb(){

if(F1.C1.checked || F1.C2.checked || F1.C3.checked ){

return true;

}else{

alert( ”どれかCheckして” );

return false;

}

}

</script>

</head>


<BODY>

<form name=F1 meshod=POST onSubmit=’return examcb()’>

<input type=checkbox name=’C1’>

<input type=checkbox name=’C2’>

<input type=checkbox name=’C3’>

<input type=image src=”bks0.gif” onClick=’F1.action=”http://www.asahi.com/”’>

<input type=image src=”bks1.gif” onClick=’F1.action=”http://www.hatena.ne.jp/list”’>

</form>

</body>


フォーム内の画像ボタンのonClickハンドラで、個別のURLでactionプロパティを書き換え、

その直後に動作する、onSubmitハンドラでチェックボックスの状態を評価しています。

falseを返せばsubmitはされません。

チェックする関数の内容はフォームに合わせて直してください。

id:schie

詳しい解説までありがとうございます!

勉強になります。

うまく動きました。

2005/07/15 00:36:45
id:angelsong No.4

回答回数94ベストアンサー獲得回数0

ポイント5pt

<form name=”form”>

<input type=”button” onClick=”btn_a_onclick();”>

<input type=”button” onClick=”btn_b_onclick();”>

<input type=”checkbox” name=”check_a”>

<input type=”checkbox” name=”check_b”>

</form>

等と、画像ボタン側にonClickイベントを仕込んでおいてJavaScriptで、

function btn_a_onclick() {

if (!document.form.check_a && !document.form.check_b) {

alert(”どちらかをチェックしてください”);

}

if (document.form.check_a) {

location.href = ”http://aaa.com”;

}

if (document.form.check_b) {

location.href = ”http://bbb.com”;

}

}

などと書いてあげると上手く動くのではないでしょうか。

id:schie

ありがとうございます。

うーん、やってみたのですが、アラートが出ない…??

あとは、ボタンが画像だったら嬉しかったですね。

でも勉強になりました。ありがとうございます。

2005/07/15 00:41:43

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません