javascript - 使用 JQuery 从数组上的单选按钮获取单个值

Question

现在我正在做一些 PHP 项目，结合 JQuery 来制作单选按钮。我是 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());
    
    });
 });

所以我关注的是，当我点击单选按钮时，我能够获得单独的属性名称。从该属性名称，我想得到的值(value)。但不起作用。

我能做到吗？

请帮忙

Answer 1

差不多了，可以这样获取值:

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>