javascript - すべて選択チェックボックスの追加

Question

このスクリプトのすべてのチェック/チェック解除ボタンを追加したい:

php:

require_once('includes/commons.php');

$query_get_addresses = 'SELECT * FROM user ORDER BY first_name ASC, last_name ASC';
$result_get_addresses = mysql_query($query_get_addresses);
$addresses_count = mysql_num_rows($result_get_addresses);

?>

脚本：

<script>
$(document).ready(function() {
    // initialize
    var recipient = $('input[name=recipient]').val();
    var recipient_array = new Array();
    if(recipient != '') {
        recipient_array = recipient.split(',');
        for(var i = 0; i < recipient_array.length; i++) {
            recipient_array[i] = $.trim(recipient_array[i]);

            if(recipient_array[i] == '')
                recipient_array.splice(i, 1);
        }

        $('input[type=checkbox]').each(function() {
            if($.inArray(this.value, recipient_array) >= 0) {
                $(this).attr('checked', true);
            }
        });
    }
    // add and/or remove
    $('input[type=checkbox]').click(function() {
        var recipient_list = '';

        $('input[type=checkbox]').each(function() {
            var index = $.inArray(this.value, recipient_array);
            if(this.checked) {
                if(index < 0)
                    recipient_array.push(this.value);
            }
            else {
                if(index >= 0) {
                    recipient_array.splice(index, 1);
                }
            }
        });

        $('input[name=recipient]').val(recipient_array);
    });
});
</script>

html:

<h2>Choose recipient</h2>
<div><?php

if($addresses_count > 0) {

    ?><form name="select-recipient-form"><ul><?php

        while($row_get_addresses = mysql_fetch_assoc($result_get_addresses)) {
            $row_get_addresses = unsanitize($row_get_addresses);

            ?><li><input type="checkbox" name="recipient[]" id="recipient-1" value="<?php echo $row_get_addresses['recipient']; ?>" /><label for="recipient-1"><?php echo $row_get_addresses['first_name'].' '.$row_get_addresses['last_name'].' &lt;'.$row_get_addresses['recipient'].'&gt;'; ?></label></li><?php
        }

    ?></ul>
    </form><br /><?php

} else {

    ?><p>You don't have any contacts.</p><?php
}

?>
</div>

私はいくつかのガイドに従おうとしました。たとえば、このようなものですが、動作させることができません。どうすればこれを達成できますか？ありがとう

Answer 1

チェックボックスにクラスを追加してから、次を使用します。

<form ...>
    <input type="checkbox" class="check-class" ... />
    ...
    <button type="button" class="check-all">Check All</button>
</form>

<script type="text/javascript">
    (function() {
        var checked = false;
        $('button.check-all').click(function() {
            checked = !checked;
            $('.checkbox-class').prop('checked', checked); // jQuery 1.6+
            if (checked) $(this).text('Uncheck All');
            else $(this).text('Check All);
        });
    })();
</script>

Answer 2

以下がHTMLの場合 <input class="checkbox-class" type="checkbox" value="1" /><input class="checkbox-class" type="checkbox" value="2" /> <input class="checkbox-class" type="checkbox" value="3" /> <input type="button" id="clickit" value="Check All" />

JSがその仕事をします

$("#clickit").click(function() {
    if ($(this).val() == 'Check All') {
        $('.checkbox-class').attr('checked', 'checked');
        $(this).val('Uncheck All');
    } else {
        $('.checkbox-class').removeAttr('checked');
        $(this).val('Check All');
    }

});

Answer 3

<span><input type="checkbox" class="checkall" />check all</span>

すべてのチェックボックスを除くすべてのチェックボックスにクラスを追加します

<input type="checkbox" class="tocheck ... />
    ...
    ....

$(document).ready(function(){
$('.checkall').click(function() {
    $('.tocheck ').attr('checked', true); 
});
});

Answer 4

このコードは私とうまく動作します

Jクエリ

<script type="text/javascript">
$(document).ready(function(){ 
$("#select_all").change(function(){
  $(".checkbox_class").prop("checked", $(this).prop("checked"));
  });
});
</script>

すべてのチェックボックスにクラスcheckbox_classを追加するだけです

HTML

<input type="checkbox" id="selecctall">

<input class="checkbox_class" name="recipient[]" value="'.$recipientId.'" type="checkbox" />

簡単でシンプル:D

Answer 5

それだけでうまくいきました（ところで、ボタンではなくチェックボックスを使用します）

<script type="text/javascript">
$(document).ready(function(){
    $('#select_all').on('click',function(){
        if(this.checked){
            $('.checkbox').each(function(){
                this.checked = true;
            });
        }else{
             $('.checkbox').each(function(){
                this.checked = false;
            });
        }
    });

    $('.checkbox').on('click',function(){
        if($('.checkbox:checked').length == $('.checkbox').length){
            $('#select_all').prop('checked',true);
        }else{
            $('#select_all').prop('checked',false);
        }
    });
});
</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script>


<ul class="main">
    <li><input type="checkbox" id="select_all" /> Select all</li>
    <ul>
        <li><input type="checkbox" class="checkbox" value="1"/>Item 1</li>
        <li><input type="checkbox" class="checkbox" value="2"/>Item 2</li>
        <li><input type="checkbox" class="checkbox" value="3"/>Item 3</li>
        <li><input type="checkbox" class="checkbox" value="4"/>Item 4</li>
        <li><input type="checkbox" class="checkbox" value="5"/>Item 5</li>
    </ul>
</ul>