I'm painfully new to any coding beyond VBA, and I'm sure it shows! I'm stuck, and I think I'm missing something obvious.
What I'm trying to do: This code will be embedded in a New Google Sites page (yeah, very limiting). It shows a bunch of checkboxes; users choose one or more options, then click a button. Clicking the button opens one of several new pages, depending on which box/boxes are checked. All of that works.
I want to limit the number of boxes checked to 2 per column. (Later I hope to limit it to 1/column for the second two columns, but right now I can't limit it at all.) I can't make that work. What I'm trying doesn't interfere with the rest of the code, but it still allows unlimited checking.
I'm including a dummy script below; the real script has other options for the choices and the URL results, plus more styling detail, but otherwise matches this.
What I've tried: the JQuery bit of the code is yoinked from someone online, but I follow the logic. I've tried running the code with that portion included in different parts of the whole; I'm not sure where it should go, but nothing has worked.
I'm wondering if something is wrong with (1) my syntax, or (2) how I'm calling/structuring the JQuery part of the code within the rest. I'm doing this in Chrome, FWIW.
Thank you--I really appreciate any help!
Simplified example code:
<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>
A <script> that has a src= attribute will not run code that is between the tags, so you have to separate them out to two different scripts:
Example
<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>
So that is one reason your jQuery code was not working.
The other is you are using the wrong selector: .column:checkbox selects checkboxes that have a class of column, eg <input type="checkbox" class="column">.
You want to select checkboxes within a element with class column and for that you want to put a space between column and :checkbox. The separation indicates ones a parent element while the other is a some child element:
$('.column :checkbox')
Demo
$('.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>