Question

当有人单击复选框时，我尝试显示一条消息。

您有显示消息的想法吗？我试过了，但是没用。

复选框：

echo '<div><input type="checkbox" value="' . $products_id .'" id="productsCompare" title="Compare" /> Compare</div>';

包含显示消息元素的脚本

     <script>
       $(function() {
        $('input[type=checkbox]').change(function(){   
            var chkArray = [];   
            $('#container').html('');

            //put the selected checkboxes values in chkArray[]
            $('input[type=checkbox]:checked').each(function() {
                chkArray.push($(this).val());
            });

// message
            var toggle = false;
            $('#productsCompare').click(function() {
              $('input[type=checkbox]').attr('checked',!toggle);
              toggle = !toggle;
               $(\'productsCompare\').show();
            });



            //If chkArray is not empty show the <div> and create the list
              if(chkArray.length !== 0){      
                  $.ajax({
                          method: 'POST',
                          url : "http://localhost/.........test.php",
                          data : {product_id: chkArray},
                      });  
              }

        });
    })
    </script>

消息

<div class="col-md-12" id="productsCompare" style="display:none;">
  <div class="separator"></div>
  <div class="alert alert-info text-md-center">
    <span class="text-md-center">
      <button class="btn"><a href="compare.php">Compare</a></button>
    </span>
  </div> 
</div>

Answer 1

检查我的示例，然后尝试根据您的情况进行修改。

$("#box").addClass('novis');
$("#ch").on('click',function(){
	$("#box").toggleClass('novis','vis');
});

.vis{ display: block; }
.novis{ display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Show</label>
  <input type="checkbox" id="ch" unchecked>

	<div id="box">
		<p>Hello world</p>
	</div>

在复选框上显示消息单击

1 个答案: