▼チェックボックスの範囲選択をすることができます。
まず、選択を開始するチェックボックスにチェックを入れ、
選択を終了するチェックボックスを[Shift]キーを押しながらクリックしてください。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>shiftcheckbox | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript" src="/content/lib/jquery/jquery.shiftcheckbox.js"></script> <script type="text/javascript"> $(function($){ $.shiftcheckbox.init('shiftCheckbox'); $("input[type='checkbox']").click(function(){ var res=""; $("input[type='checkbox']").each(function(i){ if($(this).attr("checked")){ res+=$(this).val()+","; } }); $("#res").html("<p>選択されているチェックボックスの値:<span style='color:red'>"+res+"</span>"); }); }); </script> <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head> <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1> <h3 class='h'>実行結果</h3> <div id="wrap"> <h1><a href='http://sanisoft-demo.com/jquery/plugins/shiftcheckbox/'>shiftcheckbox</a> | 設置サンプル</h1> <p>▼チェックボックスの範囲選択をすることができます。<br> まず、選択を開始するチェックボックスにチェックを入れ、<br> 選択を終了するチェックボックスを[Shift]キーを押しながらクリックしてください。</p> <!-- CODE --> <form action="#"> <fieldset> <legend>チェックボックスの範囲選択</legend> <p> <input type="checkbox" name="rating" value="1" class="input shiftCheckbox" /> 1<br> <input type="checkbox" name="rating" value="2" class="input shiftCheckbox" /> 2<br> <input type="checkbox" name="rating" value="3" class="input shiftCheckbox" /> 3<br> <input type="checkbox" name="rating" value="4" class="input shiftCheckbox" /> 4<br> <input type="checkbox" name="rating" value="5" class="input shiftCheckbox" /> 5<br> <input type="checkbox" name="rating" value="6" class="input shiftCheckbox" /> 6<br> <input type="checkbox" name="rating" value="7" class="input shiftCheckbox" /> 7<br> <input type="checkbox" name="rating" value="8" class="input shiftCheckbox" /> 8<br> <input type="checkbox" name="rating" value="9" class="input shiftCheckbox" /> 9<br> <input type="checkbox" name="rating" value="10" class="input shiftCheckbox" /> 10<br> <input type="checkbox" name="rating" value="11" class="input shiftCheckbox" /> 11<br> <input type="checkbox" name="rating" value="12" class="input shiftCheckbox" /> 12<br> <input type="checkbox" name="rating" value="13" class="input shiftCheckbox" /> 13 </p> <p id="res"></p> </fieldset> </form> <!-- / CODE --> </div> </body> </html>