如何停止響應時間和計數鼠標點擊

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/