Javascript，烧瓶，确保每个“类型”中至少有一个复选框被选中答案

【问题标题】：Javascript, flask, making sure at least one checkbox from each "type" is selectedJavascript，烧瓶，确保每个“类型”中至少有一个复选框被选中
【发布时间】：2016-01-11 00:27:34
【问题描述】：

我有一个烧瓶模板，它为我在模式窗口中加载表单。该表单有 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>

复选框的 CSS

/* Begin Checkboxes */
input[type=checkbox].css-checkbox {
    position:absolute; 
    z-index:-1000; 
    left:-1000px; 
    overflow: hidden; 
    clip: rect(0 0 0 0); 
    height:1px; 
    width:1px; 
    margin:-1px; 
    padding:0; 
    border:0;
}
input[type="checkbox"].css-checkbox + label.css-label {         padding-left: 27px;
    height: 22px;
    display: inline-block;
    line-height: 22px;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    font-size: 120%;
    margin: 20px;
    vertical-align: middle;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
background-position: 0 -22px;
}

label.css-label {
    background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_cc5c7a8c1727e75f2de9c422739d0ad5.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
            }

/* End Checkboxes */

【问题讨论】：

所以你想要一些东西来检查客户是否至少选中了一个复选框？如果是这样，您可以在输入元素中添加另一个类名吗？
不太确定，我改编了别人的css。我对 css 不是很好，可以添加第二个类并用于区分两个“集合”。
如果你给你的元素添加另一个类名，它不会导致css出现问题。当您使用它们来标识不同的元素组时，元素可以有多个类名。我在下面的答案有 2 个类名。看看javascript是否有帮助。如果它不只是留下评论解释为什么它不适合您或显示错误，以便我可以尝试理解问题。

标签： javascript jquery flask

【解决方案1】：

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

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

function CheckBoxes(){
//Get all input type="checkbox elements"
var days = document.querySelectorAll("input[type=checkbox]");    
var Selected=0;
//Loop through checkbox elements
for(var i=0; i<days.length; i++){
// Does this element have "Days" in the class name and is it checked?
     if(days[i].className.indexOf('Days')>-1 && days[i].checked){
     // Yes/True - Add 1 to the Selected Variable
     Selected++;
     }
}
//Is Selected more than 0?
if(Selected>0){
// One or more checkboxes are checked.
alert("Selection Found!");
}else{ 
// No checked checkboxes
alert("No Selection Found!");
//Stop the form from being submitted
event.preventDefault();
}
}

<form onSubmit="CheckBoxes();">
     <input type="checkbox" class="Days css-checkbox" value="1"/>
     <input type="checkbox" class="Days css-checkbox" value="2"/>
     <input type="checkbox" class="Days css-checkbox" value="3"/>
     <input type="checkbox" class="Days css-checkbox" value="4"/>
     <input type="submit" value="Go"/>
</form>

我已将 cmets 放入源代码中，如果您有任何问题，请在下方留言，我会尽快回复您。

如果您想阻止表单提交，可以使用event.preventDefault();

我希望这会有所帮助。快乐编码！

【讨论】：

如何确保他们也选中了“操作”复选框之一。我在原始帖子中添加了一些 cmets，在 html 中添加了一些 cmets。两种复选框需要驻留在同一个表单中。
@MinelrG 抱歉，我刚刚注意到您对评论的编辑。如果您应该能够编辑函数以添加检查action，这是您需要了解答案的地方，以便您知道如何扩展/编辑。请花一些时间阅读答案，如果您有任何不明白的地方，我将非常乐意解释。一旦你理解了它，你应该没有任何问题扩展它来检查action复选框。

【解决方案2】：

这对我有用。再次感谢 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>

【讨论】：

【解决方案3】：

<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>

【讨论】：

欢迎来到 Stack Overflow！虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。