Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > JavaScript > JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
3 / 3 / 2
Регистрация: 16.11.2010
Сообщений: 39
1

Обьясните новичку

10.03.2016, 01:09. Показов 1051. Ответов 10
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Думаю для вас все просто будет. Только вот я немогу вообще понять Почему он не работает, когдя через id ему указал (id же уникальные) должен по всей странице перехватывать их.
Есть розпиханые чекбоксы по таблице. И над их связать между собой.
Вообщем вот Код HTML
HTML5
1

<div class='emails_form'>                <table class='emails_table'>                   <thead class="element">                        <td> <input type='checkbox' id='checkall'> </td>                        <td> Кто отправил</td>                        <td> Тема </td>                        <td> Дата </td>                    </thead>                    <tbody class='emails_tbody'>                        <tr>                            <td> <input type='checkbox' name='1_mails' id='thing'> </td>                            <td><marquee behavior='slide' direction='left' bgcolor='#b2b2b2'> 2 </marquee> </td>                            <td> <marquee behavior='slide' direction='left' bgcolor='#b2b2b2'> 2 </marquee> </td>                            <td> 3 </td>                        </tr>                        <tr>                            <td> <input type='checkbox' name='1_mails' id='thing'> </td>                            <td> 1 </td>                            <td> 2 </td>                            <td> 3 </td>                        </tr>                        <tr>                            <td> <input type='checkbox' id=''></td>                            <td> 1 </td>                            <td> 2 </td>                            <td> 3 </td>                        </tr>                       </tbody>                    <tfoot>                        <td onclick='' class='' id=''> галочка </td>                        <td onclick='' class='' id=''> Кто отправил </td>                        <td onclick='' class='' id=''> Тема </td>                        <td onclick='' class='' id=''> Дата </td>                    </tfoot>                </table>            </div>
И вот js Чесно списаный с другой формы и был рабочим )), :

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var checkboxes = document.getElementById('thing'),
    checkall = document.getElementById('checkall');
 
for(var i=0; i<checkboxes.length; i++) {
    checkboxes[i].onclick = function() {
        var checkedCount = document.getElementById('thing:checked').length;
        
        checkall.checked = checkedCount > 0;
        checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
    }
}
 
checkall.onclick = function() {
    for(var i=0; i<checkboxes.length; i++) {
        checkboxes[i].checked = this.checked;
    }
}
0
Лучшие ответы (1)
Сообщение: #8860242
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 10.03.2016, 01:09
Ответы с готовыми решениями:

Обьясните че за программа...
Здраствуйте, помогите пожалуйсто, пришло тут письмо, я сунулся в html а там хакерская тема вроде...

Обьясните функцию
вот эта функия &lt;input type=&quot;submit&quot; value=&quot;Добавить&quot;&gt; аккумулирует значения, которые я буду вводить...

get set обьясните пожалуйста
obj = { value: 0, get sin() { return Math.sin(this.value) } set sin(n) { ...

Обьясните пожалуйста небольшой код
Добрый день! Какой смысл от этого куска кода, обьясните пожалуйста ! ...

10
Эксперт PHP
4925 / 3920 / 1620
Регистрация: 24.04.2014
Сообщений: 11,441
10.03.2016, 01:15 2
id должен быть уникальным - то есть 1 id на всю страницу

Не по теме:

код можно было бы и отформатировать

1
3 / 3 / 2
Регистрация: 16.11.2010
Сообщений: 39
10.03.2016, 01:30  [ТС] 3
Цитата Сообщение от Jewbacabra Посмотреть сообщение
id должен быть уникальным - то есть 1 id на всю страницу

Не по теме:

код можно было бы и отформатировать

Ок, исправим тогда на класс, и использую querySelectorAll
Но я ето уже пробывал, и ситуация таже.
Видимость Елементов чекбоксов ?

Добавлено через 3 минуты
Ураа...
Заработал
HTML5
1

<div class='emails_form'>                <table class='emails_table'>                   <thead class="element">                        <td> <input type='checkbox' id='checkall'> </td>                        <td> Кто отправил</td>                        <td> Тема </td>                        <td> Дата </td>                    </thead>                    <tbody class='emails_tbody'>                        <tr>                            <td> <input type='checkbox' name='1_mails' class='thing'> </td>                            <td><marquee behavior='slide' direction='left' bgcolor='#b2b2b2'> 2 </marquee> </td>                            <td> <marquee behavior='slide' direction='left' bgcolor='#b2b2b2'> 2 </marquee> </td>                            <td> 3 </td>                        </tr>                        <tr>                            <td> <input type='checkbox' name='1_mails' class='thing'> </td>                            <td> 1 </td>                            <td> 2 </td>                            <td> 3 </td>                        </tr>                        <tr>                            <td> <input type='checkbox' id=''></td>                            <td> 1 </td>                            <td> 2 </td>                            <td> 3 </td>                        </tr>                       </tbody>                    <tfoot>                        <td onclick='' class='' id=''> галочка </td>                        <td onclick='' class='' id=''> Кто отправил </td>                        <td onclick='' class='' id=''> Тема </td>                        <td onclick='' class='' id=''> Дата </td>                    </tfoot>                </table>            </div>
и етот ЖС :

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var checkboxes = document.querySelectorAll('input.thing'),
    checkall = document.getElementById('checkall');
 
for(var i=0; i<checkboxes.length; i++) {
    checkboxes[i].onclick = function() {
        var checkedCount = document.querySelectorAll('input.thing:checked').length;
        
        checkall.checked = checkedCount > 0;
        checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
    }
}
 
checkall.onclick = function() {
    for(var i=0; i<checkboxes.length; i++) {
        checkboxes[i].checked = this.checked;
    }
}
0
10 / 10 / 10
Регистрация: 23.07.2015
Сообщений: 55
10.03.2016, 01:31 4
Старайтесь оформлять ваш код красиво, что бы другие люди сразу видели что к чему. Id должен быть уникальным.
var checkboxes = document.getElementById('thing') ----> я так понимаю вы хотите записать в переменную checkboxeS все элементы thing, но увы таким образом это не сделать. document.getElementById() - ищет только один элемент с уникальным Id.
checkboxes.length -- длина чего? (Null)
А вот и ошибка - Uncaught TypeError: Cannot read property 'length' of null.

Пример оформления.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<div class='emails_form'>                
    <table class='emails_table'>                   
        <thead class="element">                        
            <td> <input type='checkbox' id='checkall'> </td>                       
            <td> Кто отправил</td>                      
            <td> Тема </td>                   
            <td> Дата </td>              
        </thead>                
        <tbody class='emails_tbody'>               
            <tr>                      
                <td> <input type='checkbox' name='1_mails' id='thing'> </td>                    
                <td><marquee behavior='slide' direction='left' bgcolor='#b2b2b2'> 2 </marquee> </td>   
                <td> <marquee behavior='slide' direction='left' bgcolor='#b2b2b2'> 2 </marquee> </td>                     
                <td> 3 </td>                     
            </tr>                     
            <tr>                          
                <td> <input type='checkbox' name='1_mails' id='thing'> </td>
                <td> 1 </td>                           
                <td> 2 </td>                      
                <td> 3 </td>                   
            </tr>                     
            <tr>                  
                <td> <input type='checkbox' id=''></td>        
                <td> 1 </td>                 
                <td> 2 </td>            
                <td> 3 </td>                      
            </tr>                      
        </tbody>                  
        <tfoot>                      
            <td onclick='' class='' id=''> галочка </td>     
            <td onclick='' class='' id=''> Кто отправил </td>         
            <td onclick='' class='' id=''> Тема </td>                 
            <td onclick='' class='' id=''> Дата </td>               
        </tfoot>            
    </table>          
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var checkboxes = document.getElementById('thing'), 
checkall = document.getElementById('checkall'); 
 
for(var i=0; i<checkboxes.length; i++) { 
    checkboxes[i].onclick = function() { 
        var checkedCount = document.getElementById('thing:checked').length; 
        checkall.checked = checkedCount > 0; 
        checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length; 
    }; 
} 
 
checkall.onclick = function() { 
    for(var i=0; i<checkboxes.length; i++) { 
        checkboxes[i].checked = this.checked; 
    } 
};
1
3 / 3 / 2
Регистрация: 16.11.2010
Сообщений: 39
10.03.2016, 01:41  [ТС] 5
Чет всеравно не понял
на сервесе jsfiddle.net Работает, А на старничке Не работает
0
10 / 10 / 10
Регистрация: 23.07.2015
Сообщений: 55
10.03.2016, 01:57 6
Лучший ответ Сообщение было отмечено j_gangster как решение

Решение

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<div class='emails_form'>             
    <table class='emails_table'>              
        <thead class="element">                       
            <td> <input type='checkbox' id='checkall'> </td>     
            <td> Кто отправил</td>                 
            <td> Тема </td>                   
            <td> Дата </td>           
        </thead>           
        <tbody class='emails_tbody'>     
            <tr>         
                <td> <input type='checkbox' name='1_mails' class='thing'> </td>       
                <td><marquee behavior='slide' direction='left' bgcolor='#b2b2b2'> 2 </marquee> </td>
                <td> <marquee behavior='slide' direction='left' bgcolor='#b2b2b2'> 2 </marquee> </td>        
                <td> 3 </td>   
            </tr>                        
            <tr>                    
                <td> <input type='checkbox' name='1_mails' class='thing'> </td>      
                <td> 1 </td>             
                <td> 2 </td>        
                <td> 3 </td>        
            </tr>        
            <tr>                           
                <td> <input type='checkbox' class='thing'></td>        
                <td> 1 </td>             
                <td> 2 </td>  
                <td> 3 </td>    
            </tr>     
        </tbody>                  
        <tfoot>                      
            <td onclick='' class='' id=''> галочка </td>   
            <td onclick='' class='' id=''> Кто отправил </td>    
            <td onclick='' class='' id=''> Тема </td>      
            <td onclick='' class='' id=''> Дата </td>      
        </tfoot>           
    </table>            
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

window.onload = function() {
 
    var checkboxes = document.getElementsByClassName('thing'), 
    checkall = document.getElementById('checkall'); 
    
    for(var i=0; i < checkboxes.length; i++) { 
        checkboxes[i].onclick = function() { 
            var checkedCount = document.getElementsByClassName('thing:checked').length; 
            checkall.checked = checkedCount > 0; 
            checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length; 
        }; 
    } 
    
    checkall.onclick = function() { 
        for(var i=0; i < checkboxes.length; i++) { 
            checkboxes[i].checked = this.checked; 
        } 
    };
 
}
1
3 / 3 / 2
Регистрация: 16.11.2010
Сообщений: 39
10.03.2016, 02:02  [ТС] 7
Цитата Сообщение от HarizZ Посмотреть сообщение
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<div class='emails_form'>             
    <table class='emails_table'>              
        <thead class="element">                       
            <td> <input type='checkbox' id='checkall'> </td>     
            <td> Кто отправил</td>                 
            <td> Тема </td>                   
            <td> Дата </td>           
        </thead>           
        <tbody class='emails_tbody'>     
            <tr>         
                <td> <input type='checkbox' name='1_mails' class='thing'> </td>       
                <td><marquee behavior='slide' direction='left' bgcolor='#b2b2b2'> 2 </marquee> </td>
                <td> <marquee behavior='slide' direction='left' bgcolor='#b2b2b2'> 2 </marquee> </td>        
                <td> 3 </td>   
            </tr>                        
            <tr>                    
                <td> <input type='checkbox' name='1_mails' class='thing'> </td>      
                <td> 1 </td>             
                <td> 2 </td>        
                <td> 3 </td>        
            </tr>        
            <tr>                           
                <td> <input type='checkbox' class='thing'></td>        
                <td> 1 </td>             
                <td> 2 </td>  
                <td> 3 </td>    
            </tr>     
        </tbody>                  
        <tfoot>                      
            <td onclick='' class='' id=''> галочка </td>   
            <td onclick='' class='' id=''> Кто отправил </td>    
            <td onclick='' class='' id=''> Тема </td>      
            <td onclick='' class='' id=''> Дата </td>      
        </tfoot>           
    </table>            
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

window.onload = function() {
 
    var checkboxes = document.getElementsByClassName('thing'), 
    checkall = document.getElementById('checkall'); 
    
    for(var i=0; i < checkboxes.length; i++) { 
        checkboxes[i].onclick = function() { 
            var checkedCount = document.getElementsByClassName('thing:checked').length; 
            checkall.checked = checkedCount > 0; 
            checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length; 
        }; 
    } 
    
    checkall.onclick = function() { 
        for(var i=0; i < checkboxes.length; i++) { 
            checkboxes[i].checked = this.checked; 
        } 
    };
 
}

Большое Спасибо
0
10 / 10 / 10
Регистрация: 23.07.2015
Сообщений: 55
10.03.2016, 02:24 8
Это код должен удовлетворять ваше ТЗ. Когда все "чекбоксы" выбраны - главный тоже выбирается и наоборот.
Немного изменил выше скинутый код.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

window.onload = function() {
 
    var checkboxes = document.getElementsByClassName('thing'), 
    checkall = document.getElementById('checkall'); 
 
    for(var i=0; i < checkboxes.length; i++) { 
        checkboxes[i].onclick = function() { 
            var checkedCount = 0;
            for(var j=0; j < checkboxes.length; j++) {
                if(document.getElementsByClassName('thing')[j].checked) {
                    checkedCount++;
                }
            }
            checkall.checked = checkedCount > 0; 
            checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length; 
        }; 
    } 
 
    checkall.onclick = function() { 
        for(var i=0; i < checkboxes.length; i++) { 
            checkboxes[i].checked = this.checked; 
        } 
    };
 
}
1
Эксперт PHP
936 / 693 / 236
Регистрация: 01.02.2015
Сообщений: 1,848
10.03.2016, 02:45 9
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

window.onload = function() {
  var tbody = document.querySelector('.emails_tbody'),
    checkall = document.getElementById('checkall'),
    checkboxes = document.querySelectorAll('.emails_tbody input'),
    len = checkboxes.length;
 
  tbody.onclick = function(e) {
    var el = e ? e.target : window.event.srcElement;
    if (el.tagName !== "INPUT") return;
    checkall.checked = len == tbody.querySelectorAll('input:checked').length;
  }
 
  checkall.onclick = function() {
    for (var i = 0; i < len; i++) checkboxes[i].checked = this.checked;
  };
};
1
7 / 8 / 0
Регистрация: 29.11.2015
Сообщений: 162
14.03.2016, 16:27 10
Есть сайт с бесплатным хостингом на гэмайле с голимым HTML. Хочется добавить на него какую-нибудь небольшую визуальную фичу на JavaScriptе.
Буду рад в данном плане вашим советам и рекомендациям. Только, плиз, опишите процесс добавления сего JavaScriptа на сайт поподробнее!
0
3 / 3 / 2
Регистрация: 16.11.2010
Сообщений: 39
15.03.2016, 02:28  [ТС] 11
Цитата Сообщение от Mamuk Посмотреть сообщение
Есть сайт с бесплатным хостингом на гэмайле с голимым HTML. Хочется добавить на него какую-нибудь небольшую визуальную фичу на JavaScriptе. Буду рад в данном плане вашим советам и рекомендациям. Только, плиз, опишите процесс добавления сего JavaScriptа на сайт поподробнее!
Создай файл ***.js, Внео вставь нужный тебе код.
После сохранил и закрыл.
Открыл свой сайт, или Любой стартовый HTML файл. и прописываешь волшибную строку. в заголовке(сверху)

HTML5
1

<!DOCTYPE html><html lang='ru'><head> <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'> <title>Test Email Sent</title> <link rel="stylesheet" href="./css/global.css"> <link rel='stylesheet' href='./css/sent_mail.css'> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="./js/choice.js"></script> <script src="./js/sent.js"></script></head><body>..............
Ничего сложного нет в подключении.

Добавлено через 9 минут
или тебя интересовало именно полное подключение. ?
Смотри внимательней и сам поймешь.
Javascript
1

Javascript1 window.onload = function()
- Ето условие авто запуска всего скрипта, после полной прогрузки страницы.
Javascript
1

var checkboxes = document.getElementsByClassName('thing'),
- /* Тут Указываю какие Чекбоксы индивидуально */
вот они в HTML ->
HTML5
1

<td> <input type='checkbox' name='1_mails' class='thing'> </td>
Javascript
1

Javascript1 checkall = document.getElementById('checkall');
- /* Тут Указываю Главный Чекбокс, который отмечает Все остальные */
1
15.03.2016, 02:28
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 15.03.2016, 02:28
Помогаю со студенческими работами здесь

Обьясните новичку
Говориться что это два одинаковых кода, но на мой взгялд они разные. Может кто объяснить? ...

Обьясните новичку
ни как немогу прояснить ситуацию с рпзными годами Вы создадите небольшую программу, в...

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

обьясните новичку по jquery
У меня есть два демо примера, один с jquery, другой без: &lt;script language=&quot;JavaScript&quot;&gt;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru