1

How can I validate the code below with 2 alerts?

The first check is that at least 1 checkbox is selected - if not, alert a message saying "Please select at least 1 checkbox!". The second should alert "Are you sure you want to delete?" and submit:

SCRIPT:

<script type="text/javascript">
 $(document).ready(function() {

$("#delete").click(function() 
{   
    if (confirm('Are you sure you want to delete?')) {
                $('#form_test').submit();
    }
});

 });
</script>

HTML:

<a id="delete" href="#">Delete Images</a>

<form id="form_test" method='post' action=''>
    <input type="checkbox" name="remove[]" />
     <input type="checkbox" name="remove[]" />
</form>
4

3 に答える 3

3 
$("#delete").click(function() {   
 var exists = $('input[type=checkbox][name^=remove]:checked').length;
    if( !exists ) {
         alert('Please select at least 1 checkbox!');
    } else if(confirm('Are you sure you want to delete?')) {
         $('#form_test').submit();
    }
});

デモ

ノート

jQuery の新しいバージョンでは、:checkboxセレクターが非推奨になりました。非推奨アイテムのリスト。

@Blenderのコメントに返信

jQuery doc:checkboxから、私はこれを見つけました:

$(':checkbox') は $('[type=checkbox]') と同等です。他の疑似クラス セレクター (「:」で始まるセレクター) と同様です。

タグ名またはその他のセレクターを前に付けることをお勧めします。それ以外の場合は、ユニバーサル セレクター ("*") が暗示されます。

つまり、そのままの $(':checkbox') は $('*:checkbox') と同等であるため、代わりに $('input:checkbox') を使用する必要があります。

于 2012-09-13T17:49:58.850 に答える
2

これを試すことができます：

$("#delete").click(function() {   
 var exists = $('input[type=checkbox]:checked').length;
     if( !exists ) {
         alert('Please Select any checkbox');
    } else {
      if (confirm('Are you sure you want to delete?')) {
         $('#form_test').submit();
       }
    }
});​

ここに作業フィドルがあります

于 2012-09-13T17:56:07.620 に答える
1

プロパティを使用できlengthます。

$("#delete").click(function() {
    if (!$('input[type=checkbox]:checked').length) {
        alert('Please select at least 1 checkbox!')
    }   
    else if (confirm('Are you sure you want to delete?')) {
        $('#form').submit();
    }
});
于 2012-09-13T17:50:40.390 に答える