如何選擇所有復選框，然后單擊接受按鈕，然后彈出消息

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>