Несколько checkbox jQuery

вот мой тестовый код для вычисления викторины с несколькими вариантами выбора.Несколько checkbox jQuery

<!doctype html> 
<html lang="en"> 

    <head> 
     <meta charset="utf-8"> 
     <title>Multiple checkbox calculation</title> 
     <style> 
      div { 
       color: red; 
       font-size: 35px; 
      } 
     </style> 
     <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 


       $("input[type=checkbox]").click(function() { 

        var total = 0; 
        $("input[type=checkbox]:checked").each(

        function() { 

         total += parseInt($(this).val()); 

        }); 

        $("#total").html("tatal:" + total); 
       }); 

      }); 
     </script> 
    </head> 

    <body> 
     <table> 
      <thead> 
       <tr> 
        <th scope="col" width="50px">No:</th> 
        <th scope="col" width="40px">A</th> 
        <th scope="col" width="40px">B</th> 
        <th scope="col" width="40px">C</th> 
        <th scope="col" width="40px">D</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <th>1</th> 
        <td> 
         <input type="checkbox" class="css-checkbox" id="squared00" name="fieldMark[correct00]" value="1"> 
         <label for="squared00" class="css-label"></label> 
        </td> 
        <td> 
         <input type="checkbox" class="css-checkbox" id="squared01" name="fieldMark[correct01]" value="-1"> 
         <label for="squared01" class="css-label"></label> 
        </td> 
        <td> 
         <input type="checkbox" class="css-checkbox" id="squared02" name="fieldMark[correct02]" value="-1"> 
         <label for="squared02" class="css-label"></label> 
        </td> 
        <td> 
         <input type="checkbox" class="css-checkbox" id="squared03" name="fieldMark[correct03]" value="-1"> 
         <label for="squared03" class="css-label"></label> 
        </td> 
       </tr> 
       <tr> 
        <th>2</th> 
        <td> 
         <input type="checkbox" class="css-checkbox" id="squared10" name="fieldMark[correct10]" value="1"> 
         <label for="squared10" class="css-label"></label> 
        </td> 
        <td> 
         <input type="checkbox" class="css-checkbox" id="squared11" name="fieldMark[correct11]" value="-1"> 
         <label for="squared11" class="css-label"></label> 
        </td> 
        <td> 
         <input type="checkbox" class="css-checkbox" id="squared12" name="fieldMark[correct12]" value="-1"> 
         <label for="squared12" class="css-label"></label> 
        </td> 
        <td> 
         <input type="checkbox" class="css-checkbox" id="squared13" name="fieldMark[correct13]" value="-1"> 
         <label for="squared13" class="css-label"></label> 
        </td> 
       </tr> 
       <tr> 
        <th>3</th> 
        <td> 
         <input type="checkbox" class="css-checkbox" id="squared20" name="fieldMark[correct20]" value="1"> 
         <label for="squared20" class="css-label"></label> 
        </td> 
        <td> 
         <input type="checkbox" class="css-checkbox" id="squared21" name="fieldMark[correct21]" value="-1"> 
         <label for="squared21" class="css-label"></label> 
        </td> 
        <td> 
         <input type="checkbox" class="css-checkbox" id="squared22" name="fieldMark[correct22]" value="-1"> 
         <label for="squared22" class="css-label"></label> 
        </td> 
        <td> 
         <input type="checkbox" class="css-checkbox" id="squared23" name="fieldMark[correct23]" value="-1"> 
         <label for="squared23" class="css-label"></label> 
        </td> 
       </tr> 
       <tr> 
        <th>4</th> 
        <td> 
         <input type="checkbox" class="css-checkbox" id="squared30" name="fieldMark[correct30]" value="1"> 
         <label for="squared30" class="css-label"></label> 
        </td> 
        <td> 
         <input type="checkbox" class="css-checkbox" id="squared31" name="fieldMark[correct31]" value="-1"> 
         <label for="squared31" class="css-label"></label> 
        </td> 
        <td> 
         <input type="checkbox" class="css-checkbox" id="squared32" name="fieldMark[correct32]" value="-1"> 
         <label for="squared32" class="css-label"></label> 
        </td> 
        <td> 
         <input type="checkbox" class="css-checkbox" id="squared33" name="fieldMark[correct33]" value="-1"> 
         <label for="squared33" class="css-label"></label> 
        </td> 
       </tr> 
       <tr> 
        <th>5</th> 
        <td> 
         <input type="checkbox" class="css-checkbox" id="squared40" name="fieldMark[correct40]" value="1"> 
         <label for="squared40" class="css-label"></label> 
        </td> 
        <td> 
         <input type="checkbox" class="css-checkbox" id="squared41" name="fieldMark[correct41]" value="-1"> 
         <label for="squared41" class="css-label"></label> 
        </td> 
        <td> 
         <input type="checkbox" class="css-checkbox" id="squared42" name="fieldMark[correct42]" value="-1"> 
         <label for="squared42" class="css-label"></label> 
        </td> 
        <td> 
         <input type="checkbox" class="css-checkbox" id="squared43" name="fieldMark[correct43]" value="-1"> 
         <label for="squared43" class="css-label"></label> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
     <div id="total"></div> 
    </body> 

</html>

этот код для автоматического расчета для викторины с несколькими вариантами выбора. только опция «А» верна для каждого 5 вопросов, все остальные параметры неверны. вот мои требования.

, когда пользователь нажимает только на вариант «правильный» для любого номера вопросов, он добавляет точку 1 к общей сумме.
, когда пользователь нажимает только на вариант «неправильный» для любого вопроса, добавит точку -1 к итогу.
Когда пользователь нажимает на оба варианта «правильно» и «неверно» для любого номера вопроса, он добавляет точку -1 к общей сумме. например, пользователь нажимает на все флажок для вопроса 1, он должен добавить только -1 к сумме (в примере выше -2, который равен = 1-1-1-1.) т.е. если пользователь проверил все флажки в приведенном выше примере, он получит общее количество: -10. Но мое требование - показать только -5. т.е. = -1-1-1-1-1.

заранее спасибо ..

источник

2013-12-01 Nisu

я создал скрипку для вас на http://jsfiddle.net/DYduY/ Это не приятное решение, но то, что я делаю, это рассчитать общее количество для каждой строки. Если он меньше -1, например. -2, чем изменить значение строки на -1. Таким образом, максимальное отрицательное значение для строки равно -1.

$(document).ready(function() { 


    $("input[type=checkbox]").click(function() { 

     var total = 0; 

     $("tr").each(function() { 

      var rowTotal = 0; 


      $(this).find("input[type=checkbox]:checked").each(

       function() { 

        rowTotal += parseInt($(this).val()); 

       }); 

      if (rowTotal < -1) { rowTotal = -1 } 


      total += rowTotal; 
     }); 




     $("#total").html("tatal:" + total); 
    }); 

});

источник

2013-12-01 10:55:43

это частичное решение. когда пользователь нажимает на оба варианта A и B для вопроса 1, отображает общее количество 0, которое не является обязательным. Я улучшил этот код, присоединившись к ответу из [link] (http://stackoverflow.com/questions/4029373/find-minimum-value-in-a-column). – Nisu

Получено более совершенное решение. Вот код jquery.

$(document).ready(function() { 

     $("input[type=checkbox]").click(function() { 

      var total = 0; 

      $("tr").each(function() { 

       var checked = $(this).find("input:checked").length; 

       var values = $(this).find("input[type=checkbox]").map(function() { 
           return parseInt($(this).val()); 
           }).get(); 

       var minimum = Math.min.apply(this, values); 


       var rowTotal = 0; 


       $(this).find("input[type=checkbox]:checked").each(

        function() { 

         rowTotal += parseInt($(this).val()); 

        }); 

       if (checked > 1) { rowTotal = minimum } 


       total += rowTotal; 
      }); 


      $("#total").html("tatal:" + total); 
     }); 

    });

источник

2013-12-02 07:51:18 Nisu

Несколько checkbox jQuery

ответ

Смежные вопросы