使用jquery .ready()操作typo3中的链接复选框 [英] using jquery .ready() to manipulate chained checkboxes within typo3

问题描述

使用jQuery，给定多个复选框，如果选中/取消选中特定复选框，则可以打开/关闭字段集. 另外，如果默认情况下选中了一个复选框，则相应的字段集将在页面加载时显示. 参见 http://jsfiddle.net/Hbmpk/1/ 但是，如果在Typo3中完成此操作，则在页面加载时不会显示该字段集.

Using jquery, given multiple checkboxes, we can toggle a fieldset on/off if a particular checkbox is checked/ unchecked. Also, if a checkbox is checked by default, the corresponding fieldset will be displayed upon page load. See http://jsfiddle.net/Hbmpk/1/ However, if this is done within Typo3, the fieldset is not displayed upon page load.

这是打字稿:

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验证以及链接的复选框和输入的尝试的简化；最初切换工作正常，但是在提交，验证并返回表单后(例如，如果未回答强制性问题)，则复选框保持选中状态，但现在不再显示相应的字段集.

This is a simplification of an attempt to use typo3-formhandler validation together with chained checkboxes and inputs; the toggling works fine initially, but when the form is submitted, validated and returned(if compulsory question not answered for example), then the checkboxes remain checked but the corresponding fieldsets that were show are now no longer shown.

ps，jQuery得益于Jason P-

ps, the jquery is thanks to Jason P - jquery: toggle a fieldset based upon a specific checked checkbox in an array of multiple checkboxes

推荐答案

TYPO3扩展jquerycolorbox也处于活动状态. jquerycolorbox可能包含小于1.6的jquery版本，因此不支持.prop() 在jquerycolorbox之上包含更高版本的jquery并没有帮助，并且本质上是错误的做法.

The TYPO3 extension jquerycolorbox was also active. jquerycolorbox probably includes a version of jquery that is less than 1.6 and therefor does not support .prop() Including a later version of jquery on top of jquerycolorbox did not help and was inherently incorrect practice.

停用jquerycolorbox并包含jquery 1.10.2/jquery.min.js效果很好.

鉴于有问题的页面实际上使用了TYPO3表单处理程序验证，也许最好的解决方案是采用原始表单提交结果的错字，然后在相关处定义整个字段集，例如###fruit_fieldset### ...

Given that the page in question actually uses TYPO3 formhandler validation, perhaps the best solution would be some typoscript that takes the initial form submission results and then where relevant defines the entire field set, say ###fruit_fieldset### ...

这篇关于使用jquery .ready()操作typo3中的链接复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！