Javascript，flask，確保從每個“類型”中至少選擇一個復選框
[英]Javascript, flask, making sure at least one checkbox from each “type” is selected
問題描述
我有一個燒瓶模板，可以為我在模式窗口中加載表單。 該表單具有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 */
3 個解決方案
解決方案1
1 已采納 2015-05-22 02:53:48
由於您尚未回答我的問題，因此我假設您允許客戶選擇多天，因此使用復選框。
這將需要您將類名
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>
我已經在源代碼中添加了注釋，但是如果您有任何疑問，請在下面留下評論，我們將盡快與您聯系。
如果要停止提交表單，可以使用event.preventDefault();
我希望這有幫助。 編碼愉快！
解決方案2
0 2015-05-22 03:12:10
這對我有用。 再次感謝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
-1 2016-01-10 14:12:12
<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>
Javascript驗證代碼，以確保至少選中了一個復選框
[英]Javascript validation code to make sure that at least one checkbox is marked
如何強制用戶至少選中一個復選框，然后從客戶端JavaScript回發？
[英]How can I force the user to have at least one selected checkbox, and postback from client-side javascript?
驗證以檢查是否使用 javascript 從 jquery 數據表中選擇了至少一個復選框
[英]Validation to check if at least one checkbox is selected from a jquery datatable using javascript
如何確保在提交多頁表單之前至少選中了一個復選框？
[英]How to make sure at least 1 checkbox is selected before submitting multipage form?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.