如何使用button onchange事件来运行所选按钮的onclick函数?

wswtfjt7  于 2021-09-13  发布在  Java
关注(0)|答案(4)|浏览(359)

当选中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();
    });
ivqmmu1c

ivqmmu1c1#

select 似乎是一个不能在html内联事件侦听器中使用的词。使用任何其他有效的非保留关键字。
而且,两者 onclickonchange 属性应该在这里工作。以下是使用这两种方法的示例:

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>

在上面的例子中,我使用了这两种方法 selectbody ,两者都不是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>

也许,为什么文档建议不要使用内联事件处理程序呢。
将js和html分开。

yacmzcpb

yacmzcpb2#

您需要使用 change 通过使用name属性在每个单独的无线元素上创建事件。下面是一个基本示例,说明了如何做到这一点:

$('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>
ddhy6vgd

ddhy6vgd3#

一种方法是:

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>
kd3sttzy

kd3sttzy4#

我刚刚发现,您基本上是在尝试从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>

试试这个代码。要了解更多关于数据属性的信息,您可以使用此资源。
https://www.w3schools.com/tags/att_data-.asp

相关问题