如果选中复选框切换，则在切换 div 中需要输入字段

Question

I use a script to toggle some div´s with javascript. I want to make some input fields "required" in the toggle div if the checkbox is checked to show the toggle div.

Can someone figure it out ? that is work?

 function show(id) { if(document.getElementById) { var mydiv = document.getElementById(id); mydiv.style.display = (mydiv.style.display=='block'?'none':'block'); } } var $myCheckbox = $('#neu_ma'), $required = $('.required'); $myCheckbox.on('click', function() { this.checked ? $required.prop('required', true) : $required.prop('required', false); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post" name="berechtigungsantrag"> <fieldset> <legend><input type="checkbox" name="neu_ma" id="neu_ma" onclick="javascript:show('neuer_mitarbeiter');"> Neuer Mitarbeiter </legend> <div style="display: none" id="neuer_mitarbeiter"> <label for="eintritt_datum">Eintrittsdatum:</label> <div><input type="date" name="eintritt_datum" id="eintritt_datum" class="required" /></div> <label for="befristung_datum">Befristungsdatum:</label> <div><input type="date" name="befristung_datum" id="befristung_datum"/></div> </div> </fieldset><!-- End of fieldset --> <input class="btn" type="submit" value="Speichern" name=save /> </form>

Answer 1

Answer:

You're trying to listen an element id that does not exist(neu_ma) - you haven't given your checkbox an id.

<input type="checkbox" name="neu_ma" onclick="javascript:show('neuer_mitarbeiter');"> 

So just give it an ID:

<input type="checkbox" name="neu_ma" id="neu_ma" onclick="javascript:show('neuer_mitarbeiter');"> 

---

This is just an example how you could do it:

Add some specific class to inputs that need to be affected by the state of your checkbox.

I made an example HTML:

<form>
    <input type="checkbox" id="myCheckbox" />
    <input type="text" class="required" />
    <input type="text" />
    <input type="text" class="required" />

    <button type="submit">Submit</button>
</form>

As you can see, some of the inputs have a class called "required".

Next I check checkbox status(checked or not). And depending on the result make elements with "required" class required(or not) using jQuery's prop() method.

Working example:

 var $myCheckbox = $('#myCheckbox'), $required = $('.required'); $myCheckbox.on('click', function() { this.checked ? $required.prop('required', true) : $required.prop('required', false); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="checkbox" id="myCheckbox" /> <input type="text" class="required" /> <input type="text" /> <input type="text" class="required" /> <button type="submit">Submit</button> </form>