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

初心者で、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>

質問者からの補足コメント

• 

  下記のように変更しましたが、起動しませんでした。
  
  <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>

    補足日時：2016/06/02 10:58

No.3 回答者： Ogre7077 回答日時： 2016/06/02 19:02

<script>

window.addEventListener('DOMContentLoaded', ev => {
_ var form = document.getElementById('abcde'), items = form.elements['g'], i, v = '';
_ for (i = 0; i < items.length; i++) if (items[i].checked) v = items[i].value;
_ form.dataset.prevG = v; // 変更前の値を form に覚えさせる
_ form.addEventListener('change', event => {
_ _ var t = event.target, f = t.form; if (t.name != 'g' || !t.checked) return;
_ _ var v = f.dataset.prevG;
_ _ if (v && v != t.value) alert('change!'); // 変更前の値があり、変更前後で異なるなら alert
_ _ f.dataset.prevG = t.value; // 次回のために、変更前の値を更新
_ }, false);
}, false);
</script>

<form id=abcde> radio は form 配下でなければ意味が無い
<input type=radio name=g value=1>item1
<input type=radio name=g value=2>item2
<input type=radio name=g value=3>item3
</form>

この回答へのお礼

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

下記のように書きましたらできました。
<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>

お礼日時：2016/06/06 16:11

No.2 回答者： zircon3 回答日時： 2016/06/02 11:33

書かれているスクリプトを実際に動かすとどうなりましたか？

　それが分かっていないのだとご自身の理解を進めるための出発点に立っていないことになります。
　で。

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

　これは何のためにあって、どのタイミングで各変数に値がセットされるでしょう？
　そして初期値には何が入り、その後何のタイミングでどういう値が入るでしょう？
　書かれたjavascript関数では初期値としてnullストリングを期待しているようですが。。。

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

　ラジオボタンのnameを全て変えるのはなぜでしょう？
　そうした場合、HTMLとして期待する仕様でラジオボタンの選択が出来ますか？　onClickの無いHTMLだけの画面で確認されていますか？

　ちなみにラジオボタンの選択が変更された時にアラートを出したいのですから、拾わねばならないイベントはClickではなくChangeではないでしょうか？
　つまりonChange。。。

　で。onClickにしろ、onChangeにしろ、javascript関数が呼ばれた時は既にラジオボタンが選択された後ですから、最初はどれも選択されていない状態の画面が表示されるのでしたら、必要なのは「初回のクリックなのか、2回目以降のクリックなのかを見分けるための変数」のはずです。その変数がある初期値を持っていて、ラジオボタンのいずれかがクリックされるとそれとは異なる値がセットされる。クリックされるたびに同じ値がセットされるのでもよいと思います。

参考まで。

この回答へのお礼

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

下記のように書きましたらできました。
<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>

お礼日時：2016/06/06 16:11

No.1 回答者： yambejp 回答日時： 2016/06/02 11:00

ラジオボタンなんだから同じnameつかわないと

こんな感じでどうでしょ？

<script>
var pre_s=-1;
function goods(obj){
var f=obj.form;
var n=obj.name;
var s=null;
for(var i=0;i<f.elements[n].length;i++){
if(f.elements[n][i].checked){
s=i;
}
}
if(pre_s>=0 && pre_s!=s){
alert("change!");
}
pre_s=s;
}
</script>
<form>
<table>
<td><label>
<input type="radio" id="goods1" name="goodsx" value="1" onclick="return goods(this)">
<span>goods1</span></label>
<label>
<input type="radio" id="goods2" name="goodsx" value="2" onclick="return goods(this)">
<span>goods2</span></label>
<label>
<input type="radio" id="goods3" name="goodsx" value="3" onclick="return goods(this)">
<span>goods3</span></label>
</td>
</table>
</form>

この回答へのお礼

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

下記のように書きましたらできました。
<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>

お礼日時：2016/06/06 16:11