Question

我正在尝试使用由foreach函数生成的一堆复选框上的js创建一个全选按钮。

这是select all / deselect所有函数的脚本最终：

<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);
    }

Answer 1

我会推荐一种不同的方法。使用PHP输出JavaScript并不是一个好主意，因为代码很难理解和维护。

相反，在所有复选框中添加一个类，所以你得到这样的东西：

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

然后你可以使用几行jQuery执行JavaScript，不涉及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;">

Here是一个有效的JSFiddle。

不使用jQuery

我建议您查看this关于getElementByClass()的问题。

Answer 2

All jQuery Example

如果你想使用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受到损害。

Answer 3

工作示例！

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;">

选择所有功能不起作用

3 个答案: