如何停止响应时间和计数鼠标点击

Question

下面的代码是显示每个选项作为复选框按钮对每个问题的一个动态的方式：

 function ExpandOptionType($option) { 
       $options = explode('-', $option); 
       if(count($options) > 1) { 
        $start = array_shift($options); 
        $end = array_shift($options); 
        do { 
         $options[] = $start; 
        }while(++$start <= $end); 
       } 
       else{ 
        $options = explode(' or ', $option); 
       } 
       echo '<p>'; 
       foreach($options as $indivOption) { 
        echo '<div id="ck-button"><label class="fixedLabelCheckbox"><input type="checkbox" name="options[]" id="option-' . $indivOption . '" value="' . $indivOption . '" /><span>' . $indivOption . '</span></label></div>'; 
       } 
        echo '</p>'; 


      } 


      foreach ($arrQuestionId as $key=>$question) { 

      ?> 

      <p><?php echo ExpandOptionType(htmlspecialchars($arrOptionType[$key])); ?></p> 

    <p><input type='text' class='questionIds' name='questionids' value='<?php echo htmlspecialchars($arrQuestionId[$key]); ?>' /></p> 

    <p><input type='text' class='responseTime' name='responsetime' value='00:00:00' /></p> 

    <p><input type='text' class='mouseClick' name='mouseclick' value='0' /></p> 

} 

现在下面I 2个文本输入也被加foreach循环，一个用于响应时间等是用于计算鼠标点击：

<p><input type='text' class='responseTime' name='responsetime' value='00:00:00' /></p> 

<p><input type='text' class='mouseClick' name='mouseclick' value='0' /></p> 

现在，这是我的问题：

1. 响应时间文本输入包含一个递增计时器。我想要的是，如果在问题中单击第一个按钮复选框，则问题的响应计时器应停止。这是因为我们知道用户回答一个特定问题需要多长时间

2. 鼠标单击文本以0开头，我希望这个文本输入要做的是为每个按钮复选框单击一个问题，问题的鼠标点击文本输入会计算点击量，因此我们知道用户编译的问题选项上有多少点击。

如何才能达到上述目的？

下面是什么样子的一个问题上的jsfiddle显示示例代码：

http://jsfiddle.net/zAFND/630/

UPDATE：

的源代码显示多个问题，例如：

QUESTION 1: 

<p> 
<div id="ck-button"> 
<label class="fixedLabelCheckbox"> 
<input type="checkbox" name="options[]" id="option-A" value="A" /> 
<span>A</span> 
</label> 
</div> 

<div id="ck-button"> 
<label class="fixedLabelCheckbox"> 
<input type="checkbox" name="options[]" id="option-B" value="B" /> 
<span>B</span> 
</label> 
</div> 

<div id="ck-button"> 
<label class="fixedLabelCheckbox"> 
<input type="checkbox" name="options[]" id="option-C" value="C" /> 
<span>C</span> 
</label> 
</div> 

<div id="ck-button"> 
<label class="fixedLabelCheckbox"> 
<input type="checkbox" name="options[]" id="option-D" value="D" /> 
<span>D</span> 
</label> 
</div> 

<div id="ck-button"> 
<label class="fixedLabelCheckbox"> 
<input type="checkbox" name="options[]" id="option-E" value="E" /> 
<span>E</span> 
</label> 
</div> 

<div id="ck-button"> 
<label class="fixedLabelCheckbox"> 
<input type="checkbox" name="options[]" id="option-F" value="F" /> 
<span>F</span> 
</label> 
</div> 

</p> 

<p><input type='text' class='questionIds' name='questionids' value='73' /></p> 


<p><input type='text' class='responseTime' name='responsetime' value='00:00:00' /></p> 

<p><input type='text' class='mouseClick' name='mouseclick' value='0' /></p> 



QUESTION 2: 

<p> 
<div id="ck-button"> 
<label class="fixedLabelCheckbox"> 
<input type="checkbox" name="options[]" id="option-A" value="A" /> 
<span>A</span> 
</label> 
</div> 

<div id="ck-button"> 
<label class="fixedLabelCheckbox"> 
<input type="checkbox" name="options[]" id="option-B" value="B" /> 
<span>B</span> 
</label> 
</div> 

<div id="ck-button"> 
<label class="fixedLabelCheckbox"> 
<input type="checkbox" name="options[]" id="option-C" value="C" /> 
<span>C</span> 
</label> 
</div> 

<div id="ck-button"> 
<label class="fixedLabelCheckbox"> 
<input type="checkbox" name="options[]" id="option-D" value="D" /> 
<span>D</span> 
</label> 
</div> 

<div id="ck-button"> 
<label class="fixedLabelCheckbox"> 
<input type="checkbox" name="options[]" id="option-E" value="E" /> 
<span>E</span> 
</label> 
</div> 

</p> 

<p><input type='text' class='questionIds' name='questionids' value='74' /></p> 


<p><input type='text' class='responseTime' name='responsetime' value='00:00:00' /></p> 

<p><input type='text' class='mouseClick' name='mouseclick' value='0' /></p> 

Answer 1

由于你创建了一个很好的setinterval参考。现在您可以删除第一个复选框的点击事件中的设置时间间隔，并在所有复选框上添加点击事件以增加计数器。

这将是

$(document).ready(function(){ 
var checkBox=$('#ck-button').find('input'); 
var responsetimer=//your interval function 
checkbox.filter(':first').bind('click',function(e){ 
clearInterval(responsetimer); 
}); 
checkbox.bind('click',function(e){ 
$('.mouseClick').val(parseInt($('.mouseClick').val())+1); 
}); 
}); 

好吧，我不知道你想在第一个按钮点击或第一次按下按钮将停止计时器的问题。如果它是第一次比不使用第一次绑定。在第二个绑定本身中保持清除间隔。

checkbox.bind('click',function(e){ 
clearInterval(responsetimer); 
$('.mouseClick').val(parseInt($('.mouseClick').val())+1); 
}); 

JS提琴：http://jsfiddle.net/zAFND/631/ 的第二个选项 http://jsfiddle.net/zAFND/638/

UPDATE 如果你想这多问题包裹每个问题有一个div说<div class="queWrap"></div>

做一个阵列refrence您区间函数使其可以清楚。

循环到每个queWrap并启动计时器并在复选框上分配事件。

多个问题的检查示例：http://jsfiddle.net/zAFND/640/