Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>With "more forms" I guess you´re referring to new <code>&lt;input&gt;</code> fields and not new <code>&lt;form&gt;</code>s. Your selector <code>input.form</code> matches input elements with class "form". Is this what you want?</p> <p>How and when are you extending the form? It would be better to add the "required" class at that point.</p> <p>If you are looking for a way to set the class on some elements when your checkbox is checked, try something like this;</p> <pre><code>$(document).ready(function() { // Bind change event to all checkboxes $('input[type="checkbox"]').change(function() { // Set class "required" on all input elements $("input").toggleClass("required", this.checked); }); }); </code></pre> <p><strong>UPDATE</strong></p> <p>I had a closer look at your code and made a better solution.</p> <p>Created a <a href="http://jsfiddle.net/U66VX/" rel="nofollow">working example</a> where I renamed you element IDs and wrapped the input field with a <code>div</code> rather than a <code>p</code> tag.</p> <p>Also concatinated your two JavaScript parts to a single event handler.</p> <pre><code>$('#myCheckbox').change(function() { var isChecked = this.checked; var $extendedForm = $('#extendedForm'); if (isChecked) $extendedForm.slideDown('slow'); else $extendedForm.slideUp('slow'); $extendedForm.find('input').toggleClass("required", isChecked); }); </code></pre> <p>This JavaScript should be placed with in a <code>script</code> tag and <code>$(document).ready(function(){ [CODE HERE] });</code></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload