Скрыть кнопку, если флажок не установлен и кнопка «Показать», если нажата кнопка «Проверить все» или нажата одна или несколько кнопок.

У меня есть код для скрытия и отображения кнопки всякий раз, когда я отмечу или снял флажок. Я сделал две кнопки с одинаковым эквивалентом.Скрыть кнопку, если флажок не установлен и кнопка «Показать», если нажата кнопка «Проверить все» или нажата одна или несколько кнопок.

Первая кнопка показывает, был ли установлен один или несколько флажков и спрятаны, если флажок не установлен. Но как только я снял флажок, кнопка будет скрыта, даже если флажок установлен.
Вторая кнопка будет отображаться, если Все что означает Check All была нажата, и если Ни кнопка не будет скрыта.

Так вот проблема:

Когда вы проверили флажок кнопка будет отображаться даже вы проверили несколько флажок кнопка все еще есть, но как только вы сняли флажок даже там еще проверили флажок кнопка будет быть скрытым.
Другое, когда вы нажали на Все отметьте все флажки, и кнопка покажет, что вы сняли флажок, если флажок установлен, кнопка останется, но после того, как вы установили флажок, появляется еще одна кнопка и две кнопки уже будут там.

Вот код формы с флажками:

<form id="drawing" action="" method="post"> 
       <div id="sub_profile_cont"> 
        <div class="sub_profile right"> 
         <p class="sub_content_text" style='margin-left: 25px;'> 
          <a href="javascript:selectToggle(true, 'drawing');" id="show">All</a> | <a href="javascript:selectToggle(false, 'drawing');" id="hide">None</a> 
          MISCELLANEOUS FEES: 
         </p> 
         <?php 
          if($pta_fee == $pta_fee_trans) 
          { 
         ?> 
         <p class="sub_content_text" style='margin-left: 30px; color: #93BCCB;'> 
          <input type='checkbox' value="<?php echo $pta_fee; ?>" disabled> 
          PTA Fee : &#8369; <?php echo $pta_fee; ?></p> 
         <?php 
          } 
          else 
          { 
         ?> 
         <p class="sub_content_text" style='margin-left: 30px;'> 
          <input type='checkbox' name='draw[]' value="<?php echo $pta_fee; ?>" id="required-checkbox1" onClick="CheckIfChecked(this.id)"> 
          PTA Fee : &#8369; <?php echo $pta_fee; ?></p> 
         <?php 
          } 
          if($maintenance_fee == $maintenance_fee_trans) 
          { 
         ?> 
         <p class="sub_content_text" style='margin-left: 30px; color: #93BCCB;'> 
          <input type='checkbox' value="<?php echo $maintenance_fee; ?>" disabled> 
          Maintenance Fee : &#8369; <?php echo $maintenance_fee; ?></p> 
         <?php 
          } 
          else 
          { 
         ?> 
         <p class="sub_content_text" style='margin-left: 30px;'> 
          <input type='checkbox' name='draw[]' value="<?php echo $maintenance_fee; ?>" id="required-checkbox2" onClick="CheckIfChecked(this.id)"> 
          Maintenance Fee : &#8369; <?php echo $maintenance_fee; ?></p> 
         <?php 
          } 
          if($id_school == $id_school_trans) 
          { 
         ?> 
         <p class="sub_content_text" style='margin-left: 30px; color: #93BCCB;'> 
          <input type='checkbox' value="<?php echo $id_school; ?>" disabled> 
          School ID : &#8369; <?php echo $id_school; ?></p> 
         <?php 
          } 
          else 
          { 
         ?> 
         <p class="sub_content_text" style='margin-left: 30px;'> 
          <input type='checkbox' name='draw[]' value="<?php echo $id_school; ?>" id="required-checkbox3" onClick="CheckIfChecked(this.id)"> 
          School ID : &#8369; <?php echo $id_school; ?></p> 
         <?php 
          } 
          if($electricity == $electricity_trans) 
          { 
         ?> 
         <p class="sub_content_text" style='margin-left: 30px; color: #93BCCB;'> 
          <input type='checkbox' value="<?php echo $electricity; ?>" disabled> 
          Electricity : &#8369; <?php echo $electricity; ?></p> 
         <?php 
          } 
          else 
          { 
         ?> 
         <p class="sub_content_text" style='margin-left: 30px;'> 
          <input type='checkbox' name='draw[]' value="<?php echo $electricity; ?>" id="required-checkbox4" onClick="CheckIfChecked(this.id)"> 
          Electricity : &#8369; <?php echo $electricity; ?></p> 
         <?php 
          } 
         ?> 
         <div id="sub_profile_cont"> 
          <div class="sub_profile left"> 
           <p class="block_cont left"> 
            <!--<input style="background: linear-gradient(rgb(20, 129, 191), rgb(13, 89, 160)); color: #ccc;" class="action_btn" type="button" id="pay_btn" value="COMPUTE" title="Select at least one" disable/>--> 
            <div id = "submit-button-container" style="display:none; "margin-bottom: -6px;""> 
             <input class="action_btn" type="submit" name="submit" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/> 
            </div> 
            <b style="display: none";> 
             <input class="action_btn" type="submit" name="submit" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/> 
            </b> 
            <!--<input class="action_btn" type="hidden" name="button" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/>--> 
           </p> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      </form>

Вот мой сценарий для кнопок:

Этот скрипт для проверки флажок один за другим:

<script language="javascript"> 
     function validate() 
     { 
     var chks = document.getElementsByName('draw[]'); 
     var hasChecked = false; 
     for (var i = 0; i < chks.length; i++) 
     { 
      if (chks[i].checked) 
      { 
      hasChecked = true; 
      break; 
      } 
     } 

     if (hasChecked == false) 
      { 
      alert("Please select at least one."); 
      return false; 
      } 

     return true; 
     } 
    </script>

Вот сценарий для Все отмечены все флажки:

<script type="text/javascript"> 
function CheckIfChecked(id) 
{ 
    var CheckboxID = id; 
    var SubmitButtonContainerID = "submit-button-container"; 
    if(document.getElementById(CheckboxID).checked) { document.getElementById(SubmitButtonContainerID).style.display = "block"; } 
    else { document.getElementById(SubmitButtonContainerID).style.display = "none"; } 
} 
CheckIfChecked();

Выход должен быть, когда я непроверенный флажок, если один или более Флажок все еще проверяется кнопка останется. Другой, если я нажал Все все флажок будет проверен, но если я непроверенный один флажок, а затем проверил его снова ОНЛ

источник

2015-09-08 Jae Eun

Не знаете, как это вопрос 'sql'. попробуйте что-то в jquery, например [** This **] (http://stackoverflow.com/questions/2228382/select-all-checkboxes-with-jquery) –

Прошу прощения, если вы задали вопрос и маркировка. Но я использую это в javascript –

Поскольку PHP не влияет на этот вопрос, не могли бы вы дать нам HTML, который PHP генерирует вместо PHP? И, возможно, удалить тег PHP? – Anders

Ваш вопрос трудно понять, но я предполагаю, что следующий код вам поможет.

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
</head> 
<body> 

<form id="drawing" action="" method="post"> 
       <div id="sub_profile_cont"> 
        <div class="sub_profile right"> 
         <p class="sub_content_text" style='margin-left: 25px;'> 
          <a href="javascript:selectToggle(true, 'drawing');" id="show" onclick="checkALL();">All</a> | <a href="javascript:selectToggle(false, 'drawing');" id="hide" onclick="unCheckALL();">None</a> 
          MISCELLANEOUS FEES: 
         </p> 



         <p class="sub_content_text" style='margin-left: 30px;'> 
          <input type='checkbox' name='draw[]' value="" id="required-checkbox1" onClick="CheckIfChecked()"> 
          PTA Fee : &#8369; </p> 


         <p class="sub_content_text" style='margin-left: 30px;'> 
          <input type='checkbox' name='draw[]' value="" id="required-checkbox2" onClick="CheckIfChecked()"> 
          Maintenance Fee : &#8369; </p> 


         <p class="sub_content_text" style='margin-left: 30px;'> 
          <input type='checkbox' name='draw[]' value="" id="required-checkbox3" onClick="CheckIfChecked()"> 
          School ID : &#8369;</p> 



         <p class="sub_content_text" style='margin-left: 30px;'> 
          <input type='checkbox' name='draw[]' value="" id="required-checkbox4" onClick="CheckIfChecked()"> 
          Electricity : &#8369; </p> 

         <div id="sub_profile_cont"> 
          <div class="sub_profile left"> 
           <p class="block_cont left"> 
            <!--<input style="background: linear-gradient(rgb(20, 129, 191), rgb(13, 89, 160)); color: #ccc;" class="action_btn" type="button" id="pay_btn" value="COMPUTE" title="Select at least one" disable/>--> 
            <div id = "first_button" style="display:none; "margin-bottom: -6px;""> 
             <input class="action_btn" type="submit" name="submit" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/> 
            </div> 
            <b style="display: none"; id="second_button"> 
             <input class="action_btn" type="submit" name="submit" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/> 
            </b> 
            <!--<input class="action_btn" type="hidden" name="button" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/>--> 
           </p> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      </form> 


<script type="text/javascript"> 
function checkALL(){ 
    var chk_arr = document.getElementsByName("draw[]");   
    for(k=0;k< chk_arr.length;k++) 
    { 
     chk_arr[k].checked = true; 
    } 
CheckIfChecked(); 
} 

function unCheckALL(){ 
    var chk_arr = document.getElementsByName("draw[]");    
    for(k=0;k< chk_arr.length;k++) 
    { 
     chk_arr[k].checked = false; 
    } 
    CheckIfChecked(); 
} 

function checkAny(){ 
    var chk_arr = document.getElementsByName("draw[]");    
    for(k=0;k< chk_arr.length;k++) 
    { 
     if(chk_arr[k].checked==true){ 
     return true; 
     } 
    } 
    return false; 
} 

function isCheckAll(){ 
    var chk_arr = document.getElementsByName("draw[]");    
    for(k=0;k< chk_arr.length;k++) 
    { 
     if(chk_arr[k].checked==false){ 
     return false; 
     } 
    } 
    return true; 
} 

function showFirstButton(){ 
    document.getElementById('first_button').style.display = "block"; 
} 
function hideFirstButton(){ 
    document.getElementById('first_button').style.display = "none"; 
} 
function showSecondButton(){ 
    document.getElementById('second_button').style.display = "block"; 
} 
function hideSecondButton(){ 
    document.getElementById('second_button').style.display = "none"; 
} 


function CheckIfChecked(){ 
checkAny() ? showFirstButton():hideFirstButton(); 
isCheckAll() ? showSecondButton():hideSecondButton(); 
} 

</script> 
</body> 
</html>

источник

2015-09-08 18:37:57

Спасибо большое! Моя проблема с проверкой отмеченного ящика одна за другой была решена –

Но проблема в кнопке должна быть только одна, которая будет показана. Либо я нажал кнопку «Все», либо я установил один или несколько флажков. –

Я понял это. Я удаляю вторую кнопку, и моя проблема сильно решена. –

попробовать это, но прежде, чем вам нужно установить Jquery LIB, например, как это <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<input type="checkbox">1 
<input type="checkbox">2 
<button style="display: none" id="one">one or more checked</button> 
<button style="display: none" id="all">all checked</button> 
<script> 
$(function(){ 
    $('[type=checkbox]').click(function() 
    { 
     var checkedChbx = $('[type=checkbox]:checked'); 
     if (checkedChbx.length > 0) 
     { 
      $('#one').show(); 
     } 
     else 
     { 
      $('#one').hide(); 
     } 

     if (checkedChbx.length == $('[type=checkbox]').length) 
     { 
      $('#all').show(); 
     } 
     else 
     { 
      $('#all').hide(); 
     } 
    }); 
}); 
</script>

источник

2015-09-08 18:19:26 Vadim

Скрыть кнопку, если флажок не установлен и кнопка «Показать», если нажата кнопка «Проверить все» или нажата одна или несколько кнопок.

ответ

Смежные вопросы