Fatal编程技术网
  • javascript/
  • Javascript JQuery在谷歌新网站中的应用

Javascript JQuery在谷歌新网站中的应用

javascript jquery html checkbox

Javascript JQuery在谷歌新网站中的应用,javascript,jquery,html,checkbox,google-sites,Javascript,Jquery,Html,Checkbox,Google Sites,我对VBA之外的任何编码都是全新的，我确信它会显示出来！我被卡住了，我想我错过了一些明显的东西 我想做什么：这段代码将嵌入到新的Google站点页面中（是的，非常有限）。它显示了一堆复选框；用户选择一个或多个选项，然后单击按钮。单击按钮将打开几个新页面中的一个，具体取决于选中的框。所有这些都有效 我想将选中框的数量限制为每列2个。（后来我希望在后两列中将其限制为1/列，但现在我根本无法限制。）我无法做到这一点。我所尝试的不会干扰代码的其余部分，但它仍然允许无限制的检查 我在下面添加了一个虚拟脚本

我对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>


正文{字体系列：arial；背景色：白色；线条高度：1.15；}
/*处理“日程安排选项”按钮-它的外观，悬停在上面时的功能*/
#schedbutton{
背景色：#f8b019；
}
/*列：3等分*/
.栏目{
浮动：左；
宽度：33.33%；
.填充：10px；
}  
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*响应式布局-列将堆叠以形成窄屏幕*/
@媒体屏幕和屏幕（最大宽度：600px）{
.栏目{
宽度：100%；
}
}
安排中小企业电话支持
说明：这里有说明

支持组A
选择一两个主要主题

苹果

小行星

救护车

动物

过敏

支援小组B
选择一个主题

大脑

肌肉

蓝牙

支援小组C
选择一个主题

蛋糕

画布

铜



请参见计划选项
/*由于某种原因，我们仍然无法实现这一目标*/
/*测试以尝试并限制每个已检查组的CKBOX数量*/
$（'.column:checkbox'）.change（函数（）{
var$cs=$（this）.closest（'.column'）.find（':checkbox:checked'）；
如果（$cs.length>2）{
此项检查=错误；
}
});
函数myFunction（）{
/*注意：可能是由于iframe的限制，不能让警报框在新的谷歌网站上工作*/
/*不管怎样：如果有办法让它们工作，就用它作为后备，而不是单独的“不”页面*/
if（document.getElementById（“apple”）.checked==true）{
打开窗户http://www.washingtonpost.com');
}else if（document.getElementById（“小行星”）.checked==true）{
打开窗户http://www.theonion.com');
}
否则{
打开窗户http://www.google.com');
}
/*显然，为其他选项添加其他分支，可能是switch/case，而不是if/then*/
}
具有
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>
演示

$（'.column:checkbox'）.change（function（）{
var$cs=$（this）.closest（'.column'）.find（':checkbox:checked'）；
如果（$cs.length>2）{
此项检查=错误；
}
});

正文{
字体系列：arial；
背景色：白色；
线高：1.15；
}
#schedbutton{
背景色：#f8b019；
}
.栏目{
浮动：左；
宽度：33.33%；
.填充：10px；
}
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.栏目{
宽度：100%；
}
}



支持组A
选择一两个主要主题

苹果

小行星

救护车

动物

过敏

支援小组B
选择一个主题

大脑

肌肉

蓝牙

支援小组C
选择一个主题

蛋糕

画布

铜


非常有效，谢谢。我看到您还将
src=
属性行移到行/列结构之前的位置，我认为这很重要。有了它，再加上表单设置之后的实际jQuery脚本，这就很棒了。实际上，这就是Stackoverflow的stacksnippets如何注入您选择的库选项（在代码顶部）。你可以把它放在另一个脚本的正上方，也可以用同样的方法。但是实际的jQuery代码
$（）.change（）
必须在元素进入DOM后运行（或放入就绪事件），否则您会遇到以下情况：

$('.column :checkbox')