html - 我怎样才能使 "checkboxes"在每次左键单击时增加它们的数量并在右键单击时减少它们的数量？

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”。如果是两次，一个 2 等等...然后右键单击它会减少该数字。有可能以任何形式吗？

感谢您的宝贵时间。

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>