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

时间：2015-05-22 01:52:39

标签： javascript jquery flask

我有一个烧瓶模板，可以在模态窗口中为我加载表单。该表单有3个下拉列表，可以很好地处理所需的属性，但它也有两个“集合”的复选框。在每个集合中，用户必须选择一个。我是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 */

3 个答案:

答案 0 :(得分：1)

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

  

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

＆＃13;
＆＃13; 
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();
}
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我在源代码中添加了评论，但如果您有任何疑问，请在下方留言，我会尽快给您回复。

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

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

答案 1 :(得分：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>

答案 2 :(得分：-1)

<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>
相关问题
最新问题