ラジオボタンのalertのコントロール

Question

初心者で、javascriptでラジオボタンが選択されないときはalertを出さず、すでに選択されている場合で、違うボタンに変更するときにはalertを出すにはどう書けばよいか教えて頂けますでしょうか。

下記は書いてみたコードです。

<script> var goods1=document.getElementById("goods1"); var goods2=document.getElementById("goods2"); var goods3=document.getElementById("goods3"); function janid(){ if (goods1.value=="" && goods2.value=="" && goods3.value==""){ return false; }else { alert("商品の種類を変更しました"); } } </script> <table> <td><label> <input type="radio" id="goods1" name="goods1" value="1" onClick="return goods()"> <span>商品１</span></label> <label> <input type="radio" id="goods2" name="goods2" value="2" onClick="return goods()"> <span>商品２</span></label> <label> <input type="radio" id="goods3" name="goods3" value="3" onClick="return goods()"> <span>商品３</span></label> </td> </table>

Comments

[coco_bauer]

質問のHTMLでは、ラジオボタンの正しい記述になっていません。ラジオボタンというのは複数のマークできるボタンを組にしたもので、その中で１つだけを選択することができるボタンです。別のボタンがくりっくすされると、そのボタンがマークされて、以前にマークされていたボタンのマークは消えます。同じnameの値をもつボタンが組になります。質問のコードのように、個々のラジオボタンのnameが異なっていてはラジオボタンとして機能しません。

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

Answer 1

まず、onClickで呼び出している関数が存在しません。
あなたが定義した関数名はjanidですが、onClickで呼び出している関数はgoodsです。

<input type="radio" id="goods1" name="goods1" value="1" onClick="return janid()"> 

<input type="radio" id="goods2" name="goods2" value="2" onClick="return janid()"> 

<input type="radio" id="goods3" name="goods3" value="3" onClick="return janid()"> 

次に、ラジオボタンとしてグルーピングできていないので、
商品１、商品２、商品３すべてにチェックマークがつけれる状態になっています。
ラジオボタンをグルーピングする場合、nameは全て統一しなければいけません。

<input type="radio" id="goods1" name="goods" value="1" onClick="return janid()"> 

<input type="radio" id="goods2" name="goods" value="2" onClick="return janid()"> 

<input type="radio" id="goods3" name="goods" value="3" onClick="return janid()"> 

次に、getElementByIdでそれぞれのラジオボタンのオブジェクトを取得していますが、
ブラウザによってはこのやり方ではnullが入っています。
全体の処理をwindow.onload時に実行する等工夫が必要です。

window.onload = function() {
    // この中に処理を書かないと、IDでオブジェクトを引くことができない可能性がある
}

次に、ラジオボタンの選択状態はvalueでみるのではなくcheckedです。

