更新的代码

Question

我正在使用的JSFiddle：https://jsfiddle.net/mL0uLx81/1/

我一直试图在点击按钮时触发一个名为toggleCheckbox的功能。

我已经在onclick="toggleCheckbox()"标记上执行了input，并尝试将document.getElementById("surveyButton").addEventListener("click", toggleCheckbox, false);添加到JS文件中。他们都没有工作，我不确定为什么。

Answer 1

你非常接近，只是几个修复。

首先，你不在JS小提琴中包含jQuery。其次，您的toggleCheckbox函数不在全局范围内，因此无法内联访问。最后，您需要更新您的显示/消失功能。似乎他们没有以同样的方式切换复选框和按钮。

更新的代码

<强> HTML

<input type="checkbox" name="toggle" id="toggle" />
<input type="button" value="Open" id="surveyButton" /> <!--removed inline JS-->

<强>的JavaScript

function toggleCheckbox() { //moved function to global scope, if you wanted to add the listner inline you'd do it this way.

  if($("#toggle").is(':checked')) {
    SurveyAppear();
  }  else {
    SurveyDisappear();
  }
}

var SurveyAppear = function() {
  $("#surveyButton").prop('value', 'Open'); //switched from Close
  $("#toggle").prop('checked', false); //changed to false
}

var SurveyDisappear = function() {
  $("#surveyButton").prop('value', 'Close'); //switched from Open
  $("#toggle").prop('checked', true);
}

document.getElementById("surveyButton").addEventListener("click", toggleCheckbox, false);

看到它在更新的小提琴中工作。 https://jsfiddle.net/igor_9000/mL0uLx81/2/

希望有所帮助！

Answer 2

在你的JSFiddle中，你使用的是jquery，而不是将它包含在小提琴中。 alert();可以使用$，但<input type="button" value="Open" id="surveyButton" />

无效

下面有其他错误纠正，如@AdamKonieska所说

检查this post

您的新HTML（已删除onclick）：

$("#toggle").prop('checked', false);

你的新JS（var toggleCheckbox = function() { if ($("#toggle").is(':checked')) { SurveyDisappear(); } else { SurveyAppear(); } } var SurveyAppear = function() { $("#surveyButton").prop('value', 'Close'); $("#toggle").prop('checked', true); } var SurveyDisappear = function() { $("#surveyButton").prop('value', 'Open'); $("#toggle").prop('checked', false); } document.getElementById("surveyButton").addEventListener("click", toggleCheckbox, false);中的false改为true）：

--stat

Answer 3

请在下面找到plunker链接 https://plnkr.co/edit/vYvi4F45s6PpKrRvwqsA?p=preview

可能存在拼写错误

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <input onclick="sampleFun()" type="button" value="button"/>
  </body>
</html>

// Code goes here
function sampleFun() {
  alert('hello');
}

Answer 4

如果您正在使用jQuery，则可以选择指定按钮的输入标记，并为其附加.click()侦听器，如下所示：

$('[type=submit]').click(function() {
     toggleCheckbox();
});

否则，我认为你做得对了。希望我的上述解决方案有所帮助！

如何使HTML按钮触发Javascript函数

4 个答案:

更新的代码