63390


HTMLのformで使うラジオボタンについて、グループ分けしたときに同じものを選択できないようにしたいのですが、そのときJavascriptを使わない方法を探しています。

例えば、好きな果物と嫌いな果物を選択する場合にこのようにしたとします。

[code]

    <form>
      好きな果物
      <input type='radio' name='like' value='0'>りんご
      <input type='radio' name='like' value='1'>みかん
      <input type='radio' name='like' value='2'>いちご
    
      嫌いな果物
      <input type='radio' name='dislike' value='0'>りんご
      <input type='radio' name='dislike' value='1'>みかん
      <input type='radio' name='dislike' value='2'>いちご
    </form>
    
    
[/code]

これで好きな果物を一つ、嫌いな果物を一つ選択できるわけですが、このとき同時に同じ果物は選択できないようにしたいのです。  
例えば、好きな果物=りんご、嫌いな果物=りんご、とはできないようにしたいのですが、それをjavascriptを使わずhtmlだけで行う方法はないでしょうか。


CC BY-SA 4.0
2020-02-26T10:36:31.590
63374
2020-02-27T00:23:39.920
34267
question
html form
HTMLのラジオボタンで同じものを選択できないようにしたい


HTMLのradioの特性上  
・radio は同じname属性の中から一つだけ選択できる。  
・name属性は一つだけ設定する

今回の要件では  
・好きな果物を「りんご」「みかん」「いちご」から一つ  
・嫌いな果物を「りんご」「みかん」「いちご」から一つ  
and  
・果物は「好き」か「嫌い」か「どれでもない」から一つ

という2次元の択一選択制御が必要になるため提示の選択肢でHTMLだけで制御するには難しそうです。  
ちょっと見た目が無様ですが場合分けをすべて列挙して1次元にするしかないと思います。

[code]

    <form>
      <input type='radio' name='likes_and_dislikes' value='0'>好きな果物はりんご、嫌いな果物はみかん
      <input type='radio' name='likes_and_dislikes' value='1'>好きな果物はりんご、嫌いな果物はいちご
      <input type='radio' name='likes_and_dislikes' value='2'>好きな果物はみかん、嫌いな果物はりんご
      <input type='radio' name='likes_and_dislikes' value='3'>好きな果物はみかん、嫌いな果物はいちご
      <input type='radio' name='likes_and_dislikes' value='4'>好きな果物はいちご、嫌いな果物はりんご
      <input type='radio' name='likes_and_dislikes' value='5'>好きな果物はいちご、嫌いな果物はみかん
    </form>
    
[/code]


CC BY-SA 4.0
2020-02-27T00:23:39.920
63390
2020-02-27T00:23:39.920
22665
63374
answer