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

时间:2017-12-24 05:04:12

标签: html css checkbox

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

<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”。如果两次,一次等等......并且右键单击它将减少所述数字。有可能以任何形式出现吗?

感谢您的时间。

1 个答案:

答案 0 :(得分: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>