2014-01-08 1 views
1

У нас есть требование ограничить выбор пользователем флажка. Например, мы читаем разные модели автомобилей из базы данных и размещаем их на форме, чтобы пользователь мог выбрать максимум две модели автомобилей для дальнейшей обработки. мы используем следующие сегменты кода (Примеры коды только):Ограничение выбора флажка с использованием JS и PHP

<script type="text/javascript"> 
function KeepCount() 
{ 
    var total=0; 
    for (var i=0; i < document.car_form.model_selection.length; i++) 
    { 
     if(document.car_form.model_selection[i].checked) { 
      total =total + 1; 
     } 
     if (total > 2) { 
      alert('Pick Just One Please') 
      document.car_form.model_selection[i].checked = false ; 
      return false; 
     } 
    } 
} 
</script> 

<form action="car_model.php" method="post" name="car_form" id="car_form"> 

<?php 
$q10 = "SELECT ..." 
$r10 = mysqli_query ($dbc, $q10); 
if (mysqli_num_rows($r10) > 0) {  
    while ($row10 = mysqli_fetch_array($r10, MYSQLI_ASSOC)) 
    { 
     echo '<p class="normal_text"><input type="checkbox" name="model_selection[]" value="' . $row10['model_id'] . '" onclick="return KeepCount()"; />' . $row10['car_model_name'] . '</p></br>'; 
    } 
} 
?>  
</form> 

Этот код, однако не работает, даже если пользователь выбирает более 2 модели, предупреждение не выдается.

ответ

0

Попробуйте с этим

<script type="text/javascript"> 
      function KeepCount() {      
       var inputTags = document.getElementsByName('model_selection[]');      
       var total = 0; 

       for (var i = 0; i < inputTags.length; i++) { 

        if (inputTags[i].checked) {      
          total = total + 1; 
        } 

        if (total > 2) { 
         alert('Pick Just One Please') 
         inputTags[i].checked = false; 
         return false; 
        } 
       } 
      } 
    </script> 

Проблема с выше код model_selection не массив, так что бросать ошибки неопределенное свойство «длина».

+0

это сделал работа - спасибо. У нас есть еще один выпуск 1), в соответствии с которым форма распространяется на несколько страниц, и есть необходимость запомнить выбор checkkbox до нажатия кнопки «Отправить». то есть, когда пользователь перемещается по различным страницам формы, пользователь все же должен иметь возможность видеть его флажок «Выбор». Как добиться этого, пожалуйста. Проблема-2: как включить CheckAll и Reset Selection, пожалуйста. – user2682369

2

Основная проблема заключается в том, что ваш путь dom неправильный, чтобы получить флажки. Этот код должен работать, повторяя все флажки.

<!doctype html> 
<html> 
    <head> 
    <title>Test</title> 
    </head> 
<body> 
<script type="text/javascript"> 
    function KeepCount() { 
    var elements = document.getElementsByName("model_selection[]"); 
    var total = 0; 
    for(var i in elements) { 
     var element = elements[i]; 
     if(element.checked) total++; 
     if(total>2) { 
      alert("pick one please"); 
      element.checked = false; 
      return false;  
     } 
    } 
    } 
    </script> 
    <form action="car_model.php" method="post" name="car_form" id="car_form"> 
    <p class="normal_text"><input type="checkbox" name="model_selection[]" value="id1" onclick="return KeepCount()"></p> 
    <p class="normal_text"><input type="checkbox" name="model_selection[]" value="id2" onclick="return KeepCount()"></p> 
    <p class="normal_text"><input type="checkbox" name="model_selection[]" value="id3" onclick="return KeepCount()"></p> 
    <p class="normal_text"><input type="checkbox" name="model_selection[]" value="id4" onclick="return KeepCount()"></p> 
    <p class="normal_text"><input type="checkbox" name="model_selection[]" value="id5" onclick="return KeepCount()"></p> 
    <p class="normal_text"><input type="checkbox" name="model_selection[]" value="id6" onclick="return KeepCount()"></p> 
    </form> 
</body> 
</html> 
Смежные вопросы