Reputation: 409
now im doing some PHP project combine with JQuery for radio button. Im new for JQuery code. now i making array for radio button. i want to get individual value when i click one of the radio button.
here is the code that i trying. before that. i make a sample on this link https://repl.it/@ferdinandgush/get-value-radio-button. just press RUN button on the top then you able to test it.
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());
});
});
so what im focusing is, i able to get individual attribute name when i click on of the radio button. from that attribute name, i want to get the value. but not work.
do i able to do that?.
please help
Upvotes: 2
Views: 128
Reputation: 24638
Since the change
event triggers when state changes from not checked to checked it is therefore the ideal event to use as the this
refers to the radio
just checked:
$('.radioDeal').on('change', function() {
console.log( `${this.name} = ${this.value}` );
});
DEMO
$(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>
Upvotes: 2
Reputation: 14312
You almost have it, you can get the value like this:
var checkedvalue = $('input[name="'+ name +'"]:checked').val();
Working example:
$(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>
Upvotes: 4