douxian5076 2018-03-23 10:25
浏览 47
已采纳

如果选中复选框切换,则在切换div中输入所需的输入字段

I use a script to toogle some div´s with javascript. I want to make some input fields "required" in the toogle div if the checkbox is checked to show the toogle 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>

</div>
  • 写回答

1条回答 默认 最新

  • dongpu9852 2018-03-23 10:39
    关注

    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>

    </div>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 找人不需要人工智能回答的gamit解算后做形变分析
  • ¥20 RL+GNN解决人员排班问题时梯度消失
  • ¥15 统计大规模图中的完全子图问题
  • ¥15 使用LM2596制作降压电路,一个能运行,一个不能
  • ¥60 要数控稳压电源测试数据
  • ¥15 能帮我写下这个编程吗
  • ¥15 ikuai客户端l2tp协议链接报终止15信号和无法将p.p.p6转换为我的l2tp线路
  • ¥15 phython读取excel表格报错 ^7个 SyntaxError: invalid syntax 语句报错
  • ¥20 @microsoft/fetch-event-source 流式响应问题
  • ¥15 ogg dd trandata 报错