using ng-model with multiple ng-repeated radio button groups - javascript

See JsBin
I have a dynamic list of checkpoints which is generated from ng-repeat, each item has six radio buttons. I need to bind each of these sets to a $scope object.
Below, you can see I've set the name to things like selectedOption1, selectedOption2, etc... This allows each ng-repeated list to be independent of the next. Now, I need to bind the selected option of those selectedOptionX groups to a $scope object, while still maintaining the checkpoint.Name in the object.
<table>
<tbody>
<tr ng-repeat="checkpoint in checkpoints">
<td>{{checkpoint.Name}}</td>
<td><input type="radio" name="selectedOption{{$index}}" value="pass" /></td>
<td><input type="radio" name="selectedOption{{$index}}" value="fail" /></td>
<td><input type="radio" name="selectedOption{{$index}}" value="remediated" /></td>
<td><input type="radio" name="selectedOption{{$index}}" value="nc" ng-checked="true" /></td>
<td><input type="radio" name="selectedOption{{$index}}" value="na" /></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
The output object might be something like:
[
{
Name: "the first checkpoint",
Value: "remediated"
},
{
Name: "the second checkpoint",
Value: "fail"
},
{
Name: "the third checkpoint",
Value: "pass"
},
];
What I've tried...
<td><input type="radio" name="selectedOption{{$index}}" value="pass" ng-model="selectedOption{{$index}}"/></td>
//and
<td><input type="radio" name="selectedOption{{$index}}" value="pass" ng-model="selectedOption[$index]"/></td>
//and
<td><input type="radio" name="selectedOption{{$index}}" value="pass" ng-model="selectedOption.$index"/></td>
//and
<td><input type="radio" name="selectedOption{{$index}}" value="pass" ng-model="checkpoint.Name"/></td>
I've tried some other things, too, but nothing has come close.

http://jsbin.com/haxor/1/edit
<table>
<tbody>
<tr ng-repeat="checkpoint in checkpoints">
<td>{{checkpoint.Name}}</td>
<td><input type="radio" ng-model="checkpoint.selectedOption" value="pass" name="selectedOption{{$index}}"></td>
<td><input type="radio" ng-model="checkpoint.selectedOption" value="fail" name="selectedOption{{$index}}"></td>
<td><input type="radio" ng-model="checkpoint.selectedOption" value="remediated" name="selectedOption{{$index}}"></td>
<td><input type="radio" ng-model="checkpoint.selectedOption" value="nc" name="selectedOption{{$index}}" ng-checked="true"></td>
<td><input type="radio" ng-model="checkpoint.selectedOption" value="nc" ng-checked="true" name="selectedOption{{$index}}"></td>
<td><input type="radio" ng-model="checkpoint.selectedOption" value="x" name="selectedOption{{$index}}"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Try this, it will setup selected value inside checkpoints object
http://jsbin.com/barufuhi/3/edit
<div ng-controller="CheckpointsController">
<table>
<tbody>
<tr ng-repeat="checkpoint in checkpoints">
<td>{{checkpoint.Name}}</td>
<td><input type="radio" ng-model="checkpoint.value" value="one"></td>
<td><input type="radio" ng-model="checkpoint.value" value="two"></td>
<td><input type="radio" ng-model="checkpoint.value" value="three"></td>
<td><input type="radio" ng-model="checkpoint.value" value="four"></td>
<td><input type="radio" ng-model="checkpoint.value" value="five"></td>
<td><input type="radio" ng-model="checkpoint.value" value="six"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>

Related

How to have an onClick event fire for certain radio button children of a <tr>

