ferdinand
ferdinand

Reputation: 409

Get individual value from radio button on array use JQuery

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

Answers (2)

PeterKA
PeterKA

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

FluffyKitten
FluffyKitten

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

Related Questions