Exemple de code JS pour cliquer sur la case à cocher pour modifier l'état d'affichage p

Cet article partagera avec vous un exemple de code JS à implémenter en cliquant sur une case à cocher pour modifier l'état d'affichage de p. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

D'abord sur la page :

 <p class="row cl">
    <label class="form-label col-xs-4 col-sm-3" style="width: 20%"><span class="c-red">*</span>是否存在促销活动：</label>
<p class="formControls col-xs-8 col-sm-9 skin-minimal">
<p class="check-box">
<input type="checkbox" value="1" id="isHaveActive" >
<label for="isHaveActive"> </label>
</p>
</p>
</p>
  
  <p id="active" name="active" style="display:none;">
  <p class="row cl" >
<label class="form-label col-xs-4 col-sm-3" style="width: 20%"><span class="c-red">*</span>现价：</label>
<p class="formControls col-xs-8 col-sm-9">
<input type="number" step="0.01" class="input-text" value="${priceChange.price}" placeholder="" id="price" name="price" >
元/L
</p>
</p>   
  
  <p class="row cl" >
<label class="form-label col-xs-4 col-sm-3" style="width: 20%"><span class="c-red">*</span>活动名：</label>
<p class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" value="${priceChange.active_name}" placeholder="" id="active_name" name="active_name" >
</p>
</p>   
 <p class="row cl" >
<label class="form-label col-xs-4 col-sm-3" style="width: 20%"><span class="c-red">*</span>距挂牌价：</label>
<p class="formControls col-xs-8 col-sm-9">
<input type="number" step="0.01" class="input-text" value="${priceChange.gap_guapai}" placeholder="" id="gap_guapai" name="gap_guapai" >
元/L
</p>
</p>    
  
  <p class="row cl" >
<label class="form-label col-xs-4 col-sm-3" style="width: 20%"><span class="c-red">*</span>促销活动形式：</label>
<p class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" value="${priceChange.activity_form}" placeholder="" id="activity_form" name="activity_form" >
</p>
</p> 
  <p class="row cl" >
<label class="form-label col-xs-4 col-sm-3" style="width: 20%"><span class="c-red">*</span>促销活动优惠幅度：</label>
<p class="formControls col-xs-8 col-sm-9">
<input type="number" step="0.01" class="input-text" value="${priceChange.activity_gap}" placeholder="" id="activity_gap" name="activity_gap" >
元/L
</p>
</p>   
</p>

Puis l'implémentation dans jquery

jQuery(document).ready(function($) { 
 
//是否添加活动内容 
 
$("#isHaveActive").change(function(){  
 
   var p = $("#active");  
   p.css("display") === "none" && p.show() || p.hide(); 
 
 });

Recommandations associées :

Implémentation méthode JS cliquant sur le lien pour passer à l'affichage du contenu caché

méthode js consistant à cliquer pour sélectionner les compétences text_javascript

js cliquant sur revenir pour accéder à les compétences spécifiées en matière de processus d'implémentation de page_javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!