Question

我有一个非常愚蠢的问题，但我无法在任何地方的网站上找到它。

我正在为一个作业创建一个网站，而且我的表现相当不错，但我在条款和条件单选按钮上遇到了问题。

我所拥有的基本上是2个单选按钮，一个是同意，第二个是不同意。 “不同意”按钮已预先选定。应该发生的事情基本上是在继续下一页之前检查条款和条件是否达成一致。

TERMS＆amp;条件

我已阅读并了解CQU Privacy and Security Statement并同意将我的个人信息用于相关活动。

<input type="radio" name="radio" id="yes">Yes, I agree.
<input type="radio" name="radio" id="no" checked="checked">No, I don`t agree.<br>

<form action="endPage.jsp">
    <input type="submit" value="Submit" name="submit" />
</form>

所以基本上我需要的是让用户同意条款和条件，否则给出一个弹出窗口，说明你必须同意条款和条件。

谢谢

tl; dr - 在提交表单之前，如何检查是否选中了某个复选框？

Answer 1

标准Javascript就像这样的东西 ......我想......

var submitBtn = document.getElementById("submit");
var termsChk = document.getElementById("yes");
var formFrm = document.getElementById("form");

submitBtn.addEventListener("click", function() {
    if (termsChk.checked === true) {
        alert("Checked!");
        formFrm.submit();
    } else {
        alert("Not Checked!");
    }
    return false;
});

快速小提琴：http://jsfiddle.net/neuroflux/yrwMc/6/

使用jQuery：

$('#submitBtn').on('click', function() {
    if ($('#yes').attr('checked') === "checked") {
        alert("Checked!");
        $('#form').submit();
    } else {
        alert("Not Checked!");
    }
    return false;
});

小提琴：http://jsfiddle.net/neuroflux/yrwMc/8/

Answer 2

<script type="text/javascript">
function fnCheckRadio()
{   
     var radYes=document.getElementById("yes"); 
     if(radYes.checked)
     {              
        return true;
     }
     else
     {
        alert("Please agree Terms and condition");
        return false;
     }
   return false;
}

</script>

<form action="endPage.jsp">
    <input type="submit" value="Submit" name="submit" onclick="return fnCheckRadio();" />
</form>

Answer 3

原始帖子在我的网站Code With Bishal，view original post

上发表

function checkcwb() {
 if (document.getElementById('agree').checked == false) {
  swal ("Warning", "Please indicate that you accept the Terms and Conditions and Privacy Policy", "error");
  return false;
 } else {
  return true;
 }
}

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha512-iQQV+nXtBlmS3XiDrtmL+9/Z+ibux+YuowJjI4rcpO7NYgTzfTOiFNm09kWtfZzEB9fQ6TwOVc8lFVWooFuD/w==" crossorigin="anonymous" />
<form action="#" method="POST" onsubmit="return checkcwb()">
        <div class="form-check">
            <input type="checkbox" class="form-check-input" name="iagree" id="agree">
    <label class="form-check-label" for="agree">I accept the <a href="#">terms and conditions</a>
        and <a href="#">privacy policy</a></label>
        </div>
        <br>
        <div class="form-check">
            <input type="checkbox" class="form-check-input" name="disagree" id="disagree">
        <label class="form-check-label" for="disagree">I reject the <a href="#">terms and conditions</a>
            and <a href="#">privacy policy</a></label>  
            </div>
            <br>
        <input type="submit" class="btn btn-primary" value="Submit">
        </form>

条款和条件单选按钮

TERMS＆amp;条件

3 个答案: