0

チェックされている場合、すべてのチェックボックスをチェックできるチェックボックスを追加するにはどうすればよいですか?

「すべてチェック」チェックボックスに表示/非表示機能を追加するにはどうすればよいですか。すべてのチェックボックスがチェックされている場合は、送信ボタンも表示する必要があります。

$(document).ready(function() {

var $submit = $("#submit_prog").hide(),
    $cbs = $('input[name="prog"]').click(function() {
        $submit.toggle( $cbs.is(":checked") );
    });

});

<input type="checkbox" name="?" value="?">  // check all checkbox

<input type="checkbox" name="prog" value="1">
<input type="checkbox" name="prog" value="2">

<input type="submit" id="submit_prog" value='Submit' />
4

5 に答える 5

1

すべて選択チェックボックスにIDを付けて、次のように言いselectallます

$('#selectall').click(function(){
    if (this.checked){
        $('input[name="prog"]').prop('checked', true);
        $submit.toggle( true );
    }
});

チェックボックスの選択を解除したい場合

$('#selectall').click(function(){
    $('input[name="prog"]').prop('checked', this.checked);
    $submit.toggle( this.checked);
});

$cbs = $('input[name="prog"]').click(function() {
    $submit.toggle( $cbs.filter(':checked').length == 0 );
    if (!this.checked) $('#selectall').prop('checked', false);
});
于 2013-04-27T07:34:11.293 に答える
1
  1. select all chckbox の仮定 id は selall です。
  2. select all を使用して選択するすべてのチェック ボックスのクラスを作成します。
$('#selall').click(function(event) {   
    if(this.checked) {
        // Iterate each checkbox
        $('.yourchckbox').each(function() {
            this.checked = true;                        
        });
        $('#submit_prog').show();
    }
    else { 
    $('.yourchckbox').each(function() 
    { this.checked = false; }); 
    $('#submit_prog').hide()
    }
});
  $('.yourchckbox').click(function(event) { 
   if(!(this.checked)) {
   $('#selall').prop('checked', false);   
   }

  });
于 2013-04-27T07:25:42.843 に答える
0

とてもシンプルです。

このチェックボックスに名前を付けましょう<input type="checkbox" name="check_all" value="1">

そして、イベントを追加します:

$('input[name="check_all"]').click( function() {
    if( $(this).is(':checked') ) {
        $('input[name="prog"]').attr('checked', 'checked');
    } else {
        $('input[name="prog"]').removeAttr('checked');
    }

    $('input[name="prog"]:eq(0)').change(); //firing event which we will catch
});

次に、すべてinput[name="prog"]がチェックされているかどうかを確認する必要があります。

$('input[name="prog"]').change( function() {
    if( $('input[name="prog"]:not(:checked)').length ) {
        $('#submit_prog').hide();
    } else {
        $('#submit_prog').show();
    }
});
于 2013-04-27T07:28:46.020 に答える
0

チェックですべてのチェックボックスを選択し、すべてのチェックボックスがチェックされているときにチェックし#allます#all

 <SCRIPT language="javascript">
    $(function(){

        $("#all").click(function () {
              $('.one').attr('checked', this.checked);
     if (this.checked) {$('#submit_prog').hide();}
(this.checked)?$('#submit_prog').show():$('#submit_prog').hide();
        });

        $(".one").click(function(){

            if($(".one").length == $(".one:checked").length) {
                $("#all").attr("checked", "checked");
                $('#submit_prog').show();
            } else {
                $("#all").removeAttr("checked");
$('#submit_prog').hide();
            }

        });
    });
    </SCRIPT>

チェックボックスの ID とクラスを変更する

<input type="checkbox" id="all" >  // check all checkbox

<input type="checkbox" name="prog" class="one" value="1">
<input type="checkbox" name="prog" class="one" value="2">
于 2013-04-27T07:30:42.207 に答える
0

試す

$('input:checkbox[name!="prog"]').click(function(){
     $('input:checkbox[name="prog"]').prop('checked', $(this).is(':checked'))
})

または、チェックボックスIDをに変更できる場合selall

$('#selall').click(function(){
     $('input:checkbox').prop('checked', $(this).is(':checked'))
})
于 2013-04-27T07:26:15.267 に答える