当选中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();
});
4条答案
按热度按时间ivqmmu1c1#
select
似乎是一个不能在html内联事件侦听器中使用的词。使用任何其他有效的非保留关键字。而且,两者
onclick
及onchange
属性应该在这里工作。以下是使用这两种方法的示例:在上面的例子中,我使用了这两种方法
select
及body
,两者都不是js中的关键字。但在内联事件处理程序中不起作用。您可以在js中直接使用它们,如下所示:
也许,为什么文档建议不要使用内联事件处理程序呢。
将js和html分开。
yacmzcpb2#
您需要使用
change
通过使用name属性在每个单独的无线元素上创建事件。下面是一个基本示例,说明了如何做到这一点:ddhy6vgd3#
一种方法是:
kd3sttzy4#
我刚刚发现,您基本上是在尝试从html本身传递数据。
所以,最好的方法是使用
data-
属性来执行此操作,并在该属性上设置值,然后用javascript处理其余的内容,而不是自己编写单击事件。试试这个代码。要了解更多关于数据属性的信息,您可以使用此资源。
https://www.w3schools.com/tags/att_data-.asp