Javascript，flask，确保每个“类型”至少选中一个复选框_Javascript_Jquery_Flask

Javascript，flask，确保每个“类型”至少选中一个复选框

javascript jquery flask

Javascript，flask，确保每个“类型”至少选中一个复选框,javascript,jquery,flask,Javascript,Jquery,Flask,我有一个烧瓶模板，可以在模式窗口中为我加载表单。表单有3个下拉列表，可以很好地使用required属性，但它也有两组复选框。在每个集合中，用户必须选择一个。我是javascript新手，似乎什么都做不到。日期和操作必须有单独的ID，以便css能够正确地使用我们的特殊复选框。如何强制我的用户选择一个操作和一天编辑是的，目标是让某人能够检查多天，或者两个动作的两个值。我对css非常糟糕，所以如果有人有办法用多个类来实现这一点，那么我当然可以进行编辑 <head> &l

我有一个烧瓶模板，可以在模式窗口中为我加载表单。表单有3个下拉列表，可以很好地使用required属性，但它也有两组复选框。在每个集合中，用户必须选择一个。我是javascript新手，似乎什么都做不到。日期和操作必须有单独的ID，以便css能够正确地使用我们的特殊复选框。如何强制我的用户选择一个操作和一天

编辑是的，目标是让某人能够检查多天，或者两个动作的两个值。我对css非常糟糕，所以如果有人有办法用多个类来实现这一点，那么我当然可以进行编辑

<head>
        <link rel="stylesheet" type="text/css" href="main.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" language="JavaScript">
function checkCheckBoxes(theForm) {
    if (
    theForm.m.checked == false &&
    theForm.t.checked == false &&
    theForm.w.checked == false &&
    theForm.th.checked == false &&
    theForm.f.checked == false &&
    theForm.s.checked == false &&
    theForm.sn.checked == false &&) 
    {
        alert ('You didn\'t choose a day!');
        return false;
    } else {    
        return true;
    }
}
</script> 
</head>
<body>
    <div class="box" title="Schedule">
   <div class="wrapper">
    <a data-popup="On demand" href="#refresh" value="Refresh Now">Refresh Now</a>
   </div>
    <a href="#schedule" value="Change Schedule">Change Schedule</a>
</div>

<aside class="modal" id="schedule">
<h2 >Refresh Schedule</h2>
     <section >
         <div class="onoffswitch">
             <form name="onoff" method="post" action="{{ url_for('togglebool') }}">
                 <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onoffswitch" onchange="this.form.submit()" {{ checkval }}>
                 <label class="onoffswitch-label" for="onoffswitch">
                    <span class="onoffswitch-inner"></span>
                    <span class="onoffswitch-switch"></span>
                 </label>
             </form>
         </div>
<p id="schedule-mssg"><strong>When should this occur?</strong></p>

    <form method='POST' name="schedule_time" action="{{ url_for('info') }}" onsubmit="return checkCheckBoxes(this);">
        <select class="custom-dropdown" name="hour" id="hour" required>
            <option value="" selected disabled>Hour</option>
            {% for i in hours %}
            <option value="{{ i }}">{{ i }}</option>
            {% endfor %}
        </select>
        <select class="custom-dropdown" name="minute" id="minute" required>
            <option value="" selected disabled>Minute</option>
            {% for i in minutes %}
            <option value="{{ i }}">{{ i }}</option>
            {% endfor %}
        </select>
        <select class="custom-dropdown" name="period" id="period" required>
            <option value="" selected disabled>AM/PM</option>
            <option>AM</option>
            <option>PM</option>
            </select>


<!--Actions, at least one must be checked-->
            <input type="checkbox" name="action" id="code" class="css-checkbox" value="code" checked><label for="code" class="css-label">Code</label>
        <input type="checkbox" name="action" id="database" class="css-checkbox" value="database" checked><label for="database" class="css-label">Database</label>
            <div id="schedule-form">


