如何使“复选框”在每次左键单击时增加其数量，在右键单击时减少？

Question

我目前正在使用带有图像复选框的表单：

<form action="submit.php" method="POST">  
<table cellspacing="15">
<tr>
<td>
  <label for="lightning"><img src="units/lightning.png"/></label>
  <input type="checkbox" name="lightning" id="lightning">
</td>
<td>
  <label for="delita"><img src="units/delita.png"/></label>
  <input type="checkbox" name="delita" id="delita">
</td>
<td>

（它进一步下降了一段时间，没有粘贴所有东西）

它是一个基本的复选框，但我想要的是堆叠数字的东西，你点击的越多。例如，假设我单击左键单击复选框一次：它将检查它并在上方显示“1”。如果两次，一次等等......并且右键单击它将减少所述数字。有可能以任何形式出现吗？

感谢您的时间。

Answer 1

这与你问的类似......正如其他人所说，复选框不应该用于这种事情..无论如何你可以把它当作一个例子:(使用jQuery）

$('#myform input[type="checkbox"]').on('mousedown', function(e){
    $numberElem = $(this).parent().find('.number');
    var num = $numberElem.html();
    if(e.which == 1){  // left click
        num++;
    }
    else if(e.which == 3){  // right click
        num--;
    }
    $numberElem.html(num);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="myform">
    <div>
        <input type="checkbox">
        <div class="number">0</div>
    </div>
    <div>
        <input type="checkbox">
        <div class="number">0</div>
    </div>
</div>