Question

我使用脚本用javascript来记录一些div。如果选中复选框以显示toogle div，我想在toogle div中创建一些“必需”输入字段。

有人可以解决这个问题吗？那是工作吗？

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

<强>答案：

您正在尝试侦听不存在的元素ID（neu_ma） - 您尚未将复选框设为ID。

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

所以只需给它一个ID：

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

这只是一个如何做到的例子：

为需要受复选框状态影响的输入添加一些特定类。

我做了一个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>

如您所见，某些输入有一个名为“required”的类。

接下来我检查复选框状态（选中或不选中）。并且根据结果，使用jQuery的prop（）方法创建需要（或不需要）类的元素。

工作示例：

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>

如果选中复选框toogle，则在toogle div中输入所需的输入字段

1 个答案: