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

Question

我需要检查单击了哪个单选按钮列表，并为单击发送 jQuery ajax 呼叫，目前我有 table 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是JSfiddle

<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() 绑定更改事件，因为创建的元素是 dynamic.Use start with selector 选择 table 以 id 开始with plan (like 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/

为了方便起见，我已经为每个单选按钮应用了通用的 class 名称。

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

Answer 3

首先，你的电台组应该叫同一个。我的意思是，第 1 组中的所有无线电选项都应称为“Plan1”，然后第 2 组中的所有无线电选项应称为“Plan2”等。

最后，通过这些行，您将能够获取您的信息，无论您有 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
});

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

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

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

For each div trigger radio button on change via jQuery

javascript

php

ajax

jquery

radio-button