人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: schie
●カテゴリ:ウェブ制作
✍キーワード:JavaScript URL スクリプト ズバリ チェックボックス
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● aki73ix
●10ポイント

http://nifberry.727.net/test/hatena130.htm

<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>


こんなかんじかな?


2 ● ku__ra__ge
●10ポイント

以下をテキストファイルに貼り付けて、ファイル名を「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>

◎質問者からの返答

ありがとうございます。

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

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

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

といった感じです。

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


3 ● dungeon-master
●55ポイント

<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はされません。

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

◎質問者からの返答

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

勉強になります。

うまく動きました。


4 ● angelsong
●5ポイント

<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”;

}

}

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

◎質問者からの返答

ありがとうございます。

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