Question

我正在尝试创建一个进入下一个流程阶段的条件。

在点击“下一步”按钮之前，用户需要选择“放弃”或“继续”。

如果选择了其中一个，则点击下一个按钮进入下一页。如果没有，则会发出警告“您是否已检查放弃或继续？

这就是我在查看其他代码时所做的事情，但它对我不起作用。没有任何jQuery可以工作，甚至没有警报= S任何人都可以帮助我吗？

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Page</title>
<link href="remote_style.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$('#next').on('click', function() {
    if ($('#abandon' || '#complete').attr('checked') === "checked") {
        window.open('remote-user-testing5.html');
    } else {
        alert("Have you checked Abandon or Complete?");
    }
    return false;
});
</script>
</head>

<body>

<div>
    <h1>Instruction window</h1>
        <div class="text">
            <p>Now you will be asked to carry out 3 tasks and provide feedback on your experience.</p>
            <p>To complete each task, you will need to navigate through a website.</p>
            <p>Task complete: When you feel you have completed a task tick 'Complete' and click 'Next' in this Instruction Window.</p>
            <p>Abandon task: If you are finding it difficult to complete a task, tick 'Abandon' and click 'Next' this Instruction Window.</p>
            <p>Please remember we are not testing you, we are evaluating and testing the website.</p>
            <p>When you are ready click 'Next' to find out your task scenario.</p>
            <input type="radio" name="radio" value="abandon" id="abandon">Abandon<br>
            <input type="radio" name="radio" value="complete" id="complete">Complete<br>
            <button id="next">Next</button>
        </div>
</div>

</body>
</html>

Answer 1

您的脚本需要在DOM准备就绪时运行，并且您的选择器无效，您必须使用单独的并使用.is(":checked")

$(document).ready(function(){
   $('#next').on('click', function() {
       if ($('#abandon').is(":checked") || $('#complete').is(':checked') ) {
           window.open('remote-user-testing5.html');
       } else {
           alert("Have you checked Abandon or Complete?");
       }
       return false;
   });
});

您需要.ready函数，就好像DOM没有完全就绪，它无法看到元素以便选择它们。

.is检查所选元素是否具有传递的参数，在这种情况下:checked测试checked属性

Answer 2

尝试：

$(document).ready(function(){
     $('#next').on('click', function() {
          if($('#abandon').is(':checked') || $('#complete').is(':checked')) {
              window.open('remote-user-testing5.html');
           } else {
              alert("Have you checked Abandon or Complete?");
           }
           return false;
     });
});

Answer 3

而不是if ($('#abandon' || '#complete').attr('checked') === "checked")

试

if ($('#abandon').attr('checked') === "checked" || $('#complete').attr('checked') === 'checked')

Answer 4

尝试

$('#next').on('click', function() {
    if ($('#abandon, #complete').is(':checked')) {
        window.open('remote-user-testing5.html');
    } else {
        alert("Have you checked Abandon or Complete?");
    }
    return false;
});

单击jQuery如果/其他不起作用

4 个答案: