【WordPress】ラジオボタンの使い方、Javascriptでの使い方、CSSでラジオボタンをDIV要素に変更する方法

ラジオボタンの基本

下に表示されているのが、ラジオボタンとそのコードです。コードに沿って説明します。

<input type="radio" name="radioselect" checked onclick="java_test()" value="select_1"> 
<label >ラジオボタン1</label>
<input type="radio" name="radioselect" onclick="java_test()" value="select_2">
<label>ラジオボタン2</label>
<input type="radio" name="radioselect" onclick="java_test()" value="select_3">
<label >ラジオボタン3</label>

ラジオボタンの表示

ラジオボタンを表示させるためには、HTMLコードで<Input type =”radio”>のタグを入力します。これでラジオボタンが表示されます。

<input type="radio">

グループ化

ラジオボタン２を選択すると、ラジオボタン１の選択が外れます。そして、ラジオボタン３を選択すると、ラジオボタン2の選択が外れます。

これはラジオボタン１から３までグループ化されているからです。グループ化したものは１つしか選択できません。

ラジオボタンのinputタグ内の「name」を同じ名前にすると、その名前でグループ化することが出来ます。

<input type="radio" name="radioselect">

初期の選択状態

最初にラジオボタン１が選択状態になっています。

これはinputタグ内で 「checked」という記述がされているからです。もし２つ以上checkedが付いていれば、最後のcheckedのラジオボタンが選択状態になります。

<input type="radio" name="radioselect" checked>

Javascript

プログラムの起動

ラジオボタンが選択して、Javascriptのプログラムを動かしたい時は、inputタグ内で「onclick」を記入し、Javascriptの関数を指定します。

<input type="radio" name="radioselect" checked onclick="java_test()"> 

例えば、Javascriptのコードが下記の場合、ラジオボタンをクリックすると、コンソールログに「test」と表示されます。

function java_test(){
console.log("test");
}

どのラジオボタンが押されたかを知る

それぞれのラジオボタンのinputタグの中で「value(値)」を設定します。ラジオボタンそれぞれに、固有のvalueを設定して下さい。

<input type="radio" name="radioselect" checked onclick="java_test()" value="select_1">

Javascript側で下記のコードを実行すると、選択しているラジオボタンの「value」の値がコンソールログに表示されます。これで、どのラジオボタンが選択ボタンが選択されたかわかります。

function java_test(){

    const radiocheck = document.getElementsByName("radioselect");

    var result;

    for(var i = 0; i < radiocheck.length; i++){
        if(radiocheck[i].checked) {
            result = radiocheck[i].value;
            break;
        }
    }
    
    console.log(result);
}

ラジオボタンをDIV（四角）要素に変更する

ラジオボタンを下記のようにDIV要素に変更する方法です。

HTMLとCSSのコードで説明していきます。

HTMLコード

HTMLコードは下記になります。

<div class="radiodiv">
    <input type="radio" name="radioselect1" checked onclick="java_test()" value="select_1" id="radio1"> 
    <label  for="radio1">ラジオボタン1</label>
</div>


<div class="radiodiv">
    <input type="radio" name="radioselect1" onclick="java_test()" value="select_2"  id="radio2">
    <label  for="radio2">ラジオボタン2</label>
</div>
    
<div class="radiodiv">
    <input type="radio" name="radioselect1" onclick="java_test()" value="select_3"  id="radio3">
    <label for="radio3" >ラジオボタン3</label>
</div>

先ほどのコードと違っている点

• divタグが追加
• inputタグの「id」追加
• labelタグの「for」追加

divタグの追加

divタグを追加することにより、ラジオボタンをDIV化することが出来ます。

CSSでの変更になりますので、必ずclass名を付けて下さい。デザインに関しては、後述のCSSの欄で詳細を説明します。

inputタグの「id」追加、labelタグの「for」を追加

inputタグに「id」、labelタグに「for」を追加します。

ここで注意して欲しいのが、「id」と「for」の値を同じにして下さい。同じにしないと、DIVでのボタンの機能が働きませんので注意して下さい。

<input type="radio" name="radioselect1" checked onclick="java_test()" value="select_1" id="radio1"> 
<label  for="radio1">ラジオボタン1</label>

CSSコード

CSSコードは下記になります。

.radiodiv{
    float: left;
  }

.radiodiv>input[type='radio'] {
    display: none;
}

.radiodiv>label {
    position: relative;
    display: inline-block;
    padding: 10px 5px 10px 5px;
    background-color: rgb(255, 255, 255);
    text-align: center;
}

.radiodiv>input:checked+label {
    margin-bottom: -1px;
    background-color: coral;
}

1～３行目：DIVの配列

.radiodiv{
float: left;
}

DIV要素を横に並べます。この指定をしていないと縦方向にDIV要素が出来てしまいます。

５～７行目：ラジオボタンを消す

.radiodiv>input[type='radio'] {
display: none;
}

これは.radiodivのクラス内のラジオボタンのみを削除する指令になります。

もし他にラジオボタンを使用していても、.radiodivのクラスでなければラジオボタンは消えません。

９～１６行目：チェックされていない項目

チェックされていない項目の表示状態になります。

１８～２１行目：チェックされている項目

チェックされている項目の表示状態になります。

ラジオボタンが表示されなくなるので、どこが選択されているかを視覚的に知る為に、チェックされている項目、されていない項目の表示状態のbackground-colorを必ず変更して下さい。

まとめ

いかがだったでしょうか。

ラジオボタンの仕組み、基本的な使用法が分かっていただけたでしょうか。

CSSを利用すれば、ラジオボタンがDIV要素になり、よりデザイン性のあるラジオボタンが作成出来ます。是非試してみて下さい。