English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
В повседневных проектах, при работе с списковыми статьями или данными, обычно используется функция выбора всех или всех не выбирать дляcheckbox. В предыдущих проектах я также писал JavaScript для выбораcheckbox, но никогда не систематизировал их. Накануне один из моих коллег столкнулся с этой проблемой, и я решил потратить немного времени, чтобы написать версии на原生JS и jQuery. Учитывая гибкость использования, я не упаковал их, и пользователи должны самостоятельно изменить соответствующие параметры при использовании.
Описание функции, нажмите здесь, чтобы посмотретьDEMO демонстрация
1. Одновременное реализация флажка выбора всех/не выбора всех, то есть состояние флажков в списке совпадает со状态下 флажка перед выбором всех/не выбора всех;
2. Автоматически изменять состояние флажка выбора всех/не выбора всех, то есть когда все флажки в списке выбраны, флажок выбора всех/не выбора всех также выбран, и наоборот;
3. Внутренняя строка списка также может выбирать флажок, и это будет связано с функциями 1 и 2.
Кроме того,本文重点在于实现全选，鼠标悬停时背景变色为简单实现，更完善的功能请参考：
https://ru.oldtoolbag.com/article/24125.htm
Ядро кода с использованием原生 JS
Код HTML
<form id="js" name="js" action="#"> <h5>Пример с использованием原生 JS</h5> <dl> <dt><label for="js_chk_0"><input type="checkbox" id="js_chk_0" name="chk_can" value="" />Выберите все/Не выбирать все</label></dt> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />Реализация выбора всех/не выбора всех с помощью原生 JS, также можно выбрать или取消选择行</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />Реализация выбора всех/не выбора всех с помощью原生 JS, также можно выбрать или取消选择行</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />Реализация выбора всех/не выбора всех с помощью原生 JS, также можно выбрать или取消选择行</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />Реализация выбора всех/не выбора всех с помощью原生 JS, также можно выбрать или取消选择行</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />Реализация выбора всех/не выбора всех с помощью原生 JS, также можно выбрать или取消选择行</dd> <dt><label for="js_chk_1"><input type="checkbox" id="js_chk_1" name="chk_can" value="" />Выберите все/Не выбирать все</label></dt> </dl> </form>
原生js代码
//原生JS实现全选全不选类
window.onload = function iCheckAll(){
var js_chk = document.forms['js'].chk_can;
var jsitems = document.forms['js'].jsitems;
var jsrows = document.getElementById('js').getElementsByTagName('dd');
//Определение количества установленных флажков и реализация состояния выбора/не выбора всех флажков
var chk_canle = function() {
var checkedLen = 0;
//Вычисление количества флажков, установленных в选中状态下
for (var m = 0; m < jsitems.length; m++) {
if (jsitems[m].checked) {
checkedLen += 1;
}
}
//Проверка количества выбранных элементов и фактического количества, чтобы определить состояние выбора / выбора
for (var m = 0; m < js_chk.length; m++) {
js_chk[m].checked = (jsitems.length == checkedLen);
}
}
//全选与全不选一体实现
for (var i = 0; i < js_chk.length; i++) {
js_chk[i].onclick = function() {
//Синхронизация флажков выбора в списке и флажков выбора
for (var m = 0; m < jsitems.length; m++) {
jsitems[m].checked = this.checked;
}
//Однородное состояние флажков выбора
for (var m = 0; m < js_chk.length; m++) {
js_chk[m].checked = this.checked;
}
}
}
//Клик на флажок в списке
for (var i = 0; i < jsitems.length; i++) {
jsitems[i].onclick = function(e) {
//阻止冒泡,避免行点击事件中,直接选择选框无效
e && e.stopPropagation ? e.stopPropagation() : window.event.cancelBubble=true;
chk_canle();
}
}
//Клик внутри строки
for (var i = 0; i < jsrows.length; i++) {
jsrows[i].onclick = function() {
//При нажатии на строку, состояние флажка в строке изменяется на обратное
this.getElementsByTagName('input')[0].checked = !this.getElementsByTagName('input')[0].checked;
chk_canle();
}
//Вход и выход см. http://mrthink.net/javascript-tagnames-highlight/
jsrows[i].onmouseover = function() {
this.className = 'hover';
}
jsrows[i].onmouseout = function(){
this.className = '';
}
}
}
Ядро кода jQuery
Код HTML
<form id="jq" name="jq" action="#"> <h5>Пример jQuery</h5> <dl> <dt><label for="jq_chk_0"><input type="checkbox" id="jq_chk_0" name="chk_can" value="" />Выбрать все/Не выбирать все</label></dt> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />Выбор всех/Отменить выбор всех на основе jQuery, также можно выбрать или отменить выбор строки</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />Выбор всех/Отменить выбор всех на основе jQuery, также можно выбрать или отменить выбор строки</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />Выбор всех/Отменить выбор всех на основе jQuery, также можно выбрать или отменить выбор строки</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />Выбор всех/Отменить выбор всех на основе jQuery, также можно выбрать или отменить выбор строки</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />Выбор всех/Отменить выбор всех на основе jQuery, также можно выбрать или отменить выбор строки</dd> <dt><label for="jq_chk_1"><input type="checkbox" id="jq_chk_1" name="chk_can" value="" />Выбрать все/Не выбирать все</label></dt> </dl> </form>
jquery核心实现代码
//jQ实现全选全不选
$(function(){
var _jq_chk = $('#jq>dl>dt>label>:checkbox');
var _jqitems = $(':checkbox[name=jqitems]');
var _rows = $('#jq>dl>dd');
//全选与全不选一体实现
_jq_chk.click(function(){
//列表中选框和全选选框统一状态
_jqitems.add(_jq_chk).attr('checked', this.checked);
});
//选框的点击事件
_jqitems.click(function(e){
//阻止冒泡,避免行点击事件中,直接选择选框无效
e.stopPropagation();
//Проверка количества выбранных элементов и фактического количества, чтобы определить состояние выбора / выбора
_jq_chk.attr('checked', _jqitems.size() == _jqitems.filter(':checked').size());
});
//点选行时选中行内的checkbox
_rows.bind({
mouseenter: function(){
$(this).addClass('hover');
mouseleave: function(){
$(this).removeClass('hover');
//Выбор
click: function(){
//При нажатии на строку, состояние флажка в строке изменяется на обратное
$(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').get(0).checked)
//Проверка количества выбранных элементов и фактического количества, чтобы определить состояние выбора / выбора
_jq_chk.attr('checked', _jqitems.size() == _jqitems.filter(':checked').size());
}
});
});
Этот код больше, чем обычный код реализации, в основном проявляется в том, что можно выбрать строку, чтобы реализовать функцию выбора. Больше функций, больше кода. Вы можете вносить изменения в соответствии с вашими потребностями.
Вероятно, многие разработчики веб-сайтов встречаются с некоторыми проблемами JS, использование JQ или JS, это часто беспокоит нас, но на самом деле JS является общим, а JQ основан на загруженной библиотеке JQ, поэтому на самом деле нет никакой разницы в реализации.
Объявление: контент этой статьи предоставлен из Интернета, авторские права принадлежат соответствующему владельцу, контент предоставлен пользователями Интернета в порядке добровольного вклада и загрузки, сайт не обладает правами собственности, не underwent редактирование и не несет ответственности за связанные с этим юридические обязательства. Если вы обнаружите материалы,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма, пожалуйста, замените # на @) для подачи жалоб, и предоставьте соответствующие доказательства. Если обнаружены случаи нарушения авторских прав, сайт немедленно удаляет涉嫌侵权的内容.