現在、ラジオ ボタンの JQuery と組み合わせた PHP プロジェクトを行っています。 JQuery コードは初めてです。今私はラジオボタンの配列を作成しています。いずれかのラジオボタンをクリックしたときに個別の値を取得したいと考えています。
これが私が試しているコードです。それ以前は。このリンク https://repl.it/@ferdinandgush/get-value-radio-button でサンプルを作成しました。上部の RUN ボタンを押すだけでテストできます。
html
<table class="tg">
<thead>
<tr>
<th class="tg-qh0q">Item</th>
<th class="tg-qh0q">Price</th>
<th class="tg-qh0q">Deal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">Book</td>
<td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][0]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][0]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pencil</td>
<td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][1]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][1]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pen</td>
<td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][3]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][3]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">spidol</td>
<td class="tg-0lax">$ 15 <input type="hidden" name="itemprice" value="15"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][4]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][4]" value="no" >No
</td>
</tr>
</tbody>
</table>
JS
$(function() {
$('.radioDeal').on('input', function(){
console.log($(this).attr("name"));
var name = $(this).attr("name");
console.log($('input[name="+ name +"]:checked').val());
});
});
私が注目しているのは、ラジオ ボタンをクリックすると、個々の属性名を取得できることです。その属性名から値を取得したいと思います。しかし機能しません。
それはできますか?
助けてください
ほぼ完成です。次のように値を取得できます。
var checkedvalue = $('input[name="'+ name +'"]:checked').val();
実際の例:
$(function() {
$('.radioDeal').on('input', function(){
var name = $(this).attr("name");
var checkedvalue = $('input[name="'+ name +'"]:checked').val();
console.log(name+' = '+checkedvalue);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tg">
<thead>
<tr>
<th class="tg-qh0q">Item</th>
<th class="tg-qh0q">Price</th>
<th class="tg-qh0q">Deal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">Book</td>
<td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][0]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][0]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pencil</td>
<td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][1]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][1]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pen</td>
<td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][3]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][3]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">spidol</td>
<td class="tg-0lax">$ 15 <input type="hidden" name="itemprice" value="15"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][4]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][4]" value="no" >No
</td>
</tr>
</tbody>
</table>
0
変更イベントは、状態が未チェックからチェックに変化したときにトリガーされるため、チェックしたばかりの無線を参照するため、使用するのに理想的なイベントです。
$('.radioDeal').on('change', function() {
console.log( `${this.name} = ${this.value}` );
});
デモ
$(function() {
$('.radioDeal').on('change', function() {
console.log( `${this.name} = ${this.value}` );
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tg">
<thead>
<tr>
<th class="tg-qh0q">Item</th>
<th class="tg-qh0q">Price</th>
<th class="tg-qh0q">Deal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">Book</td>
<td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][0]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][0]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pencil</td>
<td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][1]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][1]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pen</td>
<td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][3]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][3]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">spidol</td>
<td class="tg-0lax">$ 15 <input type="hidden" name="itemprice" value="15"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][4]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][4]" value="no" >No
</td>
</tr>
</tbody>
</table>
0