如何在变更事件中使用广播?


486

我在更改事件上有两个单选按钮我想要更改按钮怎么可能?我的密码

<input type="radio" name="bedStatus" id="allot" checked="checked" value="allot">Allot
<input type="radio" name="bedStatus" id="transfer" value="transfer">Transfer

脚本

<script>
    $(document).ready(function () {
        $('input:radio[name=bedStatus]:checked').change(function () {
            if ($("input[name='bedStatus']:checked").val() == 'allot') {
                alert("Allot Thai Gayo Bhai");
            }
            if ($("input[name='bedStatus']:checked").val() == 'transfer') {
                alert("Transfer Thai Gayo");
            }
        });
    });
</script>

3
如果这两个条件都比较“配发”,将其更改为转移..它工作正常..
Himanth库马尔

我相信if($("input[name='bedStatus']:checked").val() == 'allot')可以写if($("input[name='bedStatus']").val() == 'allot')
mplungjan

2
准备好金马·拉吉奥·阿帕丹。谢谢你分配泰国圭。
严厉的Manvar

Answers:


928

您可以使用this指代当前input元素。

$('input[type=radio][name=bedStatus]').change(function() {
    if (this.value == 'allot') {
        alert("Allot Thai Gayo Bhai");
    }
    else if (this.value == 'transfer') {
        alert("Transfer Thai Gayo");
    }
});

http://jsfiddle.net/4gZAT/

请注意,您正在比较不赞成使用allotif语句和:radio选择器中的值。

如果您不使用jQuery,则可以使用document.querySelectorAllHTMLElement.addEventListener方法:

var radios = document.querySelectorAll('input[type=radio][name="bedStatus"]');

function changeHandler(event) {
   if ( this.value === 'allot' ) {
     console.log('value', 'allot');
   } else if ( this.value === 'transfer' ) {
      console.log('value', 'transfer');
   }  
}

Array.prototype.forEach.call(radios, function(radio) {
   radio.addEventListener('change', changeHandler);
});

如果我重置输入广播并触发广播更改事件,实际输出是什么?
Ashish Mehta,

2
:radio选择器没有(jQuery中)弃用。
Miquel Al。Vicens

2
请注意:我不懂那种语言。
未定义的

7
@Piterden首先,这个答案是6岁!ES6中引入了Arrow函数,用于不关心该this值或想要this在处理程序中使用周围上下文值的情况,此代码段使用this。声称使用常规功能是“古老的坏习惯”,这毫无意义!此外,较旧的浏览器不支持箭头函数语法,Array#includes因此应使用转译器和填充程序来支持较旧的浏览器。为什么要做出与箭头功能无关的简单答案?
未定义的

2
相反this,我使用event.target
Bobort

137

以上答案的改编...

$('input[type=radio][name=bedStatus]').on('change', function() {
  switch ($(this).val()) {
    case 'allot':
      alert("Allot Thai Gayo Bhai");
      break;
    case 'transfer':
      alert("Transfer Thai Gayo");
      break;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="bedStatus" id="allot" checked="checked" value="allot">Allot
<input type="radio" name="bedStatus" id="transfer" value="transfer">Transfer

http://jsfiddle.net/xwYx9


1
使用“ on”和上面的答案有什么区别?
okenshield 2014年

3
@okenshield .on()确实在上述方面有所收获,但是,考虑到动态选择器,它肯定是jQuery 1.7+中唯一的方法
Ohgodwhy 2014年

5
@Ohgodwhy- on当您为事件委托甚至是动态选择器提供上下文时,会有所收获,但是您编写它的方式与上面的答案完全相同。
雨果席尔瓦

1
请注意,switch允许您不重复$(this).val(),您应该首选此版本。
KyleK 2015年

36

一种更简单,更简洁的方法是将类与@Ohgodwhy的答案一起使用

<input ... class="rButton">
<input ... class="rButton">

脚本

$( ".rButton" ).change(function() {
    switch($(this).val()) {
        case 'allot' :
            alert("Allot Thai Gayo Bhai");
            break;
        case 'transfer' :
            alert("Transfer Thai Gayo");
            break;
    }            
});​

18
$(document).ready(function () {
    $('#allot').click(function () {
        if ($(this).is(':checked')) {
            alert("Allot Thai Gayo Bhai");
        }
    });

    $('#transfer').click(function () {
        if ($(this).is(':checked')) {
            alert("Transfer Thai Gayo");
        }
    });
});

JS小提琴


19
代替$(this).is(":checked")使用this.checked。它是纯JS,因此速度要快得多。
Gh61 '16

7
@ Gh61,我很好奇,并进行了测试。纯JS 快得多
Michael Crenshaw

9

使用onchage功能

<input type="radio" name="bedStatus" id="allot" checked="checked" value="allot" onchange="my_function('allot')">Allot
<input type="radio" name="bedStatus" id="transfer" value="transfer" onchange="my_function('transfer')">Transfer

<script>
 function my_function(val){
    alert(val);
 }
</script>

7

简单的ES6 (仅适用于javascript)解决方案。

document.forms.demo.bedStatus.forEach(radio => {
  radio.addEventListener('change', () => {
    alert(`${document.forms.demo.bedStatus.value} Thai Gayo`);
  })
});
<form name="demo">
  <input type="radio" name="bedStatus" value="Allot" checked>Allot
  <input type="radio" name="bedStatus" value="Transfer">Transfer
</form>


6
document.addEventListener('DOMContentLoaded', () => {
  const els = document.querySelectorAll('[name="bedStatus"]');

  const capitalize = (str) =>
    `${str.charAt(0).toUpperCase()}${str.slice(1)}`;

  const handler = (e) => alert(
    `${capitalize(e.target.value)} Thai Gayo${e.target.value === 'allot' ? ' Bhai' : ''}`
  );

  els.forEach((el) => {
    el.addEventListener('change', handler);
  });
});

3
<input type="radio" name="radio"  value="upi">upi
<input type="radio" name="radio"  value="bankAcc">Bank

<script type="text/javascript">
$(document).ready(function() {
 $('input[type=radio][name=radio]').change(function() {
   if (this.value == 'upi') {
    //write your logic here

    }
  else if (this.value == 'bankAcc') {
    //write your logic here
 }
 });
 </script>

3

如果单选按钮是动态添加的,则不妨使用此功能

$(document).on('change', 'input[type=radio][name=bedStatus]', function (event) {
    switch($(this).val()) {
      case 'allot' :
        alert("Allot Thai Gayo Bhai");
        break;
      case 'transfer' :
        alert("Transfer Thai Gayo");
        break;
    }     
});

0
$(document).ready(function () {
    $('input:radio[name=bedStatus]:checked').change(function () {
        if ($("input:radio[name='bedStatus']:checked").val() == 'allot') {
            alert("Allot Thai Gayo Bhai");
        }
        if ($("input:radio[name='bedStatus']:checked").val() == 'transfer') {
            alert("Transfer Thai Gayo");
        }
    });
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.