この問題を解決する方法は次のとおりです。
まず、作業コードを表示して、次にそれを説明します。これはあなたのグループのリストと、それらに関連付けられた選択肢は
<?php
$groups = array(
12 => array(1, 2, 3, 4, 5),
13 => array(32, 25, 26),
14 => array(22, 23)
);
?>
です：
<?php
$groups = array(
12 => array(1, 2, 3, 4, 5),
13 => array(32, 25, 26),
14 => array(22, 23)
);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Page Title Goes Here</title>
<style type="text/css">
#group_id{ width:466px; }
</style>
</head>
<body>
<select name="group_id" id="group_id">
<option value="0">Not a Group Event</option>
<option value="12">Gname</option>
<option value="13">Groupname2</option>
</select>
<?php
// Loop through each group id
foreach(array_keys($groups) as $groupId)
{
// Create a div that can be identified by the group id
// to hold the checkboxes
$divId = 'group_' . $groupId;
echo '<div id="' . $divId . '">';
// Loop through each id for this particular group
foreach($groups[$groupId] as $choice)
{
// Create the checkbox
echo '<input type="checkbox" '
. 'value="' . $choice . '" '
. 'class="frnzchk" '
. 'name="frnzchk[]"/>'
. '<br/>';
}
echo '</div>';
}
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
// Wait until everything is loaded
$(document).ready(function(){
// Bind the "change" function to the group_id drop down
$('#group_id').change(function(){
// Clear all of the choices
$('.frnzchk').attr('checked', false);
// Create the id of the div containing choices
var groupId = '#group_' + $(this).val();
// Check all of the choices for the appropriate group id
$(groupId)
.find('input[type="checkbox"]')
.attr('checked', true);
})
});
</script>
</body>
</html>
は、ここで最初のチャンクです。配列を宣言すると、角括弧は不要です。すなわち、$groups[] = array()の代わりに$groups = array()が必要です。
次は、[1]を検証する完全なHTML5ページのための配管すべてを入れました。あなたのCSSを整理しやすくするために、HTMLからCSSを移動しましたが、実際にはこれを完全に別のCSSファイルに移動する必要があります。
は、ここで次の重要なチャンクです：
<?php
// Loop through each group id
foreach(array_keys($groups) as $groupId)
{
// Create a div that can be identified by the group id
// to hold the checkboxes
$divId = 'group_' . $groupId;
echo '<div id="' . $divId . '">';
// Loop through each id for this particular group
foreach($groups[$groupId] as $choice)
{
// Create the checkbox
echo '<input type="checkbox" '
. 'value="' . $choice . '" '
. 'class="frnzchk" '
. 'name="frnzchk[]"/>'
. '<br/>';
}
echo '</div>';
}
?>
これはあなたのグループのそれぞれをループし、そのグループのすべての選択肢を保持するためにDIVを作成します。 divはID group_12、group_13、またはgroup_14で識別されます。数字は$groupsアレイで使用されるキーに由来します。
次はJavascriptを次のとおりです。私はすべてのJavascriptがシングルスレッドで実行されるため、本体の最後にこれを置い
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
// Wait until everything is loaded
$(document).ready(function(){
// Bind the "change" function to the group_id drop down
$('#group_id').change(function(){
// Clear all of the choices
$('.frnzchk').attr('checked', false);
// Create the id of the div containing choices
var groupId = '#group_' + $(this).val();
// Check all of the choices for the appropriate group id
$(groupId)
.find('input[type="checkbox"]')
.attr('checked', true);
})
});
</script>
ので、あなたはそれを持っていたようにあなたが正面をそれをロードした場合、これは、他に何を意味しますjavascriptの読み込みが終了するまで読み込むことができます[2]。この例ではそれほど大したことではありませんが、JavaScriptをたくさん持っているときに大きな違いが生じます。
$(document).ready(function(){})の中にすべてをラップしたことに気付くでしょう。これは、すべてがロードされるまで機能しないためです。関数内に$(document).ready(function(){})があったので、関数が呼び出されるたびに、すべてがロードされているかどうかをチェックし、そうでなければ何も起こりません。
Iは、select要素が変更されるたびに、それが呼び出されると、その関数内のコードが呼び出されることを意味select要素にchange()機能を結合しました。すべての選択肢をリセットし、該当するdivに含まれるすべての選択肢を選択します。
それはすべきです！ハッピーコーディング！
[1] - http://validator.w3.org
[2] - 私はここで食事を取得する探しています何https://stackoverflow.com/a/1108245/1100835
は "GROUPNAME2" のONSELECTあるドロップダウンから... 32,25,26が取得する値のチェックボックスjqueryを使って確認しました – June
チェックボックスとオプションの関係はどこですか？ –
オプションGROUPNAME2の値が13の場合、チェックボックス32,25,26がチェックされます。 オプションは、チェックボックスがユーザーに対応するグループです – June