如何使用jquery在单选按钮上应用更改事件答案

【问题标题】：How to apply on change event on radio button using jquery如何使用jquery在单选按钮上应用更改事件
【发布时间】：2016-02-15 19:05:16
【问题描述】：

HTML：

<div class="radio-list  ">
     <label class="radio-inline">
     <span class=""><input type="radio" name="data[Customer][service_type]" id="service_type" value="new" checked=""></span> NEW INSTALLATION </label>
     <label class="radio-inline">
     <span class="checked"><input type="radio" name="data[Customer][service_type]" id="service_type" value="repair"></span> SERVICE REPAIR </label>
  <label class="radio-inline">
  <span class="checked"><input type="radio" name="data[Customer][service_type]" id="service_type" value="cancel"></span> CANCEL SERVICE </label>
  <label class="radio-inline">
  <span class="checked"><input type="radio" name="data[Customer][service_type]" id="service_type" value="other"></span> OTHER SERVICE </label>
</div>

如何在<input type="radio" name="data[Customer][service_type]" id="service_type" value="cancel">上申请变更事件？

【问题讨论】：

标签： jquery radio-button onchange

【解决方案1】：

$(function(){

    $("input:radio[name='data[Customer][service_type]']").change(function(){
        var _val = $(this).val();
        console.log(_val);
    });

});

.change是你需要触发的事件。

See it here.

【讨论】：

【解决方案2】：

使用on change 事件。

$("[name='data[Customer][service_type]']").on("change", function (e) {
    console.log(this.value);
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio-list  ">
    <label class="radio-inline"> <span class=""><input type="radio" name="data[Customer][service_type]" id="service_type" value="new" checked=""></span> NEW INSTALLATION</label>
    <label class="radio-inline"> <span class="checked"><input type="radio" name="data[Customer][service_type]" id="service_type" value="repair"></span> SERVICE REPAIR</label>
    <label class="radio-inline"> <span class="checked"><input type="radio" name="data[Customer][service_type]" id="service_type" value="cancel"></span> CANCEL SERVICE</label>
    <label class="radio-inline"> <span class="checked"><input type="radio" name="data[Customer][service_type]" id="service_type" value="other"></span> OTHER SERVICE</label>
</div>

【讨论】：

【解决方案3】：

我正在使用此代码

<div class="radio-list  ">
     <label class="radio-inline">
     <span class=""><input type="radio" name="data[Customer][service_type]" id="service_type" value="new" checked="" onclick="myFunction(this.value)"></span> NEW INSTALLATION </label>

</div>

和javascript函数代码

function myFunction(myval)
{
alert(myval);
}

【讨论】：

【解决方案4】：

我已经尝试了以上所有代码，但对我来说，动态生成单选按钮时下面的代码有效。

$(document).ready(function () {
 
$(document).on("change","input[name='data[Customer][service_type]']" ,function() {
      console.log("radio changed");
  });
  });

【讨论】：