プロが教える店舗＆オフィスのセキュリティ対策術

ラジオボタンの制御

解決済

  • 質問者：yumi007
  • 質問日時：
  • 回答数：2件

ラジオボタンの制御について質問をお願い致します。
ラジオボタンを選択することで、
フォーム内の部品を表示と非表示を切り替えるようにしました。
例えば、表示しないと表示するというラジオボタンを２つ配置し、
表示すると言うラジオボタンを選択すると非表示の部品が表示され、
表示しないと言うラジオボタンを選択すると表示されている部品が、
非表示に設定されるようなフームをあった場合に、
フォームオブジェクトのボタンをクリックすることで、
ラジオボタンの表示するが選択され状態にしたり、
ラジオボタンの表示しないが選択された状態にするための、
JavaScriptをどのように作成すれば良いかのアドバイスを、
頂ければ幸いです。

どうぞよろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： yambejp
  • 回答日時：

例示のとおりだとentryChange03()をちょっといじるだけでいけるかも。



function entryChange03(){
document.getElementById('table2').style.display = "none";
document.getElementById('table3').style.display = "none";
document.getElementById('table5').style.display = "none";
document.getElementById('table6').style.display = "none";
document.getElementsByName('radio01')[0].checked=true;
document.getElementsByName('radio02')[0].checked=true;
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

無事、希望通りの機能を実装することが出来ました。
アドバイスありがとうございました。
大変助かりました。

通報する
お礼日時：2012/04/19 18:26

No.1

  • 回答者： yambejp
  • 回答日時：

こういうことですか？



<script>
window.onload=function(){
changeView();
}
try{
document.addEventListener ('click',function(e){clickfunc(e)},true);
}catch(e){
document.attachEvent('onclick',function(e){clickfunc(e)});
}
function clickfunc(e){
var t = (e.srcElement || e.target);
if(t.nodeName=="INPUT" && t.name=="view"){
changeView();
}
var t = (e.srcElement || e.target);
if(t.nodeName=="INPUT" && t.name=="change"){
changeCheck();
}
}
function changeView(){
var flg=document.getElementById("f0").elements["view"][0].checked;
document.getElementById("hoge").style.display=flg?"none":"block";
}
function changeCheck(){
var v=document.getElementById("f0").elements["view"];
if(v[0].checked) v[1].checked=true;
else v[0].checked=true;
changeView();
}
</script>
<form id="f0">
<div>
<input type="radio" name="view" value="0" checked>表示しない
<input type="radio" name="view" value="1">表示する
<input type="button" name="change" value="表示切替">
</div>
</form>
<div id="hoge">
表示
</div>

この回答への補足

さっそくのアドバイスをありがとうございました。
質問内容が分かりづらく申し訳ございません。
ソースを下記に記載しますのでアドバイスを頂ければと存じます。

ソース：
---------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN
Frameset" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<script>
window.onload = loadform;
function loadform (){
entryChange01();
entryChange02();
}
function entryChange01(){
radio = document.getElementsByName('radio01')
if(radio[0].checked) {
document.getElementById('table2').style.display = "none";
document.getElementById('table3').style.display = "none";
}else if(radio[1].checked) {
document.getElementById('table2').style.display = "";
document.getElementById('table3').style.display = "";
}
}
function entryChange02(){
radio = document.getElementsByName('radio02')
if(radio[0].checked) {
document.getElementById('table5').style.display = "none";
document.getElementById('table6').style.display = "none";
}else if(radio[1].checked) {
document.getElementById('table5').style.display = "";
document.getElementById('table6').style.display = "";
}
}
function entryChange03(){
document.getElementById('table2').style.display = "none";
document.getElementById('table3').style.display = "none";
document.getElementById('table5').style.display = "none";
document.getElementById('table6').style.display = "none";
//ここに「回答１」と「回答２」のラジオボタンボタンの値が、「あり」が選択されていた場合に、
//ラジオボタンの値を「あり」から「なし」に戻すためのスクリプトを追記したいと思ってます。
}
</script>
<title>入力フォーム</title>
</head>
<body bgcolor="#ffffcc">
<form name="form01">
<table border="0" cellspacing="0">
<caption>入力フォーム</caption>
<tr id="table1" >
<td width="90" align="left" valign="middle">
<strong>・回答１</strong>
</td>
<td align="left" valign="middle">
<strong>：</strong>
<label><input type="radio" name="radio01" value="" onclick="entryChange01();" checked="checked" />なし</label>
<label><input type="radio" name="radio01" value="" onclick="entryChange01();" />あり</label>
</td>
</tr>
<tr id="table2" >
<td width="90" align="left" valign="middle">
<strong>・回答１-１</strong>
</td>
<td align="left" valign="middle">
<strong>：</strong>
<input type="text "name="text03" size="60">
</td>
</tr>
<tr id="table3" >
<td width="90" align="left" valign="middle">
<strong>・回答１-2</strong>
</td>
<td align="left" valign="middle">
<strong>：</strong>
<input type="text "name="text04" size="60">
</td>
</tr>
<tr id="table4" >
<td width="90" align="left" valign="middle">
<strong>・回答２</strong>
</td>
<td align="left" valign="middle">
<strong>：</strong>
<label><input type="radio" name="radio02" value="" onclick="entryChange02();" checked="checked" />なし</label>
<label><input type="radio" name="radio02" value="" onclick="entryChange02();" />あり</label>
</td>
</tr>
<tr id="table5" >
<td width="90" align="left" valign="middle">
<strong>・回答 2-1</strong>
</td>
<td align="left" valign="middle">
<strong>：</strong>
<input type="text "name="text03" size="60">
</td>
</tr>
<tr id="table6" >
<td width="90" align="left" valign="middle">
<strong>・回答 2-2</strong>
</td>
<td align="left" valign="middle">
<strong>：</strong>
<input type="text "name="text04" size="60">
</td>
</tr>
<tr id="table7" >
<th colspan="2" align="left" valign="middle">
<input type="button" value="回答欄を非表示にする" onClick="entryChange03(this.form);">
<th>
</tr>
</html>

補足日時：2012/04/19 15:02
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

さっそくのアドバイスをありがとうございます。
補足欄の中に追記致しましたのでアドバイスを頂ければ幸いです。

よろしくお願い致します。

通報する
お礼日時：2012/04/19 15:06

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報