如何使用按钮 onchange 事件来运行所选按钮的 onclick 功能？

如何解决如何使用按钮 onchange 事件来运行所选按钮的 onclick 功能？

选择HTML表单中的单选按钮时，我希望它将运行我链接到它的onclick函数。我之前尝试使用 onclick 而不是 onchange ，但它不适用于单选按钮。有没有人有任何我可以用来解决这个问题的建议/技巧？

function select(id,job,salary,someBool) {
  console.log(id,someBool);
}

<form class="choice">
  <input type="radio" id="librarian" name="profession" value="lib" onclick="select('#professionSelect','Librarian',4850,true);">
  <label for="librarian">Librarian: $4,850/month</label><br>
  <input type="radio" id="mechanic" name="profession" value="mech" onclick="select('#professionSelect','Motorcycle Mechanic',2800,true)">
  <label for="mechanic">Motorcycle Mechanic: $2,800/month</label><br>
  <input type="radio" id="actor" name="profession" value="act" onclick="select('#professionSelect','Actor',3100,true)">
  <label for="actor">Actor: $3,100/month</label><br>
  <input type="radio" id="teacher" name="profession" value="tea" onclick="select('#professionSelect','Teacher',4500,true)">
  <label for="teacher">Teacher: $4,500/month</label><br>
  <input type="radio" id="doctor" name="profession" value="doc" onclick="select('#professionSelect','Doctor',13000,true)">
  <label for="doctor">Doctor: $13,000/month</label><br>
  <input type="radio" id="fire" name="profession" value="fi" onclick="select('#professionSelect','Firefighter',3700,true)">
  <label for="fire">Firefighter: $3,700/month</label><br>
  <input type="radio" id="engineer" name="profession" value="engi" onclick="select('#professionSelect','Computer Engineer',9400,true)">
  <label for="engineer">Computer Engineer: $9,400/month</label><br>
</form>

这样的东西会起作用吗？

    $(".choice").change(function() {
        $(this).onclick();
    });

解决方法

您需要使用 name 属性在每个单独的单选元素上使用 change 事件。下面是一个基本示例，说明如何执行此操作：

$('input:radio[name=profession]').change(function(el) {
        select(this.getAttribute("id"),this.getAttribute("salary"));
 });

function select(profession,salary) {
    console.log(profession + "," + salary)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="choice">
  <input type="radio" id="librarian" name="profession" value="lib" salary="4850">
  <label for="librarian">Librarian: $4,850/month</label><br>
  <input type="radio" id="mechanic" name="profession" value="mech" salary="2800">
  <label for="mechanic">Motorcycle Mechanic: $2,800/month</label><br>
  <input type="radio" id="actor" name="profession" value="act" salary="3100">
  <label for="actor">Actor: $3,100/month</label><br>
  <input type="radio" id="teacher" name="profession" value="tea" salary="4500">
  <label for="teacher">Teacher: $4,500/month</label><br>
  <input type="radio" id="doctor" name="profession" value="doc" salary="13000">
  <label for="doctor">Doctor: $13,000/month</label><br>
  <input type="radio" id="fire" name="profession" value="fi" salary="3700">
  <label for="fire">Firefighter: $3,700/month</label><br>
  <input type="radio" id="engineer" name="profession" value="engi" salary="9400">
  <label for="engineer">Computer Engineer: $9,400/month</label><br>
</form>

,

select 似乎是您不能在 HTML 内联事件侦听器中使用的词。使用任何其他有效的非保留关键字。

此外，onclick 和 onchange 属性都应该在这里起作用。这是一个同时使用它们的示例：

function boo(name,salary){
console.log(name,salary);
}
function body(name,salary);
}
function select(name,salary);
}

<form class="choice">
<input type="radio" id="librarian" name="profession" value="lib" onchange="body('lib',4850)">
  <label for="librarian">Librarian: $4,850/month</label><br>
  <input type="radio" id="mechanic" name="profession" value="mech" onchange="select('mechanic',2800)">
  <label for="mechanic">Motorcycle Mechanic: $2,800/month</label><br>
  <input type="radio" id="actor" name="profession" value="act" onchange="boo('actor',3100)">
  <label for="actor">Actor: $3,100/month</label><br>
  <input type="radio" id="teacher" name="profession" value="tea" onchange="boo('teacher',4500)">
  <label for="teacher">Teacher: $4,500/month</label><br>
  <input type="radio" id="doctor" name="profession" value="doc" onclick="boo('doctor',13000)">
  <label for="doctor">Doctor: $13,000/month</label><br>