> <!--Days, at least one must be checked in addition to at least one action-->

            <input type="checkbox" name="m" id="m" class="css-checkbox" value="1" checked><label for="m" class="css-label">Mon</label>
            <input type="checkbox" name="t" id="t" class="css-checkbox" value="2" checked><label for="t" class="css-label">Tues</label>
            <input type="checkbox" name="w" id="w" class="css-checkbox" value="3" checked><label for="w" class="css-label">Wed</label>
            <input type="checkbox" name="th" id="th" class="css-checkbox" value="4" checked><label for="th" class="css-label">Thur</label>
            <input type="checkbox" name="f" id="f" class="css-checkbox" value="5" checked><label for="f" class="css-label">Fri</label>
            <input type="checkbox" name="s" id="s" class="css-checkbox" value="6" checked><label for="s" class="css-label">Sat</label>
            <input type="checkbox" name="sn" id="sn" class="css-checkbox" value="7" checked><label for="sn" class="css-label">Sun</label>
                </fieldset>
            </div>
            <input type="submit" name="sched-sub" id="schedule-sub" value="Save Changes"; />
             <a href="#" class="btn">Close</a>
        </form>

            </section>    
        <footer class="cf">
        </footer>
    </section>  
        </aside>
        </body>

由于您尚未回答我的问题，我将假设您允许客户选择多天，因此使用复选框

这将要求您将类名Days添加到复选框元素中

