Question

我有两个按钮同意并且不同意。如果我点击同意，那么页面将继续，如果我点击不同意，那么返回false stay到同一页面。这有点简单，但我没有实现。我在下面尝试的是示例代码。随意告诉如果有什么需要改变。

有谁能告诉我这里可能出现什么问题？

JS，CSS和HTML：

var termsChk = document.getElementById("agree");
$(".toggle").click(function() {
      if (termsChk.checked === true) {
        alert("Checked!");
      } else {
        //alert("Not Checked!");
        return false;
      }
    }

body,
html {
  background: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  z-index: -1;
}

.btn {
  border: 3px solid #1a1a1a;
  display: inline-block;
  padding: 10px;
  position: relative;
  margin-right: 40px;
  text-align: center;
  transition: background 600ms ease, color 600ms ease;
}

input[type="radio"].toggle {
  display: none;
}

input[type="radio"].toggle+label {
  cursor: pointer;
  min-width: 60px;
}

input[type="radio"].toggle+label:hover {
  background: none;
  color: #1a1a1a;
}

input[type="radio"].toggle+label:after {
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

input[type="radio"].toggle.toggle-left+label:after {
  left: 100%;
}

input[type="radio"].toggle.toggle-right+label {
  margin-left: -5px;
}

input[type="radio"].toggle.toggle-right+label:after {
  left: -100%;
}

input[type="radio"].toggle:checked+label {
  cursor: default;
  background-color: #000;
  color: #fff;
  transition: color 200ms;
}

input[type="radio"].toggle:checked+label:after {
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="agree" class="toggle toggle-left" name="toggle" type="radio">
<label for="agree" class="btn">I agree</label>


<input id="disagree" class="toggle toggle-right" name="toggle" type="radio">
<label for="disagree" class="btn">Disagree</label>

Answer 1

出现JS错误，您没有正确关闭click功能。

var termsChk = document.getElementById("agree");
$(".toggle").click(function() {
      if (termsChk.checked === true) {
        alert("Checked!");
      } else {
        alert("Not Checked!");
        return false;
      }
    });

body,
html {
  background: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  z-index: -1;
}

.btn {
  border: 3px solid #1a1a1a;
  display: inline-block;
  padding: 10px;
  position: relative;
  margin-right: 40px;
  text-align: center;
  transition: background 600ms ease, color 600ms ease;
}

input[type="radio"].toggle {
  display: none;
}

input[type="radio"].toggle+label {
  cursor: pointer;
  min-width: 60px;
}

input[type="radio"].toggle+label:hover {
  background: none;
  color: #1a1a1a;
}

input[type="radio"].toggle+label:after {
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

input[type="radio"].toggle.toggle-left+label:after {
  left: 100%;
}

input[type="radio"].toggle.toggle-right+label {
  margin-left: -5px;
}

input[type="radio"].toggle.toggle-right+label:after {
  left: -100%;
}

input[type="radio"].toggle:checked+label {
  cursor: default;
  background-color: #000;
  color: #fff;
  transition: color 200ms;
}

input[type="radio"].toggle:checked+label:after {
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="agree" class="toggle toggle-left" name="toggle" type="radio">
<label for="agree" class="btn">I agree</label>


<input id="disagree" class="toggle toggle-right" name="toggle" type="radio">
<label for="disagree" class="btn">Disagree</label>

Answer 2

你为什么要使用无线电组？看起来你的单选按钮看起来像按钮只能切换。但你也可以使用按钮来做到这一点。

$(".btn").click(function() {
        
        if(this.name === "agree") {
          alert("Agree");
        } else {
          alert("Disagree");
        }
    })

body,
html {
  background: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  z-index: -1;
}

.btn {
  border: 3px solid #1a1a1a;
  display: inline-block;
  padding: 10px;
  position: relative;
  margin-right: 40px;
  text-align: center;
  transition: background 600ms ease, color 600ms ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button class="btn" name ="agree"> I agree </button> 

<button class="btn" name ="disagree"> Disagree </button>

jquery中的onClick事件

2 个答案: