jQueryでデータ属性を取得

Question

私はdata-colorを受け取り、隠し入力フィールドのvalueの中に出力したいと思います。これは、ラジオボタンがチェックされた場合に発生します。

どうすればいいですか？

<input type="hidden" id="color" name="color" value=""/> 
<input type="radio" id="radio1" name="radio" value="" data-color="option1"> 
<label for="radio1"> 
option1 
</label> 
<input type="radio" id="radio1" name="radio" value="" data-color="option2"> 
<label for="radio1"> 
option2 
</label> 

Answer 1

あなたがHTMLElement datasetを使用することができます。

$(':radio').filter((i, e) => {return $(e).data('color')}) 

私の抜粋：あなたはjavascriptを書かれているされて

$(function() { 
 
    $(':radio').filter((i, e) => {return $(e).data('color')}).on('change', function(e) { 
 
    $('#color').val(this.dataset.color); 
 
    console.log("$('#color').val('" + this.dataset.color + "')"); 
 
    }) 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<input type="hidden" id="color" name="color" value=""/> 
 
<input type="radio" id="radio1" name="radio" value="" data-color="option1"> 
 
<label for="radio1"> 
 
    option1 
 
</label> 
 
<input type="radio" id="radio1" name="radio" value="" data-color="option2"> 
 
<label for="radio1"> 
 
    option2 
 
</label>

Answer 2

注：私はあなたが物事が働いて見ることができるだけので、代わりにhiddenの#color入力textを作りました。私はまた、両方のラジオボタンに共通のクラスを与え、それらに一意のIDを与えました。 （ページのすべてのHTML要素には、固有のIDを持っている必要があります。）

$(function() { 
 
    $('.color-button').change(function (e) { 
 
    e.preventDefault(); 
 
    $('#color').val($('.color-button:checked').data('color')); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="color" name="color" value=""/> 
 

 

 
<input type="radio" id="radio1" class="color-button" name="radio" value="" data-color="option1"> 
 
<label for="radio1"> 
 
option1 
 
</label> 
 

 
<input type="radio" id="radio2" class="color-button" name="radio" value="" data-color="option2"> 
 
<label for="radio2"> 
 
option2 
 
</label>