Question

我需要检查点击了哪个单选按钮列表，并且点击了发送jQuery ajax调用，此时我有表id plan1，plan2，plan3，用php生成。每个都有一个单选按钮列表，每个jQuery如何才能实现这一点？

这就是我所做的，

$("input[name=\'Plan[packageId]\']:radio").change(function () {
alert("changed triggered");
//calculateAmount();
});

使其可用于动态内容，我可以如下所示，但它不实用，因为我不知道有多少计划。

$("#plan1 input[name=\'Plan[packageId]\']:radio").change(function () {
alert("changed triggered");
//calculateAmount();
}); 

$("#plan2 input[name=\'Plan[packageId]\']:radio").change(function () {
alert("changed triggered");
//calculateAmount();
}); 

$("#plan3 input[name=\'Plan[packageId]\']:radio").change(function () {
alert("changed triggered");
//calculateAmount();
});

如何让它动态化并获得当前点击的单选按钮值

here是JS小提琴

<table id='plan1'>
    <tr>
        <td style="vertical-align: top;">
            <input type="radio" value="1" name="Plan[packageId]">
            <lable>3 Games</lable>
            <br>
            <input type="radio" value="2" name="Plan[packageId]" checked>
            <lable>5 Games</lable>
            <br>
            <input type="radio" value="3" name="Plan[packageId]">
            <lable>10 Games</lable>
            <br>
        </td>
    </tr>
</table>
                <br>
<table id='plan2'>
    <tr>
        <td style="vertical-align: top;">
            <input type="radio" value="1" name="Plan[packageId]">
            <lable>2 Games</lable
            <br>
            <input type="radio" value="2" name="Plan[packageId]" checked>
            <lable>4 Games</lable>
            <br>
            <input type="radio" value="3" name="Plan[packageId]">
            <lable>9 Games</lable>
            <br>
        </td>
    </tr>
</table>
                <br>
<table id='plan3'>
    <tr>
        <td style="vertical-align: top;">
            <input type="radio" value="1" name="Plan[packageId]">
            <lable>4 Games</lable>
            <br>
            <input type="radio" value="2" name="Plan[packageId]" checked>
            <lable>6 Games</lable>
            <br>
            <input type="radio" value="3" name="Plan[packageId]">
            <lable>11 Games</lable>
            <br>
        </td>
    </tr>
</table>

var selectedPlan = $("input[name='Plan[packageId]']:checked").val();
alert(selectedPlan);

<table id='plan1'>
    <tr>
        <td style="vertical-align: top;">
            <input type="radio" value="1" name="Plan[packageId]">
            <lable>3 Games</lable>
            <br>
            <input type="radio" value="2" name="Plan[packageId]" checked>
            <lable>5 Games</lable>
            <br>
            <input type="radio" value="3" name="Plan[packageId]">
            <lable>10 Games</lable>
            <br>
        </td>
    </tr>
</table>
                <br>
<table id='plan2'>
    <tr>
        <td style="vertical-align: top;">
            <input type="radio" value="1" name="Plan[packageId]">
            <lable>2 Games</lable
            <br>
            <input type="radio" value="2" name="Plan[packageId]" checked>
            <lable>4 Games</lable>
            <br>
            <input type="radio" value="3" name="Plan[packageId]">
            <lable>9 Games</lable>
            <br>
        </td>
    </tr>
</table>
                <br>
<table id='plan3'>
    <tr>
        <td style="vertical-align: top;">
            <input type="radio" value="1" name="Plan[packageId]">
            <lable>4 Games</lable>
            <br>
            <input type="radio" value="2" name="Plan[packageId]" checked>
            <lable>6 Games</lable>
            <br>
            <input type="radio" value="3" name="Plan[packageId]">
            <lable>11 Games</lable>
            <br>
        </td>
    </tr>
</table>

Answer 1

您可以使用.on()绑定更改事件，因为创建的元素是动态的。使用 start with selector 选择ID为plan的表格（如plan1，plan2） ...）然后输入name属性，如下所示

$(document).on('change','table[id^=plan] input[name="Plan[packageId]"]', function(){
  //get clicked radio button value
  alert($(this).val());
  //you can find parent table id or any relevant element   
  var table = $(this).closest('table').attr('id');
    alert(table);
});

<强> JSFiddle Demo

Answer 2

以下是工作演示：

$(document.body).on('click','.radioPanle', function(){
    alert($(this).val());
});

http://jsfiddle.net/2nb32s47/7/

为了方便起见，我已经为每个单选按钮应用了公共类名。

您将获得单选按钮的值并将其传递给ajax调用。

Answer 3

首先，您的无线电组的名称应该相同。我的意思是，组 1 中的所有无线电选项都应称为“计划 1”，然后组 2 中的所有无线电选项都应称为“计划 2”等。

最后，通过这些行，您将能够获取您的信息，无论您有 3 个表单还是 100 个表单：

$("input:radio").change(function(e) {
    //this will give you the selected value:
    alert ($(this).val());

    //this will tell the radio group where it belongs
    alert ($(this).attr("name"));

    //this will tell the form where it belongs
    var $form = $(this).closest('form');
    alert($form.attr('name'));
  
    //here you can start your AJAX call or whatever you need
});

如果您这样做，用户将能够从每个组中选择一个选项，但是，如果您希望用户只能从所有组中选择一个选项，那么您将必须使用相同的名称对于所有单选按钮，但上面的代码仍然有效。

元素是“动态”创建的，但这是 PHP 的工作。您的浏览器和 JQuery 并不关心这一点，这意味着，当您的页面加载时，所有元素都会加载到 DOM 中，因此它们对它们来说不是动态的。

对于通过jQuery更改的每个div触发单选按钮

3 个答案: