ラジオボタンを変更し、クリックしてスタイルを変更してください。

Question

お支払い方法を変更するためのHTMLを作成しました。

<ul id="checkout-method"> 
    <li><input name="payment_method" type="radio" value="Cash on Delivery"> 
     <label>Cash on Delivery</label> 
     <p class="explainpaymethod" style="display:none">Pay with cash upon delivery.</p> 
    </li> 
    <li><input name="payment_method" type="radio" value="Paypal"> 
     <label>Paypal</label> 
     <p class="explainpaymethod" style="display:none">Pay via PayPal; you can pay with your credit card if you don’t have a PayPal account.</p> 
    </li> 
</ul> 

しかし、私は何をするかわからない：

• 常にチェックされている最初のinputを作ります。

• ラジオボタンの代わりにli親タグをクリックしてラジオをチェックします。

• チェックすると、.explainpaymethodが表示され、その他はhideです。

ありがとうございました。

Answer 1

• 最初のラジオをチェックするには、最初の入力タグにcheckedプロパティを使用します。

  $(document).ready(function(){ 
   
  
   
  \t $("input[type='radio']").on('click', function(e) { 
   
      \t $('p.explainpaymethod').hide(); 
   
      \t if($(this).is(':checked')) { 
   
      \t $(this).closest('li').find('p.explainpaymethod').show(); 
   
      } 
   
      }) 
   
  
   
  });

  label { 
   
      display: block; 
   
      cursor: pointer; 
   
  }

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
   
  <ul id="checkout-method"> 
   
      <li><label><input name="payment_method" type="radio" value="Cash on Delivery" checked> 
   
       Cash on Delivery</label> 
   
       <p class="explainpaymethod" style="display:inline-block">[Pay with cash upon delivery.]</p> 
   
      </li> 
   
      <li><label><input name="payment_method" type="radio" value="Paypal"> 
   
       Paypal</label> 
   
       <p class="explainpaymethod" style="display:none">[Pay via PayPal; you can pay with your credit card if you don’t have a PayPal account.]</p> 
   
      </li> 
   
  </ul>

  ：

• することは、このようにすべてのあなたの特性を達成することができ、li親タグをクリックする代わりに、電波を確認し、<label>

にdisplay: block;プロパティを使用できるようにするには

希望します。

Answer 2

1）常に最初の「入力」をチェックします。

$('input[type="radio"]').eq(0).prop('checked',true); 

2）ラジオの代わりに、ラジオボタンをチェックするためのli親タグをクリックします。あなたは<label for="parent_id">

<label for="Paypal">Paypal</label> 

3を使用する必要が

）1がチェックされた場合、.explainpaymethodは他は非表示で、表示されます。

$('input[type="radio"]').change(function() { 
    $('.explainpaymethod').hide(); 
    $(this).closest('li').find('.explainpaymethod').show(); 
}); 

$('input[type="radio"]').eq(0).prop('checked',true); 
 
$('input[type="radio"]').eq(0).closest('li').find('.explainpaymethod').show(); 
 
$('input[type="radio"]').change(function() { 
 
    $('.explainpaymethod').hide(); 
 
    $(this).closest('li').find('.explainpaymethod').show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="checkout-method"> 
 
    <li><input name="payment_method" type="radio" value="Cash on Delivery" id="Cash"> 
 
     <label for="Cash">Cash on Delivery</label> 
 
     <p class="explainpaymethod" style="display:none">Pay with cash upon delivery.</p> 
 
    </li> 
 
    <li><input name="payment_method" type="radio" value="Paypal" id="Paypal"> 
 
     <label for="Paypal">Paypal</label> 
 
     <p class="explainpaymethod" style="display:none">Pay via PayPal; you can pay with your credit card if you don’t have a PayPal account.</p> 
 
    </li> 
 
</ul>

Answer 3

必ず最初の入力がチェックされていることを確認。

デフォルトの選択オプションを設定するには、HTMLのchecked属性を使用します。

ラジオボタンの代わりにラジオをチェックするには、liの親タグをクリックします。

入力と<label>要素内のテキストを折り返す代わりに、li上でクリックを追加しないでください。これは、ラジオボタンのヒット領域を拡大する標準コントロールです。

チェックを付けると、.explainpaymethodが表示され、otherがhideです。

これを行うには、いくつかのJSが必要になります。 DOMトラバーサル技術を使用して、変更されたラジオボタンに関連する要素を表示する前に、すべての.explainpaymethod要素を非表示にする必要があります。具体的にはclosest()およびfind()です。あなたはjavascriptをせずにそれを行うことができます

$('#checkout-method input').change(function() { 
 
    $('.explainpaymethod').hide(); 
 
    $(this).closest('li').find('.explainpaymethod').show(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="checkout-method"> 
 
    <li> 
 
    <label> 
 
     <input name="payment_method" type="radio" value="Cash on Delivery" checked="true"> 
 
     Cash on Delivery 
 
    </label> 
 
    <p class="explainpaymethod">Pay with cash upon delivery.</p> 
 
    </li> 
 
    <li> 
 
    <label> 
 
     <input name="payment_method" type="radio" value="Paypal"> 
 
     Paypal 
 
    </label> 
 
    <p class="explainpaymethod" style="display:none">Pay via PayPal; you can pay with your credit card if you don’t have a PayPal account.</p> 
 
    </li> 
 
</ul>

Answer 4

：これを試してみてください。

最初に、チェックする属性を、デフォルトでチェックしたい入力に追加します。

次に、入力に「id」属性を、ラベルに「for」属性を追加します。

<ul id="checkout-method"> 
    <li><input name="payment_method" type="radio" checked value="Cash on Delivery" id="cod"> 
     <label for="cod">Cash on Delivery</label> 
     <br> 
     <p class="explainpaymethod">Pay with cash upon delivery.</p> 
    </li> 
    <li><input name="payment_method" type="radio" value="Paypal" id="pp"> 
     <label for="pp">Paypal</label> 
     <br> 
     <p class="explainpaymethod">Pay via PayPal; you can pay with your credit card if you don’t have a PayPal account.</p> 
    </li> 
</ul> 

次に、兄弟入力がチェックされている場合、段落を示す次のCSSを追加します。ここで

.explainpaymethod { 
    display: none; 
} 
input:checked ~ .explainpaymethod { 
    display: inline-block; 
} 

バイオリンへのリンクです：https://jsfiddle.net/u1zjyorf/3/