inputRadioObject.valueプロパティ

inputRadioObject.valueは、ラジオボタン(type属性がradioであるinput要素)のvalue属性の値を取得、もしくは、設定するプロパティ。

ラジオボタン(type属性がradioであるinput要素)におけるvalue属性値は、フォーム送信時に送信するデータ(キーと値)における値である。

構文

取得

var $value = $inputElementReference.value;

戻り値

ラジオボタン(type属性がradioであるinput要素)のvalue属性の値。

設定

$inputElementReference.value = "inputElementValue";
inputElementValue
ラジオボタン(type属性がradioであるinput要素)のvalue属性値を指定。

サンプル

ラジオボタンAのvalue属性値:
ラジオボタンBのvalue属性値:

サンプルの動作について

  • 「ラジオボタンAのvalue属性をABCに」ボタンをクリックすると、ラジオボタンAのvalue属性を「ABC」にする。「ラジオボタンAのvalue属性値:」の右横に「ABC」と表示する。
  • 「ラジオボタンAのvalue属性をXYZに」ボタンをクリックすると、ラジオボタンAのvalue属性を「XYZ」にする。「ラジオボタンAのvalue属性値:」の右横に「XYZ」と表示する。
  • 「ラジオボタンBのvalue属性をabcに」ボタンをクリックすると、ラジオボタンBのvalue属性を「abc」にする。「ラジオボタンBのvalue属性値:」の右横に「abc」と表示する。
  • 「ラジオボタンBのvalue属性をxyzに」ボタンをクリックすると、ラジオボタンBのvalue属性を「xyz」にする。「ラジオボタンBのvalue属性値:」の右横に「xyz」と表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setRadio( $id, $value ) {
    var $elementReference = document.getElementById( $id );
    $elementReference.value = $value;
    var $value = $elementReference.value;
    if( $id == "radioA" ){
        document.getElementById( "sampleOutputA" ).innerHTML = $value;
    }else{
        document.getElementById( "sampleOutputB" ).innerHTML = $value;
    }
}
</script>

HTML

<div id="sampleWarp">
    <p>
        <button onclick="setRadio( 'radioA', 'ABC' );">ラジオボタンAのvalue属性をABCに</button>
        <button onclick="setRadio( 'radioA', 'XYZ' );">ラジオボタンAのvalue属性をXYZに</button>
    </p>
    <p>
        <button onclick="setRadio( 'radioB', 'abc' );">ラジオボタンBのvalue属性をabcに</button>
        <button onclick="setRadio( 'radioB', 'xyz' );">ラジオボタンBのvalue属性をxyzに</button>
    </p>
    <p>
        ラジオボタンAのvalue属性値:<span id="sampleOutputA"></span>
        <br />
        ラジオボタンBのvalue属性値:<span id="sampleOutputB"></span>
    </p>
    <p>
        <label><input type="radio" name="radio1" id="radioA" value="ABC"> ラジオボタンA</label>
        <label><input type="radio" name="radio1" id="radioB" value="xyz"> ラジオボタンB</label>
    </p>
</div>

スポンサード リンク

カテゴリー: DOM, input type=radio オブジェクト, JavaScript, リファレンス パーマリンク