Get individual value from radio button on array use JQuery

Question

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

FluffyKitten · Accepted Answer · 2020-09-03 03:39:24Z

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>

PeterKA · Accepted Answer · 2020-09-03 03:47:16Z

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>

Collectives™ on Stack Overflow

Get individual value from radio button on array use JQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related