默认自动选择单选按钮并执行onchange功能

Question

我已经用php或js实现了问题的第一部分。我使用php来回显选中的属性。这里的问题是，通过onchange event选择时，收音机输入有其他可见的输入。但是，如果默认情况下选择/检查了任何收音机，则在我更改收音机选择之前，不会显示条件输入。因此，问题是，如何在默认情况下选中它，并且仍然显示相应的条件输入。

<input  name="mode" id="single" onchange="conditionalDisplay(this.value)"  type="radio"  value="single" <?php if($mode == single){echo 'checked';}>
<input name="mode" id="multi" onchange="conditionalDisplay(this.value)" type="radio"  value="multi" <?php if($mode == multi){echo 'checked';}> 

当选择single时，其他输入变为可见。同样的情况也适用于多人。如果php代码中指定的条件为true，则默认情况下会选择/选中其中一个，但在更改选择之前，不会显示onchange函数中附带的隐藏输入。

N:B-从数据库中检索$mode的值。

Answer 1

您可以通过编程方式触发onchange，例如，使用元素。onchange（） 。

function conditionalDisplay(value) {
  // Let's for example log to browser console
  console.log('Do something useful with ' + value);
}

// When DOM is ready, trigger an `onchange` event
document.addEventListener('DOMContentLoaded', function() {
  var singleElement = document.getElementById('single');
  var multiElement = document.getElementById('multi');
  
  // Test which exactly element is checked
  console.log(`singleElement.checked: ${singleElement.checked}`);
  console.log(`multiElement.checked: ${multiElement.checked}`);
  
  if (singleElement.checked == true) {
    singleElement.onchange();
  } else {
    multiElement.onchange();
  } 
});

<input name="mode" id="single" onchange="conditionalDisplay(this.value)" type="radio" value="single">

<input name="mode" id="multi" onchange="conditionalDisplay(this.value)" type="radio" value="multi" checked>