if (!goods1.checked && !goods2.checked && !goods3.checked){ 

最後に、そもそもonClickはcheckedが切り替わった「後」に呼ばれるので、
そのタイミングで「どれも選択されていない」判定をしても無駄です。
「どれも選択されていない」かどうかを保持する変数を用意する必要があります。

以上のことを踏まえ、以下のように変更してみてはいかがでしょう。

<script> 

var check = function(){
    if(selected) {
        alert("商品の種類を変更しました"); 
    }
    selected = true;
};

var goods1 = null; 
var goods2 = null; 
var goods3 = null;
var selected = false;

window.onload = function(){
    goods1 = document.getElementById("goods1"); 
    goods2 = document.getElementById("goods2"); 
    goods3 = document.getElementById("goods3");
    selected = false;
};
</script>

<table> 
    <td><label> 
        <input type="radio" id="goods1" name="goods" value="1" onClick="check()"> 
        <span>商品１</span></label> 
      <label> 
        <input type="radio" id="goods2" name="goods" value="2" onClick="check()">
        <span>商品２</span></label> 
      <label> 
        <input type="radio" id="goods3" name="goods" value="3" onClick="check()">
        <span>商品３</span></label> 
    </td> 
</table>

Comments

[leoairen]

ご回答、ありがとうございます。
もし仮に商品1が選択されてあって、商品2や3をクリックして再度商品１を選択した場合はalertを出さないようにするにはどうすればよろしいでしょうか。

[masaya_ohashi]

一度でも選択した商品に戻したとき、alertを出さない、ということでしょうか？
そのためには一度選択したものを記憶しておく必要があります。
いまのonClickのやり方だと、なにがクリックされたか不明なので、
addEventListenerを使うやり方に変更する必要があります。
上記をもとにコードを変更してみました。
```

var check = function(){
// 選択したことがあるリストから探す
for(var i=0;i<selected.length;i++) {
var obj = selected[i];
if(obj == this) {
// すでに一度選択したことがある
return;
}
}
// 一度以上選択された
if(selected.length > 0) {
alert("商品の種類を変更しました");
}
// 選択したことがあるリストに追加する
selected.push(this);
};

var goods1 = null;
var goods2 = null;
var goods3 = null;
var selected = [];

window.onload = function(){
goods1 = document.getElementById("goods1");
goods2 = document.getElementById("goods2");
goods3 = document.getElementById("goods3");
selected = [];
goods1.addEventListener("click", check);
goods2.addEventListener("click", check);
goods3.addEventListener("click", check);
};
```

[leoairen]

ご回答、ありがとうございました。

下記のように書きましたらできました。
<script>
var goods1=document.getElementById("goods1");
var goods2=document.getElementById("goods2");
var goods3=document.getElementById("goods3");

function janid(){
if (goods1.checked || goods2.checked || goods3.checked){
return false;
}else {
alert("商品の種類を変更しました");
}
}
</script>

Answer 2

以下のようにするべきだと思います。
ラジオボタンがチェックされているかを取得するにはcheckedプロパティを用います。

var goods1 = document.getElementById("goods1"); 
var goods2 = document.getElementById("goods2"); 
var goods3 = document.getElementById("goods3");

function janid(){ 
    if (!goods1.checked && !goods2.checked && !goods3.checked){ 
        return false; 
    }else if (goods1.checked || goods2.checked || goods3.checked){ 
        alert("商品の種類を変更しました"); 
    } 
} 

HTML

<table> 
<td><label> 
<input type="radio" id="goods1" name="goods" value="1" onClick="return goods()"> 
<span>商品１</span></label> 
<label> 
<input type="radio" id="goods2" name="goods" value="2" onClick="return goods()"> 
<span>商品２</span></label> 
<label> 
<input type="radio" id="goods3" name="goods" value="3" onClick="return goods()"> 
<span>商品３</span></label> 
</td> 
</table>

Comments

[leoairen]

ご回答、ありがとうございました。

下記のように書きましたらできました。
<script>
var goods1=document.getElementById("goods1");
var goods2=document.getElementById("goods2");
var goods3=document.getElementById("goods3");

function janid(){
if (goods1.checked || goods2.checked || goods3.checked){
return false;
}else {
alert("商品の種類を変更しました");
}
}
</script>

Answer 3

そもそもHTMLでのラジオボタンの実装に認識違いがありそうです。
今回のように選択肢が３つある場合、ラジオボタンではどれか一つが選択できるということです。

商品１を選択した状態。
◎商品１ ○商品２ ○商品３

商品２を選択した状態。
○商品１ ◎商品２ ○商品３

そのためにはラジオボタンを同じnameでグループ化する必要があります。
今のコードではnameがそれぞれgoods1～3になっており、グループ化できていないと思います。

Comments

[leoairen]

ご回答、ご指摘、ありがとうございます。
下記のように変更しましたが、起動しませんでした。

<script>
var goods1=document.getElementById("goods1");
var goods2=document.getElementById("goods2");
var goods3=document.getElementById("goods3");

function janid(){
if (goods1.value=="" && goods2.value=="" && goods3.value==""){
return false;
}else if (goods1.value==0 || goods2.value==1 || goods3.value==2){
alert("商品の種類を変更しました");
}
}
</script>

<table>
<td><label>
<input type="radio" id="goods1" name="goods" value="1" onClick="return goods()">
<span>商品１</span></label>
<label>
<input type="radio" id="goods2" name="goods" value="2" onClick="return goods()">
<span>商品２</span></label>
<label>
<input type="radio" id="goods3" name="goods" value="3" onClick="return goods()">
<span>商品３</span></label>
</td>
</table>

[ttyp03]

getElementByIdを使ってるのでidも同じようにgoogsに統一した方がよいですね。

以下の部分は、今回の修正でグループ化されるので、１行になります。
var goods1=document.getElementById("goods1");
var goods2=document.getElementById("goods2");
var goods3=document.getElementById("goods3");
↓
var goods=document.getElementById("goods");

janid()は、前回選択されていたボタンと現在選択されているボタンを比較する形になると思います。
具体的なコードは考えてみてください。

[ttyp03]

ごめんなさい。
idは統一しなくてもよさそうですので、上のgetElementByIdの部分は無視してください。
関数が呼ばれないのは、masaya_ohashiさんの回答通り、関数名が違うからです。

[leoairen]

ご回答、ありがとうございました。

下記のように書きましたらできました。
<script>
var goods1=document.getElementById("goods1");
var goods2=document.getElementById("goods2");
var goods3=document.getElementById("goods3");

function janid(){
if (goods1.checked || goods2.checked || goods3.checked){
return false;
}else {
alert("商品の種類を変更しました");
}
}
</script>