当前代码

Question

我有两个单选按钮，一个用于信用卡，另一个用于借记卡。如果我按下任何一个单选按钮，我应该得到一张信用卡和借记卡。

当前代码

<div class="forcredit">
  <label>Card no:</label>
  <input type="text" name="cardno" required=""><span style="color: red;">*</span>
  <label>CVV no:</label>
  <input type="text" name="cvvno" required=""><span style="color: red;">*</span>
  <label>Expiration MM/YYYY</label>
  <input type="month" name="expire" required=""><span style="color: red;">*</span>
</div>

但问题是，当我按下单选按钮时，我无法公开其他表单。

我的整个代码：

<!DOCTYPE html>
<html>
<head>
    <title>form</title>
</head>
<body>
  <form method="post" action="#">

  <h4>Payment type:</h4>
  <div>
    <div>
      <input type="radio" name="credit" id="credit" required>
      <label>Credit card</label>

      <div class="forcredit">
      <label>Card no:</label>
      <input type="text" name="cardno" required=""><span style="color: red;">*</span><br>
      <label>CVV no:</label>
      <input type="text" name="cvvno" required=""><span style="color: red;">*</span><br>
      <label>Expiration MM/YYYY</label>
      <input type="month" name="expire" required=""><span style="color: red;">*</span><br>
      </div>
    </div>

    <div>
      <input type="radio" name="debit" id="debit">
      <label>Debit card</label>

      <div class="fordebit">
      <label>Card no:</label>
      <input type="text" name="cardno" required=""><span style="color: red;">*</span><br>
      <label>CVV no:</label>
      <input type="text" name="cvvno" required=""><span style="color: red;">*</span><br>
      <label>Expiration MM/YYYY</label>
      <input type="month" name="expire" required=""><span style="color: red;">*</span><br>
      </div>
    </div>
  </div>
  <div>
    <input type="submit" value="Pay">
  </div>
  </form>
</body>
</html>

任何人都可以改造CSS文件，这样当我按下单选按钮时，应该显示类似的表格吗？

Answer 1

基本上你需要在你的css中添加：checked status以显示下一个兄弟

  input[type=radio] + .fordebit,
  input[type=radio] + .forcredit{
    display:none;
  }
  input[type=radio]:checked + .fordebit{
     display:block;
  }
  input[type=radio]:checked + .forcredit{
     display:block;
  }

UPDATE

好的，这是一个更新。你的HTML也存在一些问题。如果要对多项选项使用单选按钮，则它们应具有相同的名称。请参阅下面的完整工作代码

＆＃13;

input[type=radio] + .details{
  display: none;
}

input[type=radio]:checked + .fordebit {
  display: block;
}

input[type=radio]:checked + .forcredit {
  display: block;
}
input[type=radio] {
  float:left;
}

＆＃13;

<form method="post" action="#">

  <h4>Payment type:</h4>
  <div>
    <div>
      <label>Credit card</label>
      <input type="radio" name="payment_type" id="credit" required>

      <div class="forcredit details">
        <label>Card no:</label>
        <input type="text" name="cardno" required=""><span style="color: red;">*</span>
        <br>
        <label>CVV no:</label>
        <input type="text" name="cvvno" required=""><span style="color: red;">*</span>
        <br>
        <label>Expiration MM/YYYY</label>
        <input type="month" name="expire" required=""><span style="color: red;">*</span>
        <br>
      </div>
    </div>

    <div>
      <label>Debit card</label>
      <input type="radio" name="payment_type" id="debit">

      <div class="fordebit details">
        <label>Card no:</label>
        <input type="text" name="cardno" required=""><span style="color: red;">*</span>
        <br>
        <label>CVV no:</label>
        <input type="text" name="cvvno" required=""><span style="color: red;">*</span>
        <br>
        <label>Expiration MM/YYYY</label>
        <input type="month" name="expire" required=""><span style="color: red;">*</span>
        <br>
      </div>
    </div>
  </div>



  <div>
    <input type="submit" value="Pay">
  </div>

＆＃13;

Answer 2

CSS无法做到这一点。事件捕获需要Javascript。使用像jquery这样的库，您需要将单击事件处理程序附加到卡选择器单选按钮。仔细检查您的单选按钮名称，然后您需要：

$('.card').click(function() {
  $('.forcredit').show();
});

通过html和css中的Checked Radio Buttons公开其他表单字段

当前代码

2 个答案: