Question

我需要帮助。我有3个单选按钮1.信用购物车2.货物付款 3.银行付款

因此，我想在选中id =“ credit”（信用卡购物车）时输入：JS需要使用信用卡购物车信息输入。

当所选择的单选按钮变得信用卡，卡信息被打开。选择其他选项时，无需卡付款。因此，只有在选择购物车时才必须输入信息。

$('input[name="cname"]').change(function() {
  if ($("#kart").is(':checked')) {
    $('#cname').add.attr('required');
    $('#cnumber').add.attr('required');
    $('#cmonth').add.attr('required');
    $('#cyear').add.attr('required');
    $('#ccvc').add.attr('required');
  } else {
    $('#cname').removeAttr('required');
    $('#cnumber').removeAttr('required');
    $('#cmonth').removeAttr('required');
    $('#cyear').removeAttr('required');
    $('#ccvc').removeAttr('required');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-block my-3">
  <div class="custom-control custom-radio" id="kart">
    <input id="credit" name="paymentType" checked type="radio" value="Kredi Kartı" class="custom-control-input">
    <label class="custom-control-label" for="credit">Paiement par carte Kreadi</label>
  </div>
  <div class="custom-control custom-radio" id="kapida">
    <input id="cargo" name="paymentType" type="radio" value="Kapıda Ödeme" class="custom-control-input">
    <label class="custom-control-label" for="cargo">Payer à la Porte</label>
  </div>
  <div class="custom-control custom-radio" id="havale">
    <input id="bank" name="paymentType" type="radio" value="Banka Havale" class="custom-control-input">
    <label class="custom-control-label" for="bank">Paiement par Virement Bancaire</label>
  </div>
</div>

<div class="row" id="kartodeme">
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-12 mb-3">
        <label for="">Nom et Prénom Sur la Carte</label>
        <input type="text" name="cname" class="form-control" id="cname" placeholder="Prénom / Nom de Famille">
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 mb-3">
        <label for="">Numéro de Carte</label>
        <input type="text" name="cnumber" min="16" max="16" class="form-control" id="cnumber" placeholder="XXXX-XXXX-XXXX-XXXX">
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 mb-1">
        <label for="">Date d'expiration</label>
      </div>
      <div class="col-md-4 mb-3">
        <label for="">Lune</label>
        <select name="cmonth" id="cmonth" class="form-control">
          <option value="01">01</option>
          <option value="02">02</option>
          <option value="03">03</option>
          <option value="04">04</option>
          <option value="05">05</option>
          <option value="06">06</option>
          <option value="07">07</option>
          <option value="08">08</option>
          <option value="09">09</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
        </select>
      </div>
      <div class="col-md-4 mb-3">
        <label for="">An</label>
        <select name="cyear" id="cyear" class="form-control">
          <option value="20">2020</option>
          <option value="21">2021</option>
          <option value="22">2022</option>
          <option value="23">2023</option>
          <option value="24">2024</option>
          <option value="25">2025</option>
          <option value="26">2026</option>
          <option value="27">2027</option>
          <option value="28">2028</option>
          <option value="29">2029</option>
        </select>
      </div>
      <div class="col-md-4 mb-3">
        <label for="">CVC</label>
        <input type="text" name="ccvc" class="form-control" id="ccvc" placeholder="123">
      </div>
    </div>
  </div>
  <div class="col-sm-6">

  </div>
</div>

Answer 1

您的问题不太清楚，但是如果您在选中#credit单选时尝试执行验证，则可以按以下方式进行处理：

存储一个变量，我们称之为const isValidationRequired = false;
在所有无线电输入上都具有事件侦听器。假设您在父div上添加了一个radios-wrapper类，因此请选择以下内容：

`

function handleRadioClick(e) {
    const targetId = e.target.id;
    if (targetId == "credit") {
        isValidationRequired = true;
    }
}

const radiosWrapper = document.querySelector('.radios-wrapper');
const radios = radiosWrapper.querySelectorAll('input[type='radio']');
radios.forEach(radio => radio.addEventListener('click', handleRadioClick))

Answer 2

几件事

您想通过点击收音机来运行
您想测试信用而不是卡丁车
要验证选择，它需要一个空的autoComplete="off"

<option value="">Month</option>

const cc = () => {
  const checked = $("#credit").is(':checked');
  ['cnumber', 'cmonth', 'cyear', 'ccvc', 'cname'].forEach(ele => {
    $ele = $("#" + ele);
    if ($ele.length > 0) { // test if the element exists
      if (checked) $ele.attr("required", true);
      else $ele.removeAttr("required");
    }
  })
};
$('[name=paymentType]').on('click', cc)
cc(); // on load

// extra code to generate the years from current year
const year = +String(new Date().getFullYear()).slice(2);
let curMonth = new Date().getMonth()+1;
$("#cyear")[0].options.length=1; // remove all but one
for (let i=year, n = year+9; i<=n;i++) {
  $("#cyear").append($('<option/>',{text:i,value:i}));
}

我该怎么做：选中单选按钮时需要更改输入？

2 个答案: