javascript - 使用jQuery手动更改无线电组时触发了两次更改事件(Change event fired twice on changing radio group manually with jQuery)

Question

When selecting "A&L" in the select, the radio group is hidden and its value is set to "n".

(在选择中选择“ A＆L”时，单选按钮组被隐藏，其值设置为“ n”。)

I try to trigger the change event so that the "Hello"-div disappears too, but it doesn't work correctly - on debugging I noticed that the change event is executed twice - the first time correctly and then again with the value "j".

(我尝试触发更改事件，以便“ Hello” -div也消失，但是它无法正常工作-在调试时，我注意到更改事件执行了两次-第一次正确执行，然后再次使用值“ j ”。)

What's my mistake?

(我怎么了)

Here's the full code: https://jsfiddle.net/95Lxroqy/

(这是完整的代码： https : //jsfiddle.net/95Lxroqy/)

After I looked through some other questions it seemed to me that .val(['n']).change();

(看完其他一些问题之后，我觉得.val(['n']).change();)

(line 24) should have worked -

(（第24行）应该有效-)

but it seems like I'm still missing something.

(但似乎我仍然缺少一些东西。)

 // find elements var banner = $("#banner-message"); var button = $("#place"); var langs = $("#langs"); var trans = $("#trans"); var radioGroup = $("input[type=radio][name=translate]"); var div = $("#dynamic"); radioGroup.change(function() { if (this.value === 'n') { div.hide(); } else if (this.value === 'j') { div.show(); } }); // handle click and add class button.change(function(event){ var al = button.val() === "al"; if(al){ langs.show(); trans.hide(); radioGroup.val(['n']).change(); }else{ trans.show(); langs.hide(); } }).change(); 

 body { background: #20262E; padding: 20px; font-family: Helvetica; } #banner-message { background: #fff; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 0 auto; width: 300px; } button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; } #banner-message.alt { background: #0084ff; color: #fff; margin-top: 40px; width: 200px; } #banner-message.alt button { background: #fff; color: #000; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="banner-message"> <select id="place"> <option value="in">Internal</option> <option value="al">A&L</option> </select> <select id="langs"> <option value="volvo">German</option> <option value="saab">English</option> </select> <fieldset id="trans"> <input type="radio" id="n" name="translate" value="n"> <label for="n"> Nein</label> <input type="radio" id="j" name="translate" value="j"> <label for="j"> Ja</label> </fieldset> <div id="dynamic"> Hello </div> </div> 

  ask by Cold_Class translate from so

Answer 1

val() get/set the value of the element.

(val()获取/设置元素的值。)

Your code matches all the options exist in the collection variable, it does not match the specific element you are looking for.

(您的代码与collection变量中存在的所有选项均匹配，但与您要查找的特定元素不匹配。)

You can target the parent element from which you can find the the specific element by using attribute selector.

(您可以使用属性选择器来定位可从中找到特定元素的父元素。)

Try

(尝试)

radioGroup.parent().find('[value=n]').change();

Update: The more feasible solution is using the filter()

(更新：更可行的解决方案是使用filter())

radioGroup.filter('[value=n]').change();