jQuery チェックしたラジオボタンの値を、テキストフィールドに反映させる方法

ラジオボタンでチェックさせ、その値を別のテキストフィールドに反映させる方法。

例えば、メールアドレス入力のときに@以降を選択させることができる。

<input type="email" name="your-email">

<p>※@以降を以下から選択できます。</p>
<ul class="addressList">
  <li><label><input type="radio" name="addressSelect" value="" checked>選択なし</label></li>
  <li><label><input type="radio" name="addressSelect" value="@docomo.ne.jp">@docomo.ne.jp</label></li>
  <li><label><input type="radio" name="addressSelect" value="@ezweb.ne.jp">@ezweb.ne.jp</label></li>
  <li><label><input type="radio" name="addressSelect" value="@softbank.ne.jp">@softbank.ne.jp</label></li>
  <li><label><input type="radio" name="addressSelect" value="@yahoo.co.jp">@yahoo.co.jp</label></li>
  <li><label><input type="radio" name="addressSelect" value="@gmail.com">@gmail.com</label></li>
</ul>

<p>※@以降を以下から選択できます。</p>

<li><label><input type="radio" name="addressSelect" value="@docomo.ne.jp">@docomo.ne.jp</label></li>

<li><label><input type="radio" name="addressSelect" value="@ezweb.ne.jp">@ezweb.ne.jp</label></li>

<li><label><input type="radio" name="addressSelect" value="@softbank.ne.jp">@softbank.ne.jp</label></li>

<li><label><input type="radio" name="addressSelect" value="@yahoo.co.jp">@yahoo.co.jp</label></li>

<li><label><input type="radio" name="addressSelect" value="@gmail.com">@gmail.com</label></li>

</ul>

$(function(){
    var addressSelect = $('input[name="addressSelect"]');
    var yourEmail = $('input[name="your-email"]');

    addressSelect.change(function(){
        var selectVal = $(this).val();
        var getAddressData = yourEmail.val();
        var posData = getAddressData.indexOf('@');
        
        if(posData < 0) {
            addressData = getAddressData;
        } else {
            addressData = getAddressData.substring(0,posData);
        }
        yourEmail.val(addressData + selectVal);
    });
});

$(function(){

var addressSelect = $('input[name="addressSelect"]');

var yourEmail = $('input[name="your-email"]');

addressSelect.change(function(){

var selectVal = $(this).val();

var getAddressData = yourEmail.val();

var posData = getAddressData.indexOf('@');

if(posData < 0) {

addressData = getAddressData;

} else {

addressData = getAddressData.substring(0,posData);

}

yourEmail.val(addressData + selectVal);

});

８行目の

var posData = getAddressData.indexOf('@');

1	var posData = getAddressData.indexOf('@');

で、テキストフィールド内の@以降の文字列を取得。

if(posData < 0) {
    addressData = getAddressData;
} else {
    addressData = getAddressData.substring(0,posData);
}

if(posData < 0) {

addressData = getAddressData;

} else {

addressData = getAddressData.substring(0,posData);

}

もし＠以降に文字列があれば、＠までの文字列を取得する。
＠以降に文字列がなければ、全ての文字列を取得する。

これにより、例えば

hogehoge@gmail.com

と既に入力していても、@以降のみを変更することが可能。

そんな処理は必要なく、ただ反映させたいだけであれば上記をまるっと削除し、

$(function(){
    var addressSelect = $('input[name="addressSelect"]');
    var yourEmail = $('input[name="your-email"]');

    addressSelect.change(function(){
        var selectVal = $(this).val();
        var getAddressData = yourEmail.val();

        yourEmail.val(getAddressData + selectVal);
    });
});