如何在单击复选框时将隐藏的 div 值更改为未隐藏

Question

我只想在选中早餐、午餐或晚餐的复选框之一时，在输入字段中显示工作编号。它工作正常，当我选中任何框时，它会显示作业号的输入字段。但是，当我第一次加载页面时，默认情况下我看不到职位没有字段，所以我想在职位编号输入字段的

hidden="hidden

标签中添加一个

div

。但是现在工作号是永远隐藏的，所以当复选框被选中时，如何将隐藏的值更改为未隐藏？

简而言之： 什么有效 - 当复选框被选中时，作业没有字段出现。但它也会在页面加载时出现一次（不应该出现在页面加载时，只有当复选框被选中时）。我做了隐藏工作的解决方法，所以它一开始不会在页面加载时显示，但现在当我单击复选框时它也不会显示 我的解决方案：我想我可以在选中复选框时将

hidden

的值更改为

unhidden

- 这可能吗？如果是这样怎么办？或任何更好的解决方案？

工作没有代码：

 <div class="col-lg-12 p-2"  id="job_number"  hidden="hidden">
    
            <label>Job number:</label>
            <input type="text" class="form-control table_input input-padding jobcode_meal" id="jobcode_meal_id" name="meal_job_number"  value="">
            <!--  New field for job number sugeestion -->
            <div id="suggesstion-box-meal" class="sbox" style="position: absolute; z-index: 1;">
            </div>
  
            <div class="alert alert-danger font-weight-bold"  style="display:none;" id="meal-alert">Meal job number is required.</div>
         </div>

下面的其余代码：

工作编号： 饭工号为必填项。 早餐 午餐 晚餐 总餐数：0

这是同一个类中的脚本代码：

<script>

    // Show Job Number Button 
    
    jQuery('[name="is_breakfast"]').click(function(){
       $('#job_number').val("1");
        if (jQuery('[name="is_breakfast"]:checked').length > 0)    
            jQuery('#job_number').show();
        else jQuery('#job_number').hide();
    });
    
    jQuery('[name="is_lunch"]').click(function(){
        if (jQuery('[name="is_lunch"]:checked').length > 0)    
            jQuery('#job_number').show();
        else jQuery('#job_number').hide();
    });
    
    jQuery('[name="is_dinner"]').click(function(){
        if (jQuery('[name="is_dinner"]:checked').length > 0)    
            jQuery('#job_number').show();
        else jQuery('#job_number').hide();
    });
    
    </script>

Answer 1

在简单的方式上，您可以使用 JQuery 来实现这一点 只需在脚本的开头添加

jQuery('#job_number').hide();

并删除 HTML

 中的 

hidden

属性

你可以在 JSFiddle 看到它工作： https://jsfiddle.net/ku6omfjv/

与原始问题无关但是，如果逻辑是“至少一个复选框应该显示输入字段”那么尝试涵盖用户选中 2 个选项（早餐和午餐）然后取消选中 1（午餐）的场景). 在当前的逻辑中，它会使输入消失，即使还有 1 个剩余的复选框