我对VBA以外的任何编码都非常陌生，我敢肯定它能显示出来！我被卡住了，我想我缺少明显的东西。
我想做的事情：此代码将嵌入到“新的Google网站”页面中（是的，非常有限）。它显示了一堆复选框；用户选择一个或多个选项，然后单击一个按钮。单击按钮将打开几个新页面之一，具体取决于选中的是一个或多个复选框。所有这些都有效。
我希望将选中的框数限制为每列2个。 （稍后我希望将其限制为后两列的1 /列，但现在我完全不能将其限制。）我无法做到这一点。我正在尝试的操作不会干扰其余的代码，但仍然允许无限制的检查。
我在下面包括一个虚拟脚本；实际的脚本还提供其他选项供您选择，并提供URL结果，以及更多的样式详细信息，但其他方面均与此匹配。
我尝试过的事情：代码的JQuery位是在线上有人听到的，但是我遵循逻辑。我尝试过将代码的一部分包含在整体的不同部分中来运行代码；我不确定应该去哪里，但没有任何效果。
[我想知道（1）我的语法是否有问题，或者（2）我如何在其余代码中调用/构造代码的JQuery部分。我正在Chrome浏览器FWIW中执行此操作。
谢谢-非常感谢您的帮助！
简化示例代码：
<head>
<meta name="scheduler" content="width=device-width, initial-scale=1">
<style>
body {font-family:arial; background-color:white; line-height: 1.15;}
/*Handles schedule options button - how it looks, what it does when hovered over*/
#schedbutton{
background-color:#f8b019;
}
/*Columns: 3 equal*/
.column{
float: left;
width: 33.33%;
.padding: 10px;
}
.row:after{
content: "";
display: table;
clear: both;
}
/*Responsive layout - columns will stack for narrow screens*/
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<h1>Schedule SME Phone Support</h1>
<p><b>Directions:</b> Directions will go here.</p>
<!--divides the rest into columns-->
<div class="row">
<div class="column" style="background-color:white;">
<h2>Support Group A</h2>
<p>Choose one or two main topics.</p>
<form action="/action_page.php" method="get">
<input type="checkbox" id="apple"> Apple<br>
<input type="checkbox" id="asteroid"> Asteroid<br>
<input type="checkbox" id="ambulance"> Ambulance<br>
<input type="checkbox" id="animal"> Animal<br>
<input type="checkbox" id="allergy"> Allergy<br>
</form>
</div>
<div class="column" style="background-color:white"> <!--2nd column-->
<h2>Support Group B</h2>
<p>Choose one main topic.</p>
<form action="/action_page.php" method="get">
<input type="checkbox" id="brains">Brains<br>
<input type="checkbox" id="brawn">Brawn<br>
<input type="checkbox" id="bluetooth">Bluetooth<br>
</form>
</div>
<div class="column" style="background-color:white;"><!--3rd column-->
<h2>Support Group C</h2>
<p>Choose one main topic.</p>
<form action="/action_page.php" method="get">
<input type="checkbox" id="cake">Cake<br>
<input type="checkbox" id="canvas">Canvas<br>
<input type="checkbox" id="copper">Copper<br>
</form>
</div>
<!--Button to click, which triggers script based on form selections-->
<br>
<button id=schedbutton onclick="myFunction()">See Scheduling Options</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
/*for some reason, still cannot make this work*/
/*testing to try and limit number of ckboxes per group checked*/
$('.column:checkbox').change(function () {
var $cs = $(this).closest('.column').find(':checkbox:checked');
if ($cs.length > 2) {
this.checked = false;
}
});
</script>
<!--Script to make the button actually do what we want-->
<script type="text/javascript">
function myFunction(){
/*NB: can't make alert boxes work in New Google Sites, possibly due to iframe limitations?*/
/*Anyhow: if there IS a way to make them work, use that as the fallback instead of a separate "nope" page.*/
if (document.getElementById("apple").checked == true) {
window.open('http://www.washingtonpost.com');
} else if (document.getElementById("asteroid").checked == true) {
window.open('http://www.theonion.com');
}
else {
window.open('http://www.google.com');
}
/*obviously, add in other branches for other options, probably as switch/case not a bunch of if/then*/
}
</script>
具有<script>属性的src=将不会运行标签之间的代码，因此您必须将它们分成两个不同的脚本：
示例
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.column:checkbox').change(function () {
/* rest of your code */
});
</script>
所以这是您的jQuery代码无法正常工作的原因之一。
另一个是您使用了错误的选择器：.column:checkbox选择具有column类的复选框，例如<input type="checkbox" class="column">。
您想在元素中选择类别为column的复选框，为此，您需要在column和:checkbox之间放置一个空格。分隔表示一个父母，另一个是一个孩子：
$('.column :checkbox')
演示
$('.column :checkbox').change(function() {
var $cs = $(this).closest('.column').find(':checkbox:checked');
if ($cs.length > 2) {
this.checked = false;
}
});body {
font-family: arial;
background-color: white;
line-height: 1.15;
}
#schedbutton {
background-color: #f8b019;
}
.column {
float: left;
width: 33.33%;
.padding: 10px;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="column" style="background-color:white;">
<h2>Support Group A</h2>
<p>Choose one or two main topics.</p>
<form action="/action_page.php" method="get">
<input type="checkbox" id="apple"> Apple<br>
<input type="checkbox" id="asteroid"> Asteroid<br>
<input type="checkbox" id="ambulance"> Ambulance<br>
<input type="checkbox" id="animal"> Animal<br>
<input type="checkbox" id="allergy"> Allergy<br>
</form>
</div>
<div class="column" style="background-color:white">
<!--2nd column-->
<h2>Support Group B</h2>
<p>Choose one main topic.</p>
<form action="/action_page.php" method="get">
<input type="checkbox" id="brains">Brains<br>
<input type="checkbox" id="brawn">Brawn<br>
<input type="checkbox" id="bluetooth">Bluetooth<br>
</form>
</div>
<div class="column" style="background-color:white;">
<!--3rd column-->
<h2>Support Group C</h2>
<p>Choose one main topic.</p>
<form action="/action_page.php" method="get">
<input type="checkbox" id="cake">Cake<br>
<input type="checkbox" id="canvas">Canvas<br>
<input type="checkbox" id="copper">Copper<br>
</form>
</div>