单选框change事件不生效问题解决

r囧r小猫 2022-03-12 08:20 2030阅读 0赞

项目中遇到需要用jquery给单选框添加change事件

![20190305162935281.png][]

<div id="operationMethodsGroup" style="float: left; margin-right: 10px;">

<nobr><label style="padding-right:5px;"><input type="radio" alerttext="" key="operationType" name="oprGroup" value="handler\_pass:通过" οnclick="lbpm.globals.clickOperation(this);" checked="checked">通过</label></nobr>

<nobr><label style="padding-right:5px;"><input type="radio" alerttext="" key="operationType" name="oprGroup" value="handler\_refuse:驳回" οnclick="lbpm.globals.clickOperation(this);">驳回</label></nobr> <nobr><label style="padding-right:5px;"><input type="radio" alerttext="" key="operationType" name="oprGroup" value="handler\_commission:转办" οnclick="lbpm.globals.clickOperation(this);">转办</label></nobr>

<nobr><label style="padding-right:5px;"><input type="radio" alerttext="" key="operationType" name="oprGroup" value="handler\_communicate:沟通" οnclick="lbpm.globals.clickOperation(this);">沟通</label></nobr>

<nobr><label style="padding-right:5px;"><input type="radio" alerttext="" key="operationType" name="oprGroup" value="handler\_abandon:废弃" οnclick="lbpm.globals.clickOperation(this);">废弃</label></nobr>

<nobr><label style="padding-right:5px;"><input type="radio" alerttext="" key="operationType" name="oprGroup" value="handler\_additionSign:加签" οnclick="lbpm.globals.clickOperation(this);">加签</label></nobr> </div>

第一想到是是使用change事件

$("input\[type='radio'\]\[name=''oprGroup''\]").change(function()\{

if (this.value != 'handler\_pass:通过') \{  
        alert("111");  
     $("\#process\_review\_button").attr("onclick","Com\_Submit(document.kmReviewMainForm, 'publishDraft');");      
        alert("222");  
        $("textarea\[name='fdUsageContent'\]").val("");  
          \}else\{  
         $("textarea\[name='fdUsageContent'\]").val("建议职级（P3-P9，M1-M5)：\\n评价：");  
    \}

\}); 但测试发现这种方式并不能生效，无法触发change事件

百度了很多回答，大部分都是不对的，浪费了时间。

经测试以下方式是对的

$(document).on("change","\[name='oprGroup'\]",function()\{  
    if (this.value != 'handler\_pass:通过') \{  
        alert("111");  
     $("\#process\_review\_button").attr("onclick","Com\_Submit(document.kmReviewMainForm, 'publishDraft');");      
        alert("222");  
        $("textarea\[name='fdUsageContent'\]").val("");  
          \}else\{  
         $("textarea\[name='fdUsageContent'\]").val("建议职级（P3-P9，M1-M5)：\\n评价：");  
    \}  
同时 也可以给每个单选添加onchange事件来解决，例如：

<div class="controls">
       <input type="radio" value="1" οnchange="selected(this)" class="required"/>按品类
       <input type="radio" value="2" οnchange="selected(this)" class="required" />按品牌
       <input type="radio"  value="3" οnchange="selected(this)" class="required"/>按品类&品牌
    </div>

function selected(obj) {
       if ($(obj).val() == '1') {
          $(".category").show();
          $(".brand").hide();
                  $(".category").removeClass("box-right").addClass("box-left");
              } else if ($(obj).val() == '2') {
          $(".category").hide();
          $(".brand").show();
                  $(".brand").removeClass("box-right").addClass("box-left");
       }else if($(obj).val() == '3'){
                  $(".brand").show();
                  $(".category").show();
                  $(".brand").removeClass("box-left").addClass("box-right");
                  $(".category").addClass("box-left");
       }
    } 此种方式相对麻烦一些 但实现效果相同

[20190305162935281.png]: /images/20220312/041f0dee531641d4b07cbda33a97ad22.png

发表评论取消回复

表情：

评论列表（有 0 条评论，2030人围观）

还没有评论，来说两句吧...

相关阅读

相关 angularJS全选，全不选，下拉框，单选

简介环境这个AngularJS是在写项目的时候，使用到的，我发现还挺不错，就分享一下，使用angularjs如何实现全选，全不选，下拉框，单选 AngularJS全

悠悠/ 2023年10月15日 13:21/ 0 赞/ 130 阅读

相关 js 多选框&单选框

此多选框、单选框可以换按钮皮肤，只更改雪碧图的定位即可。没有使用自带的控件，是重新写的。用到了模块化开发，类的导出导入，类的继承。 <!-- html部分

向右看齐/ 2023年07月07日 12:57/ 0 赞/ 156 阅读

相关 element-ui 单选框change

<el-radio v-model="radio" 　　　　　　　　 :label="item.id" v-for="(

青旅半醒/ 2023年02月13日 12:30/ 0 赞/ 55 阅读

相关 layui回显复选框单选框问题

开发的时候发现layui组件的监听与回显需要特殊处理下如下 > <div class="layui-form-item"> > <

蔚落/ 2023年01月18日 04:13/ 0 赞/ 467 阅读

相关解决数据表格单选框显示不全问题

.laytable-cell-radio { padding: 10px 15px 0 15px; } ![20201019173707

水深无声/ 2022年12月16日 09:09/ 0 赞/ 256 阅读

相关 ionic单选框初始化不选中问题

ionic3 anuglar4 input 单选框 ngModel 初始化，不选中问题很可能是参数值类型问题！！！ html代码 <inp

拼搏现实的明天。/ 2022年05月22日 02:59/ 0 赞/ 300 阅读

相关原生html 单选框radio改变事件

<input type="radio" name="cjf" id="allot" checked="checked" value="allot">All

秒速五厘米/ 2022年05月15日 08:28/ 0 赞/ 1184 阅读

相关监听单选框radio改变事件（和layui中单选按钮改变事件）

若是只引用jquery的话，监听单选按钮改变事件如下： <input type="radio" name="sex" checked="checked" value=

短命女/ 2022年04月02日 06:53/ 1 赞/ 845 阅读

相关单选框change事件不生效问题解决

项目中遇到需要用jquery给单选框添加change事件 ![20190305162935281.png][] <div id="operationMethodsGroup

r囧r小猫/ 2022年03月12日 08:20/ 0 赞/ 2031 阅读

相关单选框radio改变事件

$(function () { $('input').on('ifChecked', function (event) {

布满荆棘的人生/ 2022年01月27日 10:39/ 0 赞/ 525 阅读