函数复选框{ //获取所有输入类型=复选框元素 var days=document.querySelectorAllinput[type=checkbox]；选择的var=0； //循环检查复选框元素 forvar i=0；i-1&&d天[i]。已选中{ //是/真-将1添加到所选变量选定++； } } //选择的值是否大于0？如果选择>0{ //选中一个或多个复选框。警报选择已找到！； }否则{ //无复选框警报未找到任何选择！； //阻止表单提交违约事件； } }

这对我有用。再次感谢NewToJS

<head>
        <link rel="stylesheet" type="text/css" href="main.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" language="JavaScript">
function CheckBoxes(){
//Get all input type="checkbox elements"
var boxes = document.querySelectorAll("input[type=checkbox]");    
var total_Days=0;
var total_Actions=0;
//Loop through checkbox elements
for(var i=0; i<boxes.length; i++){
// Does this element have "Days" in the class name and is it checked?
     if(boxes[i].className.indexOf('Days')>-1 && boxes[i].checked){
     // Yes/True - Add 1 to the Total_Days Variable
     total_Days++;
     }

     if(boxes[i].className.indexOf('Actions')>-1 && boxes[i].checked){
     // Yes/True - Add 1 to the Selected Variable
     total_Actions++;
     }
}
//Is Selected more than 0?
if(total_Days>0 && total_Actions>0) {
// One or more checkboxes are checked.
}else{ 
// No checked checkboxes
alert("You must select an action, and at least one day.");
}
}
</script> 
</head>
<body>
    <div class="box" title="Schedule">
   <div class="wrapper">
    <a data-popup="On demand" href="#refresh" value="Refresh Now">Refresh Now</a>
   </div>
    <a href="#schedule" value="Change Schedule">Change Schedule</a>
</div>

<aside class="modal" id="schedule">
<h2 >Refresh Schedule</h2>
     <section >
         <div class="onoffswitch">
             <form name="onoff" method="post" action="{{ url_for('togglecron') }}">
                 <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onoffswitch" onchange="this.form.submit()" {{ checkval }}>
                 <label class="onoffswitch-label" for="onoffswitch">
                    <span class="onoffswitch-inner"></span>
                    <span class="onoffswitch-switch"></span>
                 </label>
             </form>
         </div>
<p id="schedule-mssg"><strong>When should this site refresh?</strong></p>

    <form method='POST' name="schedule_time" action="{{ url_for('info') }}" onsubmit="CheckBoxes()">
        <select class="custom-dropdown" name="hour" id="hour" required>
            <option value="" selected disabled>Hour</option>
            {% for i in hours %}
            <option value="{{ i }}">{{ i }}</option>
            {% endfor %}
        </select>
        <select class="custom-dropdown" name="minute" id="minute" required>
            <option value="" selected disabled>Minute</option>
            {% for i in minutes %}
            <option value="{{ i }}">{{ i }}</option>
            {% endfor %}
        </select>
        <select class="custom-dropdown" name="period" id="period" required>
            <option value="" selected disabled>AM/PM</option>
            <option>AM</option>
            <option>PM</option>
        </select>
        <input type="checkbox" name="action" id="code" class="Actions css-checkbox" value="code" checked><label for="code" class="css-label">Code</label>
    <input type="checkbox" name="action" id="database" class="Actions css-checkbox" value="database" checked><label for="database" class="css-label">Database</label>
        <div id="schedule-form">
        <input type="checkbox" name="m" id="m" class="Days css-checkbox" value="1" checked><label for="m" class="css-label">Mon</label>
        <input type="checkbox" name="t" id="t" class="Days css-checkbox" value="2" checked><label for="t" class="css-label">Tues</label>
        <input type="checkbox" name="w" id="w" class="Days css-checkbox" value="3" checked><label for="w" class="css-label">Wed</label>
        <input type="checkbox" name="th" id="th" class="Days css-checkbox" value="4" checked><label for="th" class="css-label">Thur</label>
        <input type="checkbox" name="f" id="f" class="Days css-checkbox" value="5" checked><label for="f" class="css-label">Fri</label>
        <input type="checkbox" name="s" id="s" class="Days css-checkbox" value="6" checked><label for="s" class="css-label">Sat</label>
        <input type="checkbox" name="sn" id="sn" class="Days css-checkbox" value="7" checked><label for="sn" class="css-label">Sun</label>
            </fieldset>
        </div>
        <input type="submit" name="sched-sub" id="schedule-sub" value="Save Changes"; />
         <a href="#" class="btn">Close</a>
    </form>

        </section>    
    <footer class="cf">
    </footer>
</section>  
    </aside>

那么您想检查客户端是否至少选中了一个复选框？如果是这样的话，您是否可以在输入元素中添加另一个类名？不太确定，我从其他人那里改编了css。我对css不是很在行，可以添加第二个类来区分这两个集合吗？如果你在元素中添加另一个类名，它不会导致css出现问题。当您使用元素标识不同的元素组时，元素可以有多个类名。我下面的答案有两个类名。看看javascript是否有帮助。如果它不只是留下一条注释来解释它为什么不适合您，或者显示错误以便我可以尝试了解问题。那么确保他们也选中了一个操作复选框怎么样。我在我的原始帖子中添加了一些注释，在html中添加了一些注释。这两种复选框需要以相同的形式存在。@对不起，我刚刚注意到您对注释的编辑。如果您应该能够编辑功能以添加检查操作，那么您需要了解答案，以便知道如何进行扩展/编辑。请花点时间阅读答案，如果你什么都不懂，我将非常乐意解释。一旦您理解了它，在扩展它以检查操作复选框时应该不会有任何问题。欢迎使用堆栈溢出！虽然这个代码片段可以解决这个问题，但它确实有助于提高文章的质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。

<head>
        <link rel="stylesheet" type="text/css" href="main.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" language="JavaScript">
function CheckBoxes(){
//Get all input type="checkbox elements"
var boxes = document.querySelectorAll("input[type=checkbox]");    
var total_Days=0;
var total_Actions=0;
//Loop through checkbox elements
for(var i=0; i<boxes.length; i++){
// Does this element have "Days" in the class name and is it checked?
     if(boxes[i].className.indexOf('Days')>-1 && boxes[i].checked){
     // Yes/True - Add 1 to the Total_Days Variable
     total_Days++;
     }

     if(boxes[i].className.indexOf('Actions')>-1 && boxes[i].checked){
     // Yes/True - Add 1 to the Selected Variable
     total_Actions++;
     }
}
//Is Selected more than 0?
if(total_Days>0 && total_Actions>0) {
// One or more checkboxes are checked.
}else{ 
// No checked checkboxes
alert("You must select an action, and at least one day.");
}
}
</script> 
</head>
<body>
    <div class="box" title="Schedule">
   <div class="wrapper">
    <a data-popup="On demand" href="#refresh" value="Refresh Now">Refresh Now</a>
   </div>
    <a href="#schedule" value="Change Schedule">Change Schedule</a>
</div>

<aside class="modal" id="schedule">
<h2 >Refresh Schedule</h2>
     <section >
         <div class="onoffswitch">
             <form name="onoff" method="post" action="{{ url_for('togglecron') }}">
                 <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onoffswitch" onchange="this.form.submit()" {{ checkval }}>
                 <label class="onoffswitch-label" for="onoffswitch">
                    <span class="onoffswitch-inner"></span>
                    <span class="onoffswitch-switch"></span>
                 </label>
             </form>
         </div>
<p id="schedule-mssg"><strong>When should this site refresh?</strong></p>

    <form method='POST' name="schedule_time" action="{{ url_for('info') }}" onsubmit="CheckBoxes()">
        <select class="custom-dropdown" name="hour" id="hour" required>
            <option value="" selected disabled>Hour</option>
            {% for i in hours %}
            <option value="{{ i }}">{{ i }}</option>
            {% endfor %}
        </select>
        <select class="custom-dropdown" name="minute" id="minute" required>
            <option value="" selected disabled>Minute</option>
            {% for i in minutes %}
            <option value="{{ i }}">{{ i }}</option>
            {% endfor %}
        </select>
        <select class="custom-dropdown" name="period" id="period" required>
            <option value="" selected disabled>AM/PM</option>
            <option>AM</option>
            <option>PM</option>
        </select>
        <input type="checkbox" name="action" id="code" class="Actions css-checkbox" value="code" checked><label for="code" class="css-label">Code</label>
    <input type="checkbox" name="action" id="database" class="Actions css-checkbox" value="database" checked><label for="database" class="css-label">Database</label>
        <div id="schedule-form">
        <input type="checkbox" name="m" id="m" class="Days css-checkbox" value="1" checked><label for="m" class="css-label">Mon</label>
        <input type="checkbox" name="t" id="t" class="Days css-checkbox" value="2" checked><label for="t" class="css-label">Tues</label>
        <input type="checkbox" name="w" id="w" class="Days css-checkbox" value="3" checked><label for="w" class="css-label">Wed</label>
        <input type="checkbox" name="th" id="th" class="Days css-checkbox" value="4" checked><label for="th" class="css-label">Thur</label>
        <input type="checkbox" name="f" id="f" class="Days css-checkbox" value="5" checked><label for="f" class="css-label">Fri</label>
        <input type="checkbox" name="s" id="s" class="Days css-checkbox" value="6" checked><label for="s" class="css-label">Sat</label>
        <input type="checkbox" name="sn" id="sn" class="Days css-checkbox" value="7" checked><label for="sn" class="css-label">Sun</label>
            </fieldset>
        </div>
        <input type="submit" name="sched-sub" id="schedule-sub" value="Save Changes"; />
         <a href="#" class="btn">Close</a>
    </form>

        </section>    
    <footer class="cf">
    </footer>
</section>  
    </aside>

<script type="text/javascript">


    function checkSelectedAtleastOne(clsName) {
         if (selectedValue == "select") return false;

         var i = 0;
         $("." + clsName).each(function () {

             if ($(this).is(':checked')) {
                 i = 1;
             }

         });

         if (i == 0) {
                alert("Please select atleast one users");
                return false;
         } else if (i == 1) {
                return true;
         }


         return true;

     }


$(document).ready(function () {
    $('#chkSearchAll').click(function () {

             var checked = $(this).is(':checked');
             $('.clsChkSearch').each(function () {
                 var checkBox = $(this);
                 if (checked) {
                     checkBox.prop('checked', true);
                 }
                 else {
                     checkBox.prop('checked', false);
                 }
             });

         });


            //for select and deselect 'select all' check box when clicking individual check boxes
         $(".clsChkSearch").click(function () {

             var i = 0;
             $(".clsChkSearch").each(function () {

                 if ($(this).is(':checked')) {

                 } else {

                     i = 1;//unchecked
                 }

             });

             if (i == 0) {
                 $("#chkSearchAll").attr("checked", true)
             } else if (i==1){

                 $("#chkSearchAll").attr("checked", false)
             }

         });


});



</script>
   <!-- TinyMCE -->
<script type="text/javascript" src="js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
    tinyMCE.init({
        mode: "exact",
        elements: "txtDesc"

    });
</script>
<!-- /TinyMCE -->


<style type="text/css">

    .clsChksearch
    {
       margin:0px;  

    }
 </style>