Question

我创建了用于更改付款方式的HTML。

@return bool (Generated by command line)
vs
@return boolean (Generated by PhpStorm)

但我不知道该怎么做：

请务必先检查<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会显示，其他是隐藏。

非常感谢。

Answer 1

要检查第一个广播，请在第一个输入标记中使用checked属性。
为了能够点击li父标记，请检查广播，使用display: block;上的<label>媒体资源

您可以实现以下所有属性：

$(document).ready(function(){  

	$("input[type='radio']").on('click', function(e) {
  	$('p.explainpaymethod').hide();
  	if($(this).is(':checked')) {
    	$(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>

希望这有帮助！

Answer 2

始终检查第一个输入。

使用HTML中的checked属性设置默认选定选项。

点击li parent标签检查电台而不是单选按钮。

不要在li上添加点击，而是将输入和文本包装在<label>元素中。这是一个标准控件，可以扩展单选按钮的命中区域。

如果选中一个，则.explainpaymethod将显示，其他是隐藏。

你需要一些JS才能做到这一点。您需要隐藏所有.explainpaymethod元素，然后才能使用DOM遍历技术显示与更改的单选按钮相关的元素。具体为closest()和find()。试试这个：

$('#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 3

1）始终先检查“输入”。

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

2）点击li parent标签检查收音机而不是单选按钮。

您需要使用<label for="parent_id">

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

3）如果检查一个，.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 4

你可以不用javascript来完成。

首先将checked属性添加到默认情况下要检查的输入中。

然后在输入中添加“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/

更改单选按钮并单击以设置其样式

4 个答案: