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

Question

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

function select(id, job, salary, someBool) {
  console.log(id, job, salary, 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();
    });

Answer 1

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

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

function boo(name,salary){
console.log(name,salary);
}
function body(name,salary){
console.log(name,salary);
}
function select(name,salary){
console.log(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 分开。

Answer 2

您需要通过使用 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>

Answer 3

一种方法：

const 
  myForm = document.forms['choice']
, data =
  { lib  : { id: '#professionSelect', job: 'Librarian',           salary:  4850, someBool: true }
  , mech : { id: '#professionSelect', job: 'Motorcycle Mechanic', salary:  2800, someBool: true }
  , act  : { id: '#professionSelect', job: 'Actor',               salary:  3100, someBool: true }
  , tea  : { id: '#professionSelect', job: 'Teacher',             salary:   500, someBool: true }
  , doc  : { id: '#professionSelect', job: 'Doctor',              salary: 13000, someBool: true }
  , fi   : { id: '#professionSelect', job: 'Firefighter',         salary:  3700, someBool: true }
  , 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>

Answer 4

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

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

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

function select(id, job, salary, someBool) {
  console.log(id, job, salary, 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