jquery を使用すると、複数のチェックボックスが指定され、特定のチェックボックスがオン/オフの場合にフィールドセットのオン/オフを切り替えることができます。また、デフォルトでチェックボックスがオンになっている場合、対応するフィールドセットがページの読み込み時に表示されます。http://jsfiddle.net/Hbmpk/1/を参照してください 。 ただし、これが Typo3 内で行われると、ページの読み込み時にフィールドセットが表示されません。
タイポスクリプトは次のとおりです。
page.includeJSlibs.jquery.external = 1
page.includeJSlibs.jquery = http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
page.headerData.10 = TEXT
page.headerData.10.value (
<script type="text/JavaScript">
#show fieldset on page load if checkbox checked
$(document).ready(function() {$('#showfruit').toggle($('#fruitid').prop('checked')); });
#toggle fieldsets
$(window).load(function(){
$('#fruitid').change(function(e) {
$('#showfruit').toggle(this.checked);
});
$('#vegid').change(function(e) {
$('#showveg').toggle(this.checked);
});
});
</script>
)
html は次のとおりです。
<form>
Which food group do you like?
<!-- Fruit is checked by default -->
Fruit <input type="checkbox" name="nutrition[]" value="Fruit" id="fruitid" checked="checked">
Veges <input type="checkbox" name="nutrition[]" value="Vegetables" id="vegid">
<!-- toggle fieldsets if checkbox is checked -->
<!-- display showfruit fieldset on page load -->
<fieldset id="showfruit" style="display:none;">
You chose Fruit! Name one fruit: <input type="text" name= "afruit" />
</fieldset>
<fieldset id="showveg" style="display:none;" >
You chose Veges! Name one veg: <input type="text" name= "aveg" />
</fieldset>
</form>
これは、typo3-formhandler 検証をチェーンされたチェックボックスと入力と一緒に使用する試みを簡略化したものです。トグルは最初は正常に機能しますが、フォームが送信され、検証され、返されると (たとえば、必須の質問に回答しない場合)、チェックボックスはオンのままですが、表示されていた対応するフィールドセットは表示されなくなります。
ps、jquery は Jason P のおかげです - jquery: 複数のチェックボックスの配列で特定のチェックされたチェックボックスに基づいてフィールドセットを切り替えます