I have a table row inside of a table. Inside this table row I have 4 buttons. I want to use jquery to fire an onClick for any button in the row except for the 1st one. Is there an easy way to select the <tr> itself instead of recreating an onClick for every button?
<table class="table table-striped stickeyHeaders">
<tr id="buttonRow">
<td><input type="radio" name="SelectedStoreRoles" class="store-privs" value="1"/>
<td><input type="radio" name="SelectedStoreRoles" class="store-privs" value="2"/>
<td><input type="radio" name="SelectedStoreRoles" class="store-privs" value="3"/>
<td><input type="radio" name="SelectedStoreRoles" class="store-privs" value="4"/>
</tr>
</table>
Here is my general though process but need some help to flesh it out all the way
$('#buttonRow').children("Some Filter that says value > 1").On('Click, function({}));
You can use the :gt selector to avoid the first element:
$('#buttonRow').find(":radio:gt(0)").on('click', e => {
console.log(e.target.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table class="table table-striped stickeyHeaders">
<tr id="buttonRow">
<td><input type="radio" name="SelectedStoreRoles" class="store-privs" value="1" /></td>
<td><input type="radio" name="SelectedStoreRoles" class="store-privs" value="2" /></td>
<td><input type="radio" name="SelectedStoreRoles" class="store-privs" value="3" /></td>
<td><input type="radio" name="SelectedStoreRoles" class="store-privs" value="4" /></td>
</tr>
</table>
You can use a combination of :not and :first-child pseudo-classes
$('#buttonRow')
.children('td:not(:first-child)')
.children('input')
.on('click', function() {
console.log(this)
})

Google Apps Script access values from dialog box

I followed this tutorial https://yagisanatode.com/2018/06/10/google-apps-script-getting-input-data-from-a-dialog-box-in-google-sheets/ to create a dialog box in Google Sheets and print the values. However, I'd like to feed these values into a new function. If I try to access them in line 29, the code somewhat breaks. I say 'somewhat' because it still runs until line 28, but I think it doesn't execute line 28 as I can't see anything in the log.
I also noticed that it doesn't close the dialog box automatically once I add my two new lines. I assume it has something to do with the function closeIt in testUI.html, but I can't figure out what it is as I'm new to jQuery/Javascript.
code.gs
//--GLOBALS--
var ui = SpreadsheetApp.getUi();
function onOpen(e) {
// Create menu options
ui.createAddonMenu()
.addSubMenu(ui.createMenu("Admin")
.addItem("Test", "test"))
.addToUi();
};
function test() {
//Call the HTML file and set the width and height
var html = HtmlService.createHtmlOutputFromFile("testUI")
.setWidth(450)
.setHeight(300);
//Display the dialog
var dialog = ui.showModalDialog(html, "Select the relevant module and unit");
};
function runsies(values) {
//Display the values submitted from the dialog box in the Logger.
Logger.log(values);
//I added the two lines below because I'd like to access the values, not just print them.
var valuesAcc = values[0]["orange"]
Logger.log(valuesAcc);
};
//I'd like to run another function after runsies so I can work with the values which were inputted
//into the dialogue box.
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
function form_data(){
var values = [{
"orange":$("input[name=orange]:checked").val(),
"blue":$("input[name=blue]:checked").val(),
"green":$("input[name=green]:checked").val(),
"purple":$("input[name=purple]:checked").val()
}];
google.script.run.withSuccessHandler(closeIt).runsies(values);
};
function closeIt(){
google.script.host.close()
};
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<table>
<col width="60">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<tr>
<th></th><th><strong>Unit:</strong></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th>
</tr>
<tr>
<th><strong>Module</strong></th>
<th><strong>n/a</strong></th>
<th><strong>1</strong></th>
<th><strong>2</strong></th>
<th><strong>3</strong></th>
<th><strong>4</strong></th>
<th><strong>5</strong></th>
<th><strong>6</strong></th>
<th><strong>7</strong></th>
<th><strong>8</strong></th>
</tr>
<tr>
<td>Orange </td>
<td><input type="radio" name="orange" value="na" checked></td>
<td><input type="radio" name="orange" value="1"></td>
<td><input type="radio" name="orange" value="2"></td>
<td><input type="radio" name="orange" value="3"></td>
<td><input type="radio" name="orange" value="4"></td>
<td><input type="radio" name="orange" value="5"></td>
<td><input type="radio" name="orange" value="6"></td>
<td><input type="radio" name="orange" value="7"></td>
<td><input type="radio" name="orange" value="8"></td>
</tr>
<tr>
<td>Blue </td>
<td><input type="radio" name="blue" value="na" checked></td>
<td><input type="radio" name="blue" value="1"></td>
<td><input type="radio" name="blue" value="2"></td>
<td><input type="radio" name="blue" value="3"></td>
<td><input type="radio" name="blue" value="4"></td>
<td><input type="radio" name="blue" value="5"></td>
<td><input type="radio" name="blue" value="6"></td>
<td><input type="radio" name="blue" value="7"></td>
<td><input type="radio" name="blue" value="8"></td>
</tr>
<tr>
<td>Green </td>
<td><input type="radio" name="green" value="na" checked></td>
<td><input type="radio" name="green" value="1"></td>
<td><input type="radio" name="green" value="2"></td>
<td><input type="radio" name="green" value="3"></td>
<td><input type="radio" name="green" value="4"></td>
<td><input type="radio" name="green" value="5"></td>
<td><input type="radio" name="green" value="6"></td>
<td><input type="radio" name="green" value="7"></td>
<td><input type="radio" name="green" value="8"></td>
</tr>
<tr>
<td>Purple </td>
<td><input type="radio" name="purple" value="na" checked></td>
<td><input type="radio" name="purple" value="1"></td>
<td><input type="radio" name="purple" value="2"></td>
<td><input type="radio" name="purple" value="3"></td>
<td><input type="radio" name="purple" value="4"></td>
<td><input type="radio" name="purple" value="5"></td>
<td><input type="radio" name="purple" value="6"></td>
<td><input type="radio" name="purple" value="7"></td>
<td><input type="radio" name="purple" value="8"></td>
</tr>
</table>
<input type="submit" value="Submit" class="action" onclick="form_data()" >
</div>
And I think I should use a later version of jQuery?
Accessing values from a Dialog is easily performed with google.script.run. Information can be found at Client To Server Communication.
Here's a couple of examples of dialog boxes that I've done:
Data Entry Dialog Created from Header Info on Spreadsheet
Simple Example

JS .checked not working in for ... in loop - in IE11

I have the following function which works great in chrome, but in IE 11 doesn't.
It is designed to:
Take a questionGroup value determining which group of questions we want an average score for
Get a collections of the inputs on the page
Loop through them
If they are 'checked' then get the class name which determines the group the question is in
Count the number of questions in the group we're looking for
Get the total score for all questions in the group
Divide the total score by the number of questions to get the average score for the group
function getGroupScore(questionGroup) {
var inputs = document.getElementsByTagName("input");
var countOfQs = 0;
var totalGroupScore = 0;
for (var element in inputs) {
if (inputs[element].checked) {
var theQuestionsGroup = inputs[element].className;
if (theQuestionsGroup == questionGroup) {
var answer = parseInt(inputs[element].value)
totalGroupScore += answer;
countOfQs++;
}
}
}
var groupScore = totalGroupScore / countOfQs;
return groupScore;
}
In debugging, the loop seems to never get passed the following stage:
if (inputs[element].checked)
Even though there are input fields that are checked
example of the form I'm looping through:
<form action="">
<table style="margin: 0 auto; border: none;" id="reschecklist">
<tbody>
<tr>
<td rowspan="3" valign="top" width="400"><h3>Questions</h3></td>
<td colspan="5" class="center"><h3>Score</h3></td>
</tr>
<tr>
<td colspan="2" class="left"><strong>(not at all)</strong></td>
<td colspan="3" align="right" class="right"><strong>(I am fully implementing this)</strong></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class="heading" width="400"><strong>Minimise overhead costs</strong></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="question"><p>Do you consider and identify ways to maintain machinery better and cheaper?</p></td>
<td><input type="radio" name="q1" value="1" class="grp1" /></td>
<td><input type="radio" name="q1" value="2" class="grp1" /></td>
<td><input type="radio" name="q1" value="3" class="grp1" /></td>
<td><input type="radio" name="q1" value="4" class="grp1" /></td>
<td><input type="radio" name="q1" value="5" class="grp1" /></td>
</tr>
<tr>
<td class="question"><p>Do you regularly review your overhead costs i.e. can you identify how much they cost you on a monthly, 6 monthly, annual basis?</p></td>
<td><input type="radio" name="q2" value="1" class="grp1" /></td>
<td><input type="radio" name="q2" value="2" class="grp1" /></td>
<td><input type="radio" name="q2" value="3" class="grp1" /></td>
<td><input type="radio" name="q2" value="4" class="grp1" /></td>
<td><input type="radio" name="q2" value="5" class="grp1" /></td>
</tr>
<tr>
<td class="heading" width="400"><strong>Set goals and budgets</strong></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="question"><p>Do you have a clearly set out vision and objectives for the business?</p></td>
<td><input type="radio" name="q3" value="1" class="grp2" /></td>
<td><input type="radio" name="q3" value="2" class="grp2" /></td>
<td><input type="radio" name="q3" value="3" class="grp2" /></td>
<td><input type="radio" name="q3" value="4" class="grp2" /></td>
<td><input type="radio" name="q3" value="5" class="grp2" /></td>
</tr>
<tr>
<td class="question"><p>Do you routinely (every 3-6 months), with your partner/s or your team, take a hands off view of the business and discuss objectives, performance etc?</p></td>
<td><input type="radio" name="q4" value="1" class="grp2" /></td>
<td><input type="radio" name="q4" value="2" class="grp2" /></td>
<td><input type="radio" name="q4" value="3" class="grp2" /></td>
<td><input type="radio" name="q4" value="4" class="grp2" /></td>
<td><input type="radio" name="q4" value="5" class="grp2" /></td>
</tr>
for-in is not how you loop through an HTMLCollection. Use a simple for or one of the "array like" approaches in this answer (which also explains why for-in isn't the right choice here). I suspect the problem is that there are no enumerable properties in the HTMLCollection on the platform where you're seeing the problem.
So for instance:
for (var element = 0 ; element < inputs.length; ++elements) {
In modern environments, HTMLCollection (what you get back from getElementsByTagName) may have the non-standard extension making it iterable (ES2015+) and giving it a forEach. If not, you can easily add it:
if (typeof NodeList !== "undefined" &&
NodeList.prototype &&
!NodeList.prototype.forEach) {
// Yes, direct assignment is fine here, no need for `Object.defineProperty`
NodeList.prototype.forEach = Array.prototype.forEach;
}
if (typeof HTMLCollection !== "undefined" &&
HTMLCollection.prototype &&
!HTMLCollection.prototype.forEach) {
// Yes, direct assignment is fine here, no need for `Object.defineProperty`
HTMLCollection.prototype.forEach = Array.prototype.forEach;
}
That code does both HTMLCollection and NodeList (what you get from querySelectorAll). Then you can use:
inputs.forEach(function(input) {
if (input.checked) {
// ...
}
});

jQuery: Loop print only one value

I have below code
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<table id="main_table">
<tr>
<td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="5.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="2.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="3.0000" type="text"></td>
</tr>
</table>
<script>
jQuery('table#main_table').each( function(){
if(jQuery(this).find("input:checkbox").is(':checked')){
var txt = jQuery(this).find("input[name='qty[]']").val();
alert(txt);
}
});
I need to check within table if checkbox is checked then print it's qty value. But below code only prints 1 value. Instead of all
What I'm missing?
Your loop is for tr not for table.
jQuery('table#main_table tr').each( function(){
if(jQuery(this).find("input:checkbox").is(':checked')){
var txt = jQuery(this).find("input[name='qty[]']").val();
console.log(txt);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main_table">
<tr>
<td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="5.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="2.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="3.0000" type="text"></td>
</tr>
</table>
You're using each on <table> which will iterate only once as there is only one table with that ID. Iterate over the <tr> elements in the table.
$('#main_table tr').each(function() {
...
jQuery('table#main_table tr').each(function() {
if (jQuery(this).find("input:checkbox").is(':checked')) {
var txt = jQuery(this).find("input[name='qty[]']").val();
console.log(txt);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main_table">
<tr>
<td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="5.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="2.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="3.0000" type="text"></td>
</tr>
</table>
There's better way to do this. Instead of iterating over tr and finding checked checkboxes, you can iterate over checked checkboxes and get the value of the associated textbox.
$(this) // Will refer to the checkbox
.closest('td') // Get parent <td>
.next() // Get next element i.e. next <td>
.find('[name="qty[]"]') // Find element with name attribute value as "qty[]"
.val() // Get it's value
$('#main_table tr :checkbox:checked').each(function() {
console.log($(this).closest('td').next().find('[name="qty[]"]').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main_table">
<tr>
<td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="5.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="2.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="3.0000" type="text"></td>
</tr>
</table>

How to validate that at least one checkbox is checked in each set of checkboxes

I have a large group of checkboxes that are separated by two tables. Out of the two sets of checkboxes, I want the user to be required to check at least one checkbox in both sets before submitting a form (so, based on my code, at least one checkbox under COST and one under BENEFIT). I hope this makes sense. My code is below:
<body>
<h2 align="center">Cost/Benefit Matrix</h2>
<script type="text/javascript" src="http://localhost/mytesting/jquery-2.1.4.js"></script>
<style type="text/css">
p
{
font-family: "Arial";
align: center;
}
h2
{
font-family: "Arial";
}
</style>
<p>
<table border="1" align="center">
<tbody>
<tr>
<th><b>COST</b></th>
<th colspan="3">Reduced Cost</th>
<th>Neutral</th>
<th colspan="3">Increased Cost</th>
<th>Don't Know</th>
</tr>
<tr>
<th></th>
<th>High</th>
<th>Medium</th>
<th>Low</th>
<th>No effect</th>
<th>Low</th>
<th>Medium</th>
<th>High</th>
<th></th>
</tr>
<tr>
<td>Capital cost</td>
<td><input type="checkbox" id="matrix1" value="1"></td>
<td><input type="checkbox" id="matrix2" value="1"></td>
<td><input type="checkbox" id="matrix3" value="1"></td>
<td><input type="checkbox" id="matrix4" value="1"></td>
<td><input type="checkbox" id="matrix5" value="1"></td>
<td><input type="checkbox" id="matrix6" value="1"></td>
<td><input type="checkbox" id="matrix7" value="1"></td>
<td><input type="checkbox" id="matrix8" value="1"></td>
</tr>
<tr>
<td>Clinical operating cost</td>
<td><input type="checkbox" id="matrix9" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix10" value="1"></td>
<td><input type="checkbox" id="matrix11" value="1"></td>
<td><input type="checkbox" id="matrix12" value="1"></td>
<td><input type="checkbox" id="matrix13" value="1"></td>
<td><input type="checkbox" id="matrix14" value="1"></td>
<td><input type="checkbox" id="matrix15" value="1"></td>
<td><input type="checkbox" id="matrix16" value="1"></td>
</tr>
<tr>
<td>Facility operating cost</td>
<td><input type="checkbox" id="matrix17" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix18" value="1"></td>
<td><input type="checkbox" id="matrix19" value="1"></td>
<td><input type="checkbox" id="matrix20" value="1"></td>
<td><input type="checkbox" id="matrix21" value="1"></td>
<td><input type="checkbox" id="matrix22" value="1"></td>
<td><input type="checkbox" id="matrix23" value="1"></td>
<td><input type="checkbox" id="matrix24" value="1"></td>
</tr>
<tr>
<td>Energy cost</td>
<td><input type="checkbox" id="matrix25" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix26" value="1"></td>
<td><input type="checkbox" id="matrix27" value="1"></td>
<td><input type="checkbox" id="matrix28" value="1"></td>
<td><input type="checkbox" id="matrix29" value="1"></td>
<td><input type="checkbox" id="matrix30" value="1"></td>
<td><input type="checkbox" id="matrix31" value="1"></td>
<td><input type="checkbox" id="matrix32" value="1"></td>
</tr>
<br>
<br>
<table border="1" align="center">
<tbody>
<tr>
<th><b>BENEFIT</b></th>
<th colspan="3">Negative Impact</th>
<th>Neutral</th>
<th colspan="3">Positive Impact</th>
<th>Don't Know</th>
</tr>
<tr>
<th></th>
<th>High</th>
<th>Medium</th>
<th>Low</th>
<th>No effect</th>
<th>Low</th>
<th>Medium</th>
<th>High</th>
<th></th>
</tr>
<tr>
<td>Patient/staff safety</td>
<td><input type="checkbox" id="matrix33" value="1"></td>
<td><input type="checkbox" id="matrix34" value="1"></td>
<td><input type="checkbox" id="matrix35" value="1"></td>
<td><input type="checkbox" id="matrix36" value="1"></td>
<td><input type="checkbox" id="matrix37" value="1"></td>
<td><input type="checkbox" id="matrix38" value="1"></td>
<td><input type="checkbox" id="matrix39" value="1"></td>
<td><input type="checkbox" id="matrix40" value="1"></td>
</tr>
<tr>
<td>Fire/life safety</td>
<td><input type="checkbox" id="matrix41" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix42" value="1"></td>
<td><input type="checkbox" id="matrix43" value="1"></td>
<td><input type="checkbox" id="matrix44" value="1"></td>
<td><input type="checkbox" id="matrix45" value="1"></td>
<td><input type="checkbox" id="matrix46" value="1"></td>
<td><input type="checkbox" id="matrix47" value="1"></td>
<td><input type="checkbox" id="matrix48" value="1"></td>
</tr>
<tr>
<td>Clinical quality of care</td>
<td><input type="checkbox" id="matrix49" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix50" value="1"></td>
<td><input type="checkbox" id="matrix51" value="1"></td>
<td><input type="checkbox" id="matrix52" value="1"></td>
<td><input type="checkbox" id="matrix53" value="1"></td>
<td><input type="checkbox" id="matrix54" value="1"></td>
<td><input type="checkbox" id="matrix55" value="1"></td>
<td><input type="checkbox" id="matrix56" value="1"></td>
</tr>
<tr>
<td>Patient/resident experience</td>
<td><input type="checkbox" id="matrix57" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix58" value="1"></td>
<td><input type="checkbox" id="matrix59" value="1"></td>
<td><input type="checkbox" id="matrix60" value="1"></td>
<td><input type="checkbox" id="matrix61" value="1"></td>
<td><input type="checkbox" id="matrix62" value="1"></td>
<td><input type="checkbox" id="matrix63" value="1"></td>
<td><input type="checkbox" id="matrix64" value="1"></td>
</tr>
<tr>
<td>Operational efficiency</td>
<td><input type="checkbox" id="matrix65" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix66" value="1"></td>
<td><input type="checkbox" id="matrix67" value="1"></td>
<td><input type="checkbox" id="matrix68" value="1"></td>
<td><input type="checkbox" id="matrix69" value="1"></td>
<td><input type="checkbox" id="matrix70" value="1"></td>
<td><input type="checkbox" id="matrix71" value="1"></td>
<td><input type="checkbox" id="matrix72" value="1"></td>
</tr>
<tr>
<td>Sustainability</td>
<td><input type="checkbox" id="matrix73" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix74" value="1"></td>
<td><input type="checkbox" id="matrix75" value="1"></td>
<td><input type="checkbox" id="matrix76" value="1"></td>
<td><input type="checkbox" id="matrix77" value="1"></td>
<td><input type="checkbox" id="matrix78" value="1"></td>
<td><input type="checkbox" id="matrix79" value="1"></td>
<td><input type="checkbox" id="matrix80" value="1"></td>
</tr>
<script type="text/javascript">
$('input[type="checkbox"]').on('change', function() {
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).closest('tr').find('input').not(this).prop('checked', false);
// uncheck checkboxes in the same column
$('div').find('input[type="checkbox"]:eq(' + $(this).index() + ')').not(this).prop('checked', false);
});
</script>
</tbody>
</tbody>
</p>
You could add a class (like .checkbox) to each of your checkboxes and then perform something like this before submit -
if ($(".checkbox:checked").length > 0) {
//perform submit
}
else{
alert("check at least one checkbox!");
}
You could also use ".is: for more readability.
if ( $( '.checkbox' ).is( ':checked' ) ) {
// atleast one checked
} else {
// none checked
}
Example: https://jsfiddle.net/rr3vfymy/
First of all, your HTML isn't well-formed. You should close one table element before starting a new one.
Then start by distinguishing your tables by id, or at least by class, for example:
<table id="cost-table" border="1" align="center">
and then check, if at least one is checked. If you are using jQuery, you can use something like:
$( document ).ready( function() {
// you should use id on form too, this will bug if you have more forms on your page
$( "form" ).submit( function( event ) {
if( $( "#cost-table input[type=checkbox]:checked" ).length === 0 ) {
event.preventDefault();
//alert user here
alert('You need to select at least one cost type');
}
});
});
and the same for other types.

Categories