jQuery/JS проверка отмеченных checkbox (улучшение)

Здравствуйте!
Суть вопроса вот в чем:
у меня есть CMS-ка, в ней можно через админку задавать какие-то поля в профиль пользователя.
Например, я сделал поле:
"Выберите то, что вам нравится"
а дальше 20 вариантов с чекбоксами.
Но, пользователь может быбрать только 5 из 20-ти.
Эту проблему я уже решил, если пользователь выбират 6-й чекбокс, то ему вылетает окошко с предупреждением.
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }

<script type='text/javascript'>
var checkCount=0
var maxChecks=5
function setChecks(obj){
if(obj.checked){
checkCount=checkCount+1
}else{
checkCount=checkCount-1
}
if (checkCount>maxChecks){
obj.checked=false
checkCount=checkCount-1
alert('Пожалуйста, выберите не более '+maxChecks+' вопросов')
}
}
</script>
<input type="checkbox"  value="1" onclick="setChecks(this)"/>1
<input type="checkbox"  value="2" onclick="setChecks(this)"/>2
<input type="checkbox"  value="3" onclick="setChecks(this)"/>3
<input type="checkbox"  value="4" onclick="setChecks(this)"/>4

 


Но
если пользователь отчетил чекбоксы (допустим 4 штуки) и перезагузил страницу, то отмеченные чекбоксы остались, и теперь он может отметить еще 5 новых (итого получится 9)

Вот я не знаю как сделать так, чтобы при запуске этот скрипт уже считал заполненные чекбоксы.
Спасибо большое!
0
checkbox javascript jquery Проверка

1 ответов

Нашел в чем проблема была, вот рабочее решение.


<input type="checkbox" checked="checked" onclick="setChecks(this)"/>
<input type="checkbox" checked="checked" onclick="setChecks(this)"/>
<input type="checkbox" checked="checked" onclick="setChecks(this)"/>
<input type="checkbox" onclick="setChecks(this)"/>
<input type="checkbox" onclick="setChecks(this)"/>
<input type="checkbox" onclick="setChecks(this)"/>
<input type="checkbox" onclick="setChecks(this)"/>
<input type="checkbox" onclick="setChecks(this)"/>
<input type="checkbox" onclick="setChecks(this)"/>
<input type="checkbox" onclick="setChecks(this)"/>
 


var checkCount = 0;
var maxChecks = 5;

inputArray = document.getElementsByTagName("input");

for(var i = 0; i < inputArray.length; i++)
{
  if(inputArray[i].type == "checkbox")
  {
    if (inputArray[i].checked)
    {
      checkCount += 1;
    }
  }
}

function setChecks(input)
{
  if(input.checked)
  {
    checkCount += 1;  
  }
  else
  {
    checkCount -= 1;
  }

  if (checkCount > maxChecks)
  {
    alert('Пожалуйста, выберите не более '+maxChecks+' вопросов');
    input.checked = false;
    checkCount -= 1;
    return false;
  }
}
 
-2

проверка кол-ва уже выбранных элементов:


$('input[type="checkbox"]:checked').length
 
если это значение больше возможного, то устанавливаем

obj.checked=false
 
1

Вопрос к автору, на засыпку, так сказать:
Свой вопрос Вы назвали "jQuery/JS проверка отмеченных checkbox (улучшение)", но я смотрю, что Вы отрез отказываетесь от его использования. Тем более, если речь идёт об улучшении....
Попробуйте реализовать это на jQuery. Думаю, что результат Вам понравится. Или, хотя бы, уберите из html кода onclick, заменив его на:
$("input:checkbox").click(function(){
});

1

Я бы сделал как-то так, это очень простой вариант навскидку:


function CheckboxLimiter (form, limit)
{
  form = $(form);
  this._form = form;
  this._limit = limit;

  form.on('change', 'input[type=checkbox]', $.proxy(this, 'onChange'));

  this._count = form.find('input[type=checkbox]:checked').length;
}

CheckboxLimiter.prototype.onChange = function (event)
{
  if (event.target.checked)
  {
    if (this._count === this._limit)
    {
      event.target.checked = false;
      alert('...');
    } else
    {
      this._count++;
    }
  } else
  {
    this._count--;
  }
};
 
По DOMReady вешаем эту штуку на требуемую форму:

new CheckboxLimiter(форма, лимит).
 
Код рассчитан на то, что limit больше нуля и при старте страницы отмечено не более limit чекбоксов. Feel free to modify & use etc...
1

<script type='text/javascript'>
var checkCount=0
var maxChecks=5

setChecks(objName);

function setChecks(obj){
if(obj.checked){
checkCount=checkCount+1
}else{
checkCount=checkCount-1
}
if (checkCount>maxChecks){
obj.checked=false
checkCount=checkCount-1
alert('Пожалуйста, выберите не более '+maxChecks+' вопросов')
}
}
</script>
 
0