Opcheckout未检测到复选框

时间:2017-05-05 09:12:38

标签: javascript jquery magento jquery-plugins

我正在构建一个电子商务软件并​​且卡在付款结帐页面上。 我决定使用OP Checkout作为Magento Checkout,并包含所有必需的JS文件。问题是当我点击“继续”按钮时,它没有检测到勾选了哪个复选框。当我发现警报消息时,我发现这行代码需要捕获用户交互。

if ($('login:guest') && $('login:guest').checked) {

HTML CODE:

<div class="col-md-6">
  <h3>Checkout as a Guest or Register</h3>
  <div class="space10"></div>
  <p>Register with us for future convenience:</p>
  <div class="cbox">
    <input name="checkout_method" id="login:guest" value="guest" class="radio" type="radio"><span for="login:guest">Checkout as Guest</span><br>
    <div class="space10"></div>
    <input name="checkout_method" id="login:register" value="register" class="radio" type="radio"><span for="login:register">Register</span>
  </div>
  <div class="space20"></div>
  <h4>Register and save time!</h4>
  <div class="space10"></div>
  <p>Register with us for future convenience:</p>
  <ul class="ul">
    <li><i class="fa fa-check"></i> Fast and easy check out</li>
    <li><i class="fa fa-check"></i> Easy access to your order history and status</li>
  </ul>
  <div class="space10"></div>

  <button id="onepage-guest-register-button" type="button" class="button btn-black" onclick="checkout.setMethod();"><span><span>Continue</span></span></button>
</div>

上面的代码没有捕获结果。

2 个答案:

答案 0 :(得分:1)

#选择器使用id并从id(阅读Selector docs)中转义:,例如,

if ($('#login\\:guest').is(':checked')) { //escape : by using \\

使用它的另一种方法是,

$('[id="login:guest"]').is(':checked');

代码段,

&#13;
&#13;
$(function() {
  $('#btnCheck').on('click', function() {
    alert($('#login\\:guest').is(':checked') + ',' + $('[id="login:register"]').is(':checked'));
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cbox">
  <input name="checkout_method" id="login:guest" value="guest" class="radio" type="radio"><span for="login:guest">Checkout as Guest</span><br>
  <div class="space10"></div>
  <input name="checkout_method" id="login:register" value="register" class="radio" type="radio"><span for="login:register">Register</span>
  <button id="btnCheck">Check</button>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

在我添加.prop(&#39;已检查&#39;)而不是(&#39;:已检查&#39;)后,代码正常工作;

&#13;
&#13;
$(function() {
  $('#btnCheck').on('click', function() {
    alert($('#login\\:guest').prop('checked') + ',' + $('[id="login:register"]').prop('checked'));
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cbox">
  <input name="checkout_method" id="login:guest" value="guest" class="radio" type="radio"><span for="login:guest">Checkout as Guest</span><br>
  <div class="space10"></div>
  <input name="checkout_method" id="login:register" value="register" class="radio" type="radio"><span for="login:register">Register</span>
  <button id="btnCheck">Check</button>
</div>
&#13;
&#13;
&#13;