Javascript 复选框控件答案

【问题标题】：Javascript Checkbox ControlJavascript 复选框控件
【发布时间】：2014-02-08 15:23:56
【问题描述】：

搜索了整个网络，但我找不到我的问题的答案。我决定在这里问一个答案。我有一个使用 AJAX GET 提示的代码。此代码正在使用按钮。我想要这个按钮附近的复选框。当未选中复选框时，我想发送消息。如果不选中复选框，用户应该无法继续。

这是原始代码：

<div class="buttons">
  <div class="right">
    <a id="button-confirm" class="button"><span><?php echo $button_confirm; ?></span></a>
  </div>
</div>

<script type="text/javascript"><!--
$('#button-confirm').bind('click', function() {
    $.ajax({
        type: 'GET',
        url: 'index.php?route=payment/bank_transfer/confirm',
        success: function() {
            location = '<?php echo $continue; ?>';
        }
    });
});
//--></script>

这是我编辑的代码：

<div class="buttons">
  <div class="right">
    <input type="checkbox" value="1" /><a id="button-confirm" class="button" ><span><?php echo $button_confirm; ?></span></a>
  </div>
    </div>

<script type="text/javascript"><!--
$('#button-confirm').bind('click', function() {
  $('#button-confirm').click(function(){

  var input = $('input[type=checkbox]:checked').val();

    if ( !input ){
        alert('Lütfen checkboxı işaretleyin!');
    } else {
          }
    $.ajax({
        type: 'GET',
        url: 'index.php?route=payment/bank_transfer/confirm',
        success: function() {
            location = '<?php echo $continue; ?>';
        }
    });
});

});


//--></script>

我的代码编辑版本不起作用。它不显示警报，当我单击按钮两次时，按钮会继续并完成该过程。

我想显示一条内联警报消息，而不是弹出警报消息。

感谢您从现在开始的帮助...

【问题讨论】：

我说“当我单击按钮两次时”我提到“当我单击一次时没有任何反应，但是当我单击两次时它起作用”是否选中该复选框并不重要。谢谢

标签： javascript jquery html ajax checkbox

【解决方案1】：

“它不显示警报，当我单击按钮两次时，按钮会继续并完成该过程。”

您已经嵌套了对$('#button-confirm').click(...) 的调用在对$('#button-confirm').bind('click'...) 的调用。这意味着第一次单击时唯一发生的事情是将第二次单击处理程序绑定到同一元素。第二次单击它时会执行两个单击处理程序，外部的一个绑定 another 单击处理程序和内部的实际尝试测试您的复选框并执行 ajax 的事情。

无论复选框值如何，它都会继续执行 ajax 请求的原因是您在 else 语句的结束 } 之后 调用了 $.ajax()。

试试这个：

  $('#button-confirm').click(function () {    
      var input = $('input[type=checkbox]:checked').val();

      if (!input) {
          alert('Lütfen checkboxı işaretleyin!');
      } else {
          $.ajax({
              type: 'GET',
              url: 'index.php?route=payment/bank_transfer/confirm',
              success: function () {
                  location = '<?php echo $continue; ?>';
              }
          });
      }
  });

在我看来，测试复选框是否被选中的更易于阅读的方法如下：

      if (!$('input[type=checkbox]').is(':checked')) {
          alert('Lütfen checkboxı işaretleyin!');

【讨论】：