如何选中所有复选框，然后单击接受按钮，然后弹出一条消息

Question

我想问一下。有人知道如何选中所有复选框吗，然后单击"接受"按钮，然后在下面弹出一条消息。我的朋友说我需要带身份证，但我不知道怎么做

我需要用javascript在点击按钮后弹出消息。我已经做了按钮，但我不知道如何链接所有的。

(这是弹出消息的代码(

<!-- Common Accept Modal -->
<div class="modal fade" id="common_accept_modal" tabindex="-1" role="dialog" 
aria- 
labelledby="common_accept_modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-popout modal-dialog-centered" 
role="document">
<div class="modal-content">
<div class="block block-themed block-transparent mb-0">
<div class="block-header bg-primary-dark pt-3">
<h3 class="block-title">Confirm Accept</h3>
</div>
<div class="block-content font-size-sm">
<form id="common_accept_form" action="process/osa_action.php" 
method="post">
<div class="row items-push p-0 m-0">
<p class="">Are you sure you want to accept this application?</p>
<input type="text" name="name" class="form-control input-sm bg- 
white mb-1 text-grey" 
disabled />
<input type="text" name="prog" class="form-control input-sm bg- 
white mb-1 text-grey" 
disabled />
<select class="form-control input-sm" name="oltype" required>
<option value=''>Offer Type</option>
<option value='1'>Letter of Offer (Foundation)</option>
<option value='2'>Letter of Offer (Degree)</option>
<option value='3'>Conditional Offer Letter</option>
</select>
<input type="text" name="email" hidden/>
<input type="text" name="proc" hidden />
<input type="text" name="appid" hidden />
<input type="text" name="optid" hidden />
<input type="text" name="progid" hidden />
</div>
</form>
</div>
<div class="block-content block-content-full text-right">
<button type="submit" class="btn btn-sm btn-outline-secondary" 
form="common_accept_form">Continue</button>
</div>
</div>
</div>
</div>
</div>

(这是我所做的按钮并选中所有复选框(

<div>
<button type="button" name="btn_accept" id="btn_accept" class="btn btn- 
accept">Accept Application</button>
<div class="float-right">
<div class="input-group">
<input type="text" id="btnSearch" placeholder="Search..">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-search fa-1x"></i>
</span>
</div>
</div>
</div>
<table class="table table-vcenter js-dataTable-buttons">
<thead class="thead-light">
<tr>
<th><input type='checkbox' id='select_all' 
onclick="selectAll()">Select</th>
<th>#</th>
<th width="7%">Session</th>
<th width="25%">Applicant Details</th>
<th>Progress</th>
<th>Programme</th>
<th>Remarks</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<?php
$k=0;
for ($i=1; $i<=$total_app; $i++) {
if (isset($app_deptid[$i]) and $app_deptid[$i]==$sch[$m] 
and $app_display[$i]==1) { $k++;
?>
<tr>
<td><input type="checkbox" name="selectall" 
class="check_invoice"/></td>
<td><?=$k?></td>
<td><?=$app_acas[$i]?></td>
<td><?=$app_details[$i]?></td>
<td><?=$app_progres[$i]?></td>
<td><?=$app_program[$i]?></td>
<td><?=$app_remarks[$i]?><br><br><? 
=$app_reasonremarks[$i]?></td>
<td class="text-center"><?=$app_btn[$i]?></td>
</tr>
<?php
}
}
for ($i=1; $i<=$total_app; $i++) {
if (isset($app_deptid[$i]) and 
$app_deptid[$i]=="Unassigned" and $app_display[$i]==1) { $k++;
?>
<tr>
<td><input type="checkbox" name="selectall" 
class="check_invoice"/></td>
<td><?=$k?></td>
<td><?=$app_acas[$i]?></td>
<td><?=$app_details[$i]?></td>
<td><?=$app_progres[$i]?></td>
<td><?=$app_program[$i]?></td>
<td><?=$app_remarks[$i]?><br><br><? 
=$app_reasonremarks[$i]?></td>
<td class="text-center"><?=$app_btn[$i]?></td>
</tr>
<?php

(这是全选复选框的javascript(

<script>
function selectAll() {
var blnChecked = document.getElementById("select_all").checked;
var check_invoices = document.getElementsByClassName("check_invoice");
var intLength = check_invoices.length;
for(var i = 0; i < intLength; i++) {
var check_invoice = check_invoices[i];
check_invoice.checked = blnChecked;
}
}
</script>

所以我不知道该怎么继续。当我点击接受申请按钮时，它会弹出消息。

Answer 1

当复选框被选中时，我会遇到这样的情况，如果你喜欢的话，我想弹出警报。这是我找到的解决方案。https://stackoverflow.com/a/30979941/12875957

Answer 2

我应该声明，我对jQuery和使用modal弹出窗口都知之甚少，因此无法提供任何指导。关于选择所有复选框，然后单击后续按钮，以下示例可能会有所帮助。HTML大致类似于问题中的内容，因为有一些复选框必须通过单击主复选框来选择/取消选择。一旦选中该复选框，就会启用accept按钮，当按下该按钮时，会以某种方式使用modal内容。在下文中，使用insertAdjacentHTML将modal内容插入到文档主体

这里的modal内容存储在一个模板中，因此它不在这个演示的常规html流中。。。毫无疑问，它会被隐藏起来，它的外观&由CSS&可能是javascript。

document.addEventListener('DOMContentLoaded',(e)=>{
	let modal;
	const checked=[];
	const minchecked=2;
	
	const chkbox=document.querySelector('input[name="selectall"][type="checkbox"]');
	const bttn=document.querySelector('button[name="btn_accept"]');
	const template=document.querySelector('template#popup');
	const colInput=document.querySelectorAll('[type="checkbox"]:not( [name="selectall"] )');
	
	const changehandler=function(e){
		Array.from( colInput ).forEach(chk=>{
			chk.checked=this.checked;
			bttn.disabled=!this.checked;
		});
	};
	const clickhandler=function(e){
		document.body.insertAdjacentHTML( 'beforebegin', template.innerHTML );
	};
	const updatehandler=function(e){
		if( this.checked )checked.push( this );
		else checked.splice( checked.indexOf( this ),1 );
		
		/* If you want to enable the button */
		bttn.disabled = checked.length <= minchecked;
		
		/* if you want to popup the message automatically */
		if( checked.length >= minchecked )clickhandler.call( this, e );
		else {
			if( modal=document.getElementById('common_accept_modal') ){
				modal.parentNode.removeChild( modal )
			}
		}
	};
	
	
	
	chkbox.addEventListener( 'change', changehandler );
	bttn.addEventListener( 'click', clickhandler );
	
	Array.from( colInput ).forEach( chk=>{
		chk.addEventListener('change',updatehandler)
	})
});

<form method='post'>
	<label>Select All<input type='checkbox' name='selectall' /></label>
	<div class='inv_chkboxes'>
		<input type="checkbox" name="inv_chk[]" value="1" />
		<input type="checkbox" name="inv_chk[]" value="2" />
		<input type="checkbox" name="inv_chk[]" value="3" />
		<input type="checkbox" name="inv_chk[]" value="4" />
		<input type="checkbox" name="inv_chk[]" value="5" />
		<input type="checkbox" name="inv_chk[]" value="6" />
		<input type="checkbox" name="inv_chk[]" value="7" />
		<input type="checkbox" name="inv_chk[]" value="8" />
		<input type="checkbox" name="inv_chk[]" value="9" />
		<input type="checkbox" name="inv_chk[]" value="10" />
		<input type="checkbox" name="inv_chk[]" value="11" />
		<input type="checkbox" name="inv_chk[]" value="12" />
		<input type="checkbox" name="inv_chk[]" value="13" />
		<input type="checkbox" name="inv_chk[]" value="14" />
		<input type="checkbox" name="inv_chk[]" value="15" />
		<input type="checkbox" name="inv_chk[]" value="16" />
		<input type="checkbox" name="inv_chk[]" value="17" />
		<input type="checkbox" name="inv_chk[]" value="18" />
		<input type="checkbox" name="inv_chk[]" value="19" />
		<input type="checkbox" name="inv_chk[]" value="20" />
	</div>
	
	<button type="button" name="btn_accept" class="btn btn-accept" disabled>Accept Application</button>
	
	<template id='popup'>
		<!-- Common Accept Modal -->
		<div class="modal fade" id="common_accept_modal" tabindex="-1" role="dialog" aria-labelledby="common_accept_modal" aria-hidden="true">
			<div class="modal-dialog modal-dialog-popout modal-dialog-centered" role="document">
				<div class="modal-content">
					<div class="block block-themed block-transparent mb-0">
						<div class="block-header bg-primary-dark pt-3">
							<h3 class="block-title">Confirm Accept</h3>
						</div>
						<div class="block-content font-size-sm">
							<form id="common_accept_form" action="process/osa_action.php" method="post">
								<div class="row items-push p-0 m-0">
									<p>Are you sure you want to accept this application?</p>
									<input type="text" name="name" class="form-control input-sm bg-white mb-1 text-grey" disabled />
									<input type="text" name="prog" class="form-control input-sm bg-white mb-1 text-grey" disabled />
									<select class="form-control input-sm" name="oltype" required>
										<option selected disabled hidden>Offer Type
										<option value='1'>Letter of Offer (Foundation)
										<option value='2'>Letter of Offer (Degree)
										<option value='3'>Conditional Offer Letter
									</select>
									<input type="text" name="email" hidden/>
									<input type="text" name="proc" hidden />
									<input type="text" name="appid" hidden />
									<input type="text" name="optid" hidden />
									<input type="text" name="progid" hidden />
								</div>
							</form>
						</div>
						<div class="block-content block-content-full text-right">
							<button type="submit" class="btn btn-sm btn-outline-secondary" form="common_accept_form">Continue</button>
						</div>
					</div>
				</div>
			</div>
		</div>			
	</template>
	
</form>