</form>

在上面的例子中，我同时使用了 select 和 body，它们都不是 JS 中的关键字。但不适用于内联事件处理程序。

你可以直接在 JS 中使用它们，如下所示：

let select = function(){
  console.log(event.target.value);
}
let body = function(){
  console.log(event.target.value);
}
document.querySelector('#librarian').onchange = select;
document.querySelector('#librarian2').onchange = body;

<input type="radio" id="librarian" name="profession" value="lib"  />
  <label for="librarian">Librarian: $4,850/month</label>
    <input type="radio" id="librarian2" name="profession" value="lib2"  />
  <label for="librarian2">Librarian2: $4,850/month</label>

可能是文档不推荐使用 inline event handlers 的原因。

将您的 JS 和 HTML 分开。

,

我刚刚发现您基本上是在尝试从 HTML 本身传递数据。

因此，最好的方法是使用 data- 属性来执行此操作并在其上设置您的值并在 Javascript 中处理其余部分，而不是自己编写点击事件。

const professions = document.querySelectorAll("input[name='profession']");

function select(id,job,salary,someBool) {
  console.log(id,someBool);
}


professions.forEach((profession)=>{  
  profession.addEventListener('click',(e)=>{
    const professionData = profession.getAttribute('data-profession');
  const dataArray = professionData.split(",");
  
  select(profession.id,dataArray[1],dataArray[2],dataArray[3]);
  })

});

<form class="choice">
  <input type="radio" id="librarian" name="profession" value="lib" data-profession="'#professionSelect','Librarian',4850,true">
  <label for="librarian">Librarian: $4,850/month</label><br>
  <input type="radio" id="mechanic" name="profession" value="mech" data-profession="'#professionSelect','Motorcycle Mechanic',2800,true">
  <label for="mechanic">Motorcycle Mechanic: $2,800/month</label><br>
  <input type="radio" id="actor" name="profession" value="act" data-profession = "'#professionSelect','Actor',3100,true">
  <label for="actor">Actor: $3,100/month</label><br>
</form>

试试这个代码。要了解有关数据属性的更多信息，您可以使用此 w3school 资源。

https://www.w3schools.com/tags/att_data-.asp

,

一种方法：

const 
  myForm = document.forms['choice'],data =
  { lib  : { id: '#professionSelect',job: 'Librarian',salary:  4850,someBool: true },mech : { id: '#professionSelect',job: 'Motorcycle Mechanic',salary:  2800,act  : { id: '#professionSelect',job: 'Actor',salary:  3100,tea  : { id: '#professionSelect',job: 'Teacher',salary:   500,doc  : { id: '#professionSelect',job: 'Doctor',salary: 13000,fi   : { id: '#professionSelect',job: 'Firefighter',salary:  3700,engi : { id: '#professionSelect',job: 'Computer Engineer',salary:  9400,someBool: true }
  }
myForm.oninput = e =>
  {
  console.clear()
  console.log( data[myForm.profession.value] )
  }

label {
  display : block;
  float   : left;
  clear   : left;
  margin  : .3em 1em;
  }

<form name="choice" >
  <label> <input type="radio" name="profession" value="lib"  > Librarian: $4,850/month            </label>
  <label> <input type="radio" name="profession" value="mech" > Motorcycle Mechanic: $2,800/month  </label>
  <label> <input type="radio" name="profession" value="act"  > Actor: $3,100/month                </label>
  <label> <input type="radio" name="profession" value="tea"  > Teacher: $4,500/month              </label>
  <label> <input type="radio" name="profession" value="doc"  > Doctor: $13,000/month              </label>
  <label> <input type="radio" name="profession" value="fi"   > Firefighter: $3,700/month          </label>
  <label> <input type="radio" name="profession" value="engi" > Computer Engineer: $9,400/month    </label>
</form>