Question

对于eaxmple，如果未选中复选框并且用户点击提交，我们需要显示错误消息＆＃34;请选中复选框＆＃34;。如果选中该复选框并且用户未点击超链接，我们需要显示错误消息＆＃34;请单击链接＆＃34;。我的代码

             <script>
             var state = 0;
             $("#AcceptMe").click(function()
              {
              state=1;
             });
             if(state == 0)
              {
              alert("please click");
              }
              </script>
              </head>
               <body>
               <form>
               <a id="Link1" href="#">click</a>
               <input type="checkbox" id="AcceptMe">
               <input type="submit" name="submit">
               </form>

Answer 1

这不是一个好的解决方案，因为当用户点击两次时，他/她取消选中复选框，但是＆＃34;状态＆＃34;仍然是1。

检查是否选中了复选框：

var isChecked = $('#AcceptMe').is(':checked')?true:false;

现在＆＃34; isChecked＆＃34;变量将包含true或false，因此您应首先向提交按钮提供ID并键入=＆＃34; button＆＃34; （否则会尝试提交）：

<input type="button" value="submit" name="submit" id="submitForm"/>

为链接添加clickHandler，如下所示：

var linkClicked = false;
$('#Link1').click(function(){
    linkClicked = true;
});

然后在该函数下，您的javascript将clickhandler添加到submitbutton：

$('#submitForm').click(function(){
    var isChecked = $('#AcceptMe').attr('checked')?true:false;
    if(isChecked){
        alert('checked!');
        if(linkClicked){
            alert('Link clicked!');
        }
        else{
            alert('Click link first!');
        }
    else{
        alert('please check the checkbox!');
    }
});

JSFiddle：http://jsfiddle.net/8o4an9xf/

请注意，您应该添加target =＆＃34; _blank＆＃34;，因为该链接将覆盖document.location。或者您可以打开要在模态窗口中显示的内容（更好）。

Answer 2

我认为你必须使用“return false”

我的代码清晰简单。如果您对内嵌代码无关紧要，请尝试以下内容：

    <body>
    <form>
        <a id="Link1" href="#" onclick="$('#Link1').addClass('visited');
            alert('add \'visited\' class to \'#Link1\'');">
        </a>
        <input type="checkbox" id="AcceptMe" />
        <input type="submit" name="submit" onclick="
            if(  $('#AcceptMe').is(':checked')){                    
                alert('checkbox is :'  + $('#AcceptMe').is(':checked'));
                if(!$('#Link1').hasClass('visited')){
                    alert('please visit link1');
                    return false;
                };   
            }else{
            return false;
            }
        " />
    </form>
</body>

在提交之前验证超链接和复选框

2 个答案: