Выбрать все функции не работает

Я пытаюсь создать кнопку "Выбрать все", используя js на пачке флажков, сгенерированных функцией foreach.

Вот что в итоге получается для сценария выбора всех / отмены выбора всех функций:

<script>
     function selectAll() {
            document.getElementById('abbsmalone_select').checked = true; 
            document.getElementById('cchkorea_select').checked = true; 
            document.getElementById('amygrant_select').checked = true; 
            document.getElementById('long_select').checked = true; 
                }
    </script>
    <script>
     function deselectAll() {
            document.getElementById('abbsmalone_select').checked = false; 
            document.getElementById('cchkorea_select').checked = false; 
            document.getElementById('amygrant_select').checked = false; 
            document.getElementById('long_select').checked = false; 
                }
    </script>

Вот фактический скрипт PHP для создания функций:

<script>
     function selectAll() {
<?PHP 
        get_friends_select();
        foreach ($_SESSION['friends'] as $friend) {
            echo "document.getElementById('" . $friend . "_select').checked = true; 
            ";
        }
?>
    }
    </script>
    <script>
     function deselectAll() {
<?PHP 
        get_friends_select();
        foreach ($_SESSION['friends'] as $friend) {
            echo "document.getElementById('" . $friend . "_select').checked = false; 
            ";
        }
?>
    }
    </script>

Вот код для кнопок:

<input name="deselect_all" type="button" class="form_button2" onclick="deselectAll()" value="select all" style="float: left;">
<input name="select_all" type="button" class="form_button2" onclick="selectAll()" value="deselect all" style="float: left;">

Ни одна из кнопок не работает. Разве вы не можете сделать это таким образом? Или мой код неверен?:-/

ОБНОВИТЬ:

Как и предполагалось, я попробовал следующее, но это все еще не работает.

<input type="checkbox" class="friend_select" name="abbsmalone_select"  id="abbsmalone_select" value="yes" checked='checked' style="display: none;">

function selectAll() {
        jQuery(".friend_select").prop('checked', true);
    }

    function deselectAll() {
        jQuery(".friend_select").prop('checked', false);
    }
Источник

3 ответа

Я бы порекомендовал другой подход. Вывод JavaScript с помощью PHP не очень хорошая идея, так как код очень сложен для понимания и сопровождения.

Вместо этого добавьте класс ко всем флажкам, чтобы вы получили что-то вроде этого:

<input type="checkbox" class="friend" id="abbsmalone_select" />
<input type="checkbox" class="friend" id="cchkorea_select" />
...

Затем вы можете сделать JavaScript с помощью нескольких строк jQuery, без участия PHP. (Я уверен, что это можно сделать и без jQuery, но как только вы начнете использовать его, вы настолько привыкнете к нему, что забудете, как писать JavaScript без него...)

function selectAll() {
    jQuery(".friend").prop('checked', true);
}

function deselectAll() {
    jQuery(".friend").prop('checked', false);
}

Затем вам нужно запустить JavaScript для регистрации событий нажатия:

jQuery(function() {
    //This code is run when the document has loaded.
    jQuery("#deselect_all").click(deselectAll);
    jQuery("#select_all").click(selectAll);
});

Теперь вы можете удалить onclick с кнопок. Я также изменил name тег к id тег, но если вы хотите сохранить его как name Вы можете просто изменить "#deselect_all" выше, чтобы "[name='deselect_all']", Итак, код для кнопок:

<input name="deselect_all" type="button" class="form_button2" value="deselect all" style="float: left;">
<input name="select_all" type="button" class="form_button2"  value="select all" style="float: left;">

Вот рабочий JSFiddle.

Делать это без JQuery

Я бы порекомендовал посмотреть на этот вопрос о getElementByClass(),

Источник

Пример всех jQuery

Если вы хотите использовать jQuery, могу ли я предложить разделить код? Сначала создайте файл для хранения только jQuery / JavaScript

jQuery - (functions.js)

$(function() {

    function selectAll() {
        $('.selections').prop('checked', true);
    }
    function deselectAll() {
        $('.selections').prop('checked', true);    
    }

    $(document).on('click', 'input[name="select_all"]', function(){
        selectAll();
    });
    $(document).on('click', 'input[name="deselect_all"]', function(){
        deselectAll();
    });
});

Здесь код предполагает, что к элементам добавлен класс (selectionsим, чтобы сделать их выбор в качестве группы легче. Если мне нужно добавить дополнительные флажки, все, что мне нужно сделать, это изменить HTML, убедившись, что новые флажки имеют необходимый класс без необходимости изменения JS.

Мы можем выбирать кнопки на основе уже существующей информации в разметке, и код легко читается и имеет смысл. При необходимости вы можете разместить дополнительные функции в коде для каждой кнопки. Вы также можете изменить это, чтобы использовать только одну кнопку, изменяя функцию кнопки в зависимости от ее текущего состояния.

HTML

После скрипта, в который вы включаете jQuery, вы должны включить созданный вами файл jQuery / JavaScript -

<script src="functions.js"></script>

Вот ваши кнопки с удаленным встроенным JavaScript. -

<input name="select_all" type="button" class="form_button2" value="select all" style="float: left;">
<input name="deselect_all" type="button" class="form_button2" value="deselect all" style="float: left;">

Вот ваши флажки с selections добавлен класс -

<input name="abbsmalone_select" class="selections" type="checkbox" />
<input name="cchkorea_select" class="selections" type="checkbox" />
<input name="amygrant_select" class="selections" type="checkbox" />
<input name="long_select" class="selections" type="checkbox" />

При создании этих скриптов не пострадал PHP.

Источник

Рабочий пример!

function selectAll() {
            document.getElementById('abbsmalone_select').checked = true; 
            document.getElementById('cchkorea_select').checked = true; 
            document.getElementById('amygrant_select').checked = true; 
            document.getElementById('long_select').checked = true; 
                }

     function deselectAll() {
            document.getElementById('abbsmalone_select').checked = false; 
            document.getElementById('cchkorea_select').checked = false; 
            document.getElementById('amygrant_select').checked = false; 
            document.getElementById('long_select').checked = false; 
                }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" class="friend_select" name="abbsmalone_select"  id="abbsmalone_select" value="yes" checked='checked' >
<input type="checkbox" class="friend_select" name="cchkorea_select"  id="cchkorea_select" value="yes" checked='checked' >
<input type="checkbox" class="friend_select" name="amygrant_select"  id="amygrant_select" value="yes" checked='checked' >
<input type="checkbox" class="friend_select" name="long_select"  id="long_select" value="yes" checked='checked' >




<input name="deselect_all" type="button" class="form_button2" onclick="selectAll()" value="select all" style="float: left;">
<input name="select_all" type="button" class="form_button2" onclick="deselectAll()" value="deselect all" style="float: left;">

Источник
Другие вопросы по тегам