HTML中怎样判断button这一按钮是否被点击？

想要判断出按钮是否被点击，这个功能必须配合javascript才能实现，只是HTML是没有这个功能。

<input type="button" value="点击测试"/>

首先需要添加点击事件，暂时定义为点击后执行一个函数，函数名定义为Clicked。

<input type="button" value="点击测试" onclick="Clicked()"/>

然后在按钮外部添加一个<script>标签作为Clicked函数的容器：

<script type="text/javascript"></script>

其中text/javascript是告诉浏览器script标签中的内容以javascript方式解读。

再把函数Clicked写入script标签：

<script type="text/javascript">function Clicked(){}</script>

var clkBool=false

这句话要写在Clicked函数外部，用于浏览器加载页面时，即立马定义clkBool值为false，而无关Clicked函数执行与否。然后点击之后，将clkBool赋值为True。

clkBool=true

这句话要写在Clicked函数内部，仅当Clicked函数执行时（按钮点击时）才调用这句代码，则完整script标签如下：

<script type="text/javascript">

var clkBool=falsefunction Clicked(){clkBool=true}</script>

再通过另一段javascript来调用（javascript可以调用HTML，而HTML无法调用javascript），设定另一个按钮来查看之前的按钮是否被点击过：

<input type=" button" value="判断点击" onclick="CheckClk()"/><script type="text/javascript">function CheckClk(){//定义函数CheckClkif (clkBool) {//用if判断clkBool的值，一般写作if(clkBool==true)，但(clkBool==true)本身返回结果就是true和false，返回结果一定等于clkBool本身，所以可以这么写alert("按钮已经点击过")//d出警告框}else{//如果不满足if的条件alert("按钮未被点击")//d出警告框}}</script>

两个按钮及按钮对应的script标签合并，最终代码：

<input type="button" value="点击测试" onclick="Clicked()"/>

<input type=" button" value="判断点击" onclick="CheckClk()"/><script type="text/javascript">var clkBool=falsefunction Clicked(){clkBool=true}function CheckClk(){if (clkBool) {alert("按钮已经点击过")}else{alert("按钮未被点击")}}</script>

1、打开Sublime text3，新建一个HTML文档，并且建立好框架。

2、输入代码：

<table>

      <tr>

          <td>Student</td>

          <td><input type="text" name="student"></td>

      </tr>

      <tr>

          <td>Height</td>

          <td><input type="text" name="height"></td>

      </tr>

      <tr>

          <td colspan=2>

              <input type="button" name="add" value="add">

          </td>

      </tr>

  </table>

设立两行文本输入框，并且提示可以增加的按钮。

3、<table id="mainTable">

为标签加上id方便定位。

4、加上监听事件的函数。

onclick="adding()"

然后连接js文档。

<script src="test.js"></script>

5、function adding(){

  var table = document.getElementById("mainTable")

  var addTr = table.insertRow(2)

}

创建函数，然后设定两个变量。一个用于定位标签位置，另一个增加行数在第二行。测试一下，多次点击确实会往下移动。

6、var addTd = addTr.insertCell()

  addTd.innerHTML = "新增"

除了要增加tr还要增加td，并且增加文本提示。

7、稍微修改一下变量名字。再增加文本输入框。

function adding(){

  var table = document.getElementById("mainTable")

  var addTr = table.insertRow(2)

  var td1 = addTr.insertCell()

  td1.innerHTML = "新增"

  var td2 = addTr.insertCell()

  td2.innerHTML = "<input type='text 'name='newnew' >"

}

8、最后就可以看到按钮了。

很简单，去看代码中的是否有 checked="checked" 这个属性。

如果有，说明这个checkbox已经被选中，如果为空则未被选中。

举个例子如下

<input type="checkbox" name="sample" id="sample" checked="checked">

---