JS を使用してチェックボックスをクリックして表示状態を変更する方法

亚连
リリース: 2018-06-20 10:29:32
オリジナル
2311 人が閲覧しました

以下のエディターは、チェックボックスをクリックして p の表示ステータスを変更する実装の JS サンプル コードを共有します。これは良い参考値であり、皆さんの役に立つことを願っています。エディターをフォローして一緒に見てみましょう

まず、ページ上で:

 <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>
ログイン後にコピー

それからjqueryでの実装

jQuery(document).ready(function($) { 
 
//是否添加活动内容 
 
$("#isHaveActive").change(function(){  
 
   var p = $("#active");  
   p.css("display") === "none" && p.show() || p.hide(); 
 
 });
ログイン後にコピー

上記は私が皆さんのためにまとめたものです。将来的には誰にとっても役立つでしょう。

関連記事:

jQuery で CheckBox のクリックをトリガーする DIV のクリックを実装する方法

AngularJs でクリック状態の背景色を変更する方法

ブートストラップ グリッド システム (詳細なチュートリアル)

React Native で prop-types を使用して属性確認を実装する方法

以上がJS を使用してチェックボックスをクリックして表示状態を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート