Trying to set the radio inputs attribute to checked on select change.
Select HTML
<select onChange="jsFunction()" name="templateId" id="selectOpt" required="required">
<option value=""></option>
<option onclick="jsFunction()" value="slides_1">subject1</option>
<option onclick="jsFunction()" value="slides_2">subject2</option>
<option onclick="jsFunction()" value="slides_2">subject2</option>
</select>
jQuery
<script>
function jsFunction(){
var myselect = document.getElementById("selectOpt");
var mySlide = myselect.options[myselect.selectedIndex].value;
document.getElementById.mySlide.prop('checked', 'checked');
}
</script>
Radio HTML
<input type="radio" name="slides" check="checked" id="slides_1"/>
<input type="radio" name="slides" id="slides_2"/>
<input type="radio" name="slides" id="slides_3"/>
Thanks -Hector
For JS, see the function below.
For the HTML part, remove the onclick="jsFunction()" field on the options, and changed the last option to "slides_3".
See the working code at:
JSFiddle
JS:
function jsFunction() {
var selectedID = $('select#selectOpt').val();
$('input[type=radio]').filter('#'+selectedID).prop('checked', true);
}
HTML(updated):
<select onChange="jsFunction()" name="templateId" id="selectOpt" required="required">
<option value=""></option>
<option value="slides_1">subject1</option>
<option value="slides_2">subject2</option>
<option value="slides_3">subject3</option>
</select>
<div>
<input type="radio" name="slides" checked="checked" id="slides_1"/>
<input type="radio" name="slides" id="slides_2"/>
<input type="radio" name="slides" id="slides_3"/>
</div>
Import jquery:
<script type="text/javascript" src="you_jquery_file"></script>
You can download here: http://jquery.com/download/
Then change:
document.getElementById.mySlide.prop('checked', 'checked');
to:
$("#"+mySlide).prop('checked', 'checked');
For this particular problem, you don't need jQuery. Something like this will do:
function checkRadio(name, id) {
var rGroup = document.getElementsByName(name);
var theRadio = document.getElementById(id);
// uncheck the checked ones
for (var i=0;i<rGroup.length;i++) {
rGroup[i].checked = false;
}
// check the appropriate button
theRadio.checked = true;
}
// bind custom event to your select list
var mylist = document.getElementById('some_select_list');
mylist.addEventListener('change', function() {
var selected = this.options[this.selectedIndex].value;
checkRadio('radio_group_name', selected);
}, false);
Related
I can't seem to figure out how to sum the values of various field types in a form. I have some select fields like this:
<select name="age">
<option value="">- Select -</option>
<option value="1" class="">30-34</option>
<option value="2">35-39</option>
</select>
And some radio buttons:
<p>Do you smoke?</p>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="2"> Yes</label><br>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="0"> No</label>
But how would I add the selections all up? I can find solutions for adding values of just inputs, or just radios, or just selects. But not all together.
I'd use jQuery if I have to.
[EDIT] I should have said, I'd like to output the total value to the user, perhaps inside a element.
Could clean this up a bit, but an example of using the FormData interface to add up all values in a form: https://developer.mozilla.org/en-US/docs/Web/API/FormData
function getValues() {
let myForm = document.getElementById('myForm');
let formData = new FormData(myForm);
let total = 0;
for (var value of formData.values()) {
total += parseInt(value);
}
document.getElementById("total").innerHTML = total;
console.log(total);
}
<form id="myForm" name="myForm">
<div>
<label for="age">What is your age?</label>
<select name="age">
<option value="">- Select -</option>
<option value="1" class="">30-34</option>
<option value="2">35-39</option>
</select>
</div>
<div>
<label for="riskSmoke">Do you smoke?</label>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="2"> Yes</label>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="0"> No</label>
</div>
</form>
<button onclick="getValues()">Get Values</button>
<p>Total:</p>
<div id="total"></div>
You can use constructor FormData.
An HTML <form> element — when specified, the FormData object will be populated with the form's current keys/values using the name property of each element for the keys and their submitted value for the values. It will also encode file input content.
You could add a key/value pair to this using FormData.append:
formData.append('username', 'Chris');
I assume that you mean adding the values of the selected elements and that you use some trigger in this case I use a button. To make it work select options that have values
Please try this option
const button = document.querySelector("button");
button.addEventListener("click", () => {
const age = document.querySelector("select");
const riskSmoke = document.querySelector('input[name="riskSmoke"]:checked');
if (age && age.value && riskSmoke) {
const ageValue = +age.value;
const riskSmokeValue = +riskSmoke.value;
console.log(ageValue + riskSmokeValue);
}
});
<select name="age">
<option value="">- Select -</option>
<option value="1" class="">30-34</option>
<option value="2">35-39</option>
</select>
<p>Do you smoke?</p>
<label><input type="radio" name="riskSmoke" value="2" /> Yes</label><br />
<label><input type="radio" name="riskSmoke" value="0" /> No</label>
<button>Click</button>
Without jQuery and for selecting specific values:
function getValues() {
var ageValue = Number(document.querySelector("select[name=age]").value);
console.log('age value: ' + ageValue);
var smokeValue = Number(document.querySelector('input[name="riskSmoke"]:checked').value);
console.log('smoke value: ' + smokeValue);
console.log('age + smoke: ' + (ageValue + smokeValue));
}
<select name="age">
<option value="">- Select -</option>
<option value="1" class="">30-34</option>
<option value="2">35-39</option>
</select>
<p>Do you smoke?</p>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="2"> Yes</label><br>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="0"> No</label>
<p>
<button onclick="getValues()">Get Values</button>
jQuery seems to be a bit of a overkill. In order to get the sum of the options and inputs, you may first get the value of the option in the select tag, and then add to the value of the selected radio input as such:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Title Here</title>
</head>
<body>
<select name="age" id="someId">
<option value="">- Select -</option>
<option value="1" class="">30-34</option>
<option value="2">35-39</option>
</select>
<p>Do you smoke?</p>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="2"> Yes</label><br>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="0"> No</label><br>
<button onclick="CalculateValue()">Calculate</button>
<script>
let ageRangePicker = null, riskSmokeOptions = null;
function CalculateValue(){
ageRangePicker = document.getElementById("someId");
if(ageRangePicker.value !== ""){
let sum = Number(ageRangePicker.value);
riskSmokeOptions = document.getElementsByName("riskSmoke")
for(i = 0; i < riskSmokeOptions.length; i++) {
if(riskSmokeOptions[i].checked)
sum += Number(riskSmokeOptions[i].value);
}
alert("Your risk is: " + sum);
}
else{
alert("Select an age range");
}
}
</script>
</body>
</html>
I wrap in a form with an ID and sum on all input, making sure only to count checked radios and checkboxes
const sumValues = () => {
let val = 0;
$("#myForm :input").each(function() {
if (this.type === "radio" || this.type === "checkbox")
val += this.checked ? +this.value : 0;
else val += +this.value; // cast to number
})
$("#total").text(val)
};
$(function() {
$("#myForm").on("change", sumValues).change(); //when page loads
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<select name="age">
<option value="">- Select -</option>
<option value="1" class="" selected>30-34</option>
<option value="2">35-39</option>
</select>
<p>Do you smoke?</p>
<label for="riskSmoke"><input type="radio" checked name="riskSmoke" value="2"> Yes</label><br>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="0"> No</label>
<br/>Total: <span id="total" />
</form>
Plain JS
const sumValues = () => {
let val = 0;
[...document.getElementById("myForm").querySelectorAll("input, select, textarea")].forEach(function(elem) {
if (elem.type === "radio" || elem.type === "checkbox")
val += elem.checked ? +elem.value : 0;
else val += +elem.value; // cast to number
})
document.getElementById("total").textContent = val;
};
window.addEventListener("load", function() {
document.querySelector("#myForm").addEventListener("change", sumValues)
sumValues()
})
<form id="myForm">
<select name="age">
<option value="">- Select -</option>
<option value="1" class="" selected>30-34</option>
<option value="2">35-39</option>
</select>
<p>Do you smoke?</p>
<label for="riskSmoke"><input type="radio" checked name="riskSmoke" value="2"> Yes</label><br>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="0"> No</label>
<br/>Total: <span id="total" />
</form>
With jQuery, you can listen for the change event and use both the jQuery .serializeArray() and the array .reduce() method to get the total:
$('form').on('change', function() {
let totalScore = $(this).serializeArray().reduce((a, f) => a += +f.value, 0);
//output to a predefined element
$('#output').text( totalScore );
})
.change();
Here is how you may define an output element:
<div class="output">
<label>Total Score: </label>
<span id="output"></span>
</div>
Note that this will give a running total and there's no need to click any button or to trigger any event other then the actions needed to make choices on the various form elements.
$('form').on('change', function() {
let totalScore = $(this).serializeArray().reduce((a, f) => a += +f.value, 0);
//console.log( totalScore );
$('#output').text( totalScore );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
<select name="age">
<option value="">- Select -</option>
<option value="1" class="">30-34</option>
<option value="2">35-39</option>
</select>
<p>Do you smoke?</p>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="2"> Yes</label><br>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="0"> No</label>
</form>
<div class="output">
<label>Total Score: </label>
<span id="output"></span>
</div>
Put a button below at the bottom of your HTML and make a function something like this:
const radioControls = document.querySelectorAll('.radio-btn');
const selectControl = document.querySelectorAll('.select');
let dataTransferObject = {
radioValue: 0,
selectValue: 0
};
let sum = 0;
function collectValues() {
for(let control of radioControls) {
if (control.checked) {
dto.radioValue = control.value
}
}
dto.selectValue = selectControl[0].value;
for(let attr of Object.values(dto)) {
sum += parseInt(attr);
}
}
Then your button simply calls this function, I would imagine this would all be contained in a form of some sort:
<button onclick="collectValues()">Submit</button>
Now the variable sum holds the accumulated value.
I have almost no knowledge of JavaScript or jQuery.
I need to select/unselect an option in a <select> where multiple options can be selected when a checkbox or button is clicked.
The checkbox needs to select/unselect the option with the same value.
My idea was something like this:
$(document).ready(function() {
var input = $('#entry-select');
var checkboxes = $('.entrycheckbox');
checkboxes.click(function() {
var element = $(this);
var value = element.val();
input.val(value);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="entrycheckbox" value="1">
<input type="checkbox" class="entrycheckbox" value="2">
<input type="checkbox" class="entrycheckbox" value="3">
<form action="">
<select name="entries" id="entry-select" multiple>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
</form>
This only selects the option with the value of the last clicked checkbox, not which ones are checked, and it unselects every other option.
You only give val() the value of the checkbox which was selected last. To make this work as you require you need to build an array of all selected checkboxes and provide that to val() instead.
To achieve this you can use filter() to get the selected checkboxes, then map() to build the array:
input.val(checkboxes.filter(':checked').map((i, el) => el.value));
$(document).ready(function() {
var $input = $('#entry-select');
var $checkboxes = $('.entrycheckbox');
$checkboxes.click(function() {
$input.val($checkboxes.filter(':checked').map((i, el) => el.value));
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="entrycheckbox" value="1">
<input type="checkbox" class="entrycheckbox" value="2">
<input type="checkbox" class="entrycheckbox" value="3">
<form action="">
<select name="entries" id="entry-select" multiple>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
</form>
You may also want to consider adding readonly to the select if you don't want the user to change the selected option directly.
<script type="text/javascript">
$(document).ready(function(){
$('.entrycheckbox').click(function(){
$(":entrycheckbox").each(function(){
if($(this).val()==1){
$(this).attr("checked","checked");
}
});
});
});
</script>
I'm trying to reset the value of closest select option.
$(document).ready(function () {
$('.limitation_points').hide();
$('.field .limitSelected').each(function () {
$(this).change(function () {
var selected = $(this).val();
if (selected == '1') {
$(this).closest('.field').find('.limitation_points').fadeIn(200);
} else {
$(this).closest('.field').find('.limitation_points').fadeOut(200);
$(this).closest('.field').find('input[name="pillers[]"]').val("");
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
<input id="limitation1" type="radio" class="limitSelected" name="limitation" value="1" />Yes
<input id="limitation2" type="radio" class="limitSelected" name="limitation" value="0" />No
<select id="pijlers" class="pillers" name="pillers[]">
<option class="placeholder" selected disabled>Make Choice</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
Till fadeIn fadeOut my code is working how it should. But This code does't reset the value of select options when value has "0".
Can anyone help me with this, what i am doing wrong here?
Thanks in advance.
Using "-1" as default value and also using select instead of input as your selector, should do the trick.
$(document).ready(function () {
$('.limitation_points').hide();
$('.field .limitSelected').each(function () {
$(this).change(function () {
var selected = $(this).val();
if (selected == '1') {
$(this).closest('.field').find('.limitation_points').fadeIn(200);
} else {
$(this).closest('.field').find('.limitation_points').fadeOut(200);
$(this).closest('.field').find('select[name="pillers[]"]').val("-1");
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
<input id="limitation1" type="radio" class="limitSelected" name="limitation" value="1" />Yes
<input id="limitation2" type="radio" class="limitSelected" name="limitation" value="0" />No
<select id="pijlers" class="pillers" name="pillers[]">
<option class="placeholder" value="-1" selected disabled>Make Choice</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
Add value attribute to the default <option> and remove disabled.
When you use the empty string reset there is no matching option for it
<option value="" class="placeholder" >Make Choice</option>
I have 2 radio box inputs that I want to check when I select an option from a select dropdown menu.
I have a select box as like this:
<div id="checkout-shipping-method-load">
<select id="shipping-method">
<option value="option1">1 twister ($14.99 + $6.99 S&H)</option>
<option value="option2">1 twister ($14.99 + $6.99 S&H)</option>
</select>
</div>
And radio boxes like:
<input type="radio" class="radio" checked="checked" id="s_method_flatrate2_flatrate2" value="flatrate2_flatrate2" name="shipping_method">
<input type="radio" class="radio" id="s_method_flatrate_flatrate" value="flatrate_flatrate" name="shipping_method">
How can I make the selected option equal the selected radio button?
For example, if the first option is selected, then the first radio box is checked, or vice-versa.
It is very simple on using jquery,
$('#shipping-method').on('change', function(){
var criteria = $(this).val(); // will give you selected option value
if(criteria === 'Your Value') // your condition here
{
$('#s_method_flatrate2_flatrate2').attr('checked',true); // checking the radio button
}
});
You can similarly add conditionals to choose your radio buttons
Simple solution based on positions of related elements:
$('#shipping-method').change(function(){
var optionSelected = $("option:selected", this);
$(".radio:eq("+ optionSelected.index() +")").prop("checked", true);
});
Try:
https://jsfiddle.net/nwk5fez9/
Remove checked="checked" from radio button and try.
<div id="checkout-shipping-method-load">
<select id="shipping-method">
<option value="option1">1 twister ($14.99 + $6.99 S&H)</option>
<option value="option2">1 twister ($14.99 + $6.99 S&H)</option>
</select>
</div>
<input type="radio" class="radio" id="s_method_flatrate2_flatrate2" value="flatrate2_flatrate2" name="shipping_method">
<input type="radio" class="radio" id="s_method_flatrate_flatrate" value="flatrate_flatrate" name="shipping_method">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$('#shipping-method').change(function(){
var option= $('#shipping-method').val();
if(option == 'option1') {
$('#s_method_flatrate2_flatrate2').attr('checked',true);
}
if(option == 'option2') {
$('#s_method_flatrate_flatrate').attr('checked',true);
}
});
</script>
I really like San Krish's solution, but for the sake of completeness, here's my answer (in plain JS):
I'm simply going to check for the change event on the select box, then set the corresponding index of the radio buttons.
var select = document.getElementById("shipping-method"),
rbs = document.getElementsByName("shipping_method");
select.addEventListener("change", function () {
rbs[select.selectedIndex].checked = true;
});
<div id="checkout-shipping-method-load">
<select id="shipping-method">
<option value="option1">1 twister ($14.99 + $6.99 S&H)</option>
<option value="option2">1 twister ($14.99 + $6.99 S&H)</option>
</select>
</div>
<input type="radio" class="radio" checked="checked" id="s_method_flatrate2_flatrate2" value="flatrate2_flatrate2" name="shipping_method">
<input type="radio" class="radio" id="s_method_flatrate_flatrate" value="flatrate_flatrate" name="shipping_method">
Please note, that if you use this, the indices of the options and radio buttons must correspond; it would be wise to add other checks in the event listener.
You can set the checked property of the radio button using Jquery, like so:
JQUERY:
$('#shipping-method').change(function() {
if ($(this).val() === "option1") {
$('#flatrate').prop('checked', true);
} else if ($(this).val() === "option2") {
$('#flatrate2').prop('checked', true);
} else {
$('#flatrate2').prop('checked', false);
$('#flatrate').prop('checked', false);
}
});
NOTES:
Since JQuery 1.6, you should be using prop() and not attr().
I've also added a default "SELECT" option to your drop down (see
below), with logic to unset both radio buttons if that default is
selected. This is not required, but I added it in case it's useful for you.
HTML:
<div id="checkout-shipping-method-load">
<select id="shipping-method">
<option value="">SELECT</option>
<option value="option1">1 twister ($14.99 + $6.99 S&H)</option>
<option value="option2">1 twister ($14.99 + $6.99 S&H)</option>
</select>
</div>
<input type="radio" class="radio" id="flatrate2" value="flatrate2_flatrate2" name="shipping_method">Flat 2
<input type="radio" class="radio" id="flatrate" value="flatrate_flatrate" name="shipping_method">Flat 1
JSFiddle Demo here.
First thing, I searched SO and there are many questions with same title but none of them has the answer and I tried all of these answers with many different versions of my own but nothing works.
So, I have a form with many checkboxes and I want to uncheck all checkboxes when user change the user from userSelection list. like this
<form id="myForm">
<select id="userSelection" onchange="userChange()">
<option value="0" acl="">Select User</option>
<option value="1" acl="2,5">ABC</option>
<option value="2" acl="3,4">DEF</option>
</select>
<label><input type="checkbox" ac="2" name="chkAc"><p>Income / Expense</p></label>
<label><input type="checkbox" ac="3" name="chkAc"><p>Donations</p></label>
<label><input type="checkbox" ac="4" name="chkAc"><p>Annual Fees</p></label>
<label><input type="checkbox" ac="5" name="chkAc"><p>Members Password</p></label>
</form>
<script type="text/javascript">
function checkUncheckFields(isAllCheck)
{
var cbarray = document.getElementsByName('chkAc');
for(var i = 0; i < cbarray.length; i++)
{
isAllCheck == false? cbarray[i].checked=false : cbarray[i].checked = true;
}
}
function userChange()
{
checkUncheckFields(false);
var access = $("#userSelection option:selected").attr('acl').split(',');
$('input[type=checkbox]').each(function()
{
if(access.indexOf($(this).attr('ac')) > -1)
{
$(this).attr('checked',true);
}
});
}
</script>
Now when I go to my page, manually check all of these checkboxes and then change my user from userSelection list, it does not uncheck checkboxes and if does uncheck all checkboxes then It doesnot check checkboxes meeting condition in user change. I am using JQuery 1.11.0
I have made JSBin here Please check it http://jsbin.com/famehaguni/1/watch plese first check all checkboxes and then change user. Then you can see in our userChange() function we have given the condition to check checkboxes with user's acl attibute values but it doesnot check them means when you select ABC user then it should check 2 and 5 Checkboxes and if you choose DEF user then it should check 3 and 4 checkboxes
Here is your answer:
The HTML
<form id="myForm">
<select id="userSelection" >
<option value="0" acl="">Select User</option>
<option value="1" acl="2,5">ABC</option>
<option value="2" acl="3,4">DEF</option>
</select>
<label><input type="checkbox" ac="2" name="chkAc"><p>Income / Expense</p></label>
<label><input type="checkbox" ac="3" name="chkAc"><p>Donations</p></label>
<label><input type="checkbox" ac="4" name="chkAc"><p>Annual Fees</p></label>
<label><input type="checkbox" ac="5" name="chkAc"><p>Members Password</p></label>
</form>
The Javascript
function checkUncheckFields(isAllCheck)
{
if(isAllCheck)
$("input[name='chkAc']").attr("checked", "checked");
else
$("input[name='chkAc']").removeAttr("checked");
}
$(document).ready(function(){
$("#userSelection").change(function(){
checkUncheckFields(false);
})
})
See the Fiddle
Instead of removeAttribute, try:
Edit: based on your comment, try this:
function userChange()
{
checkUncheckFields(false);
var acc = $("#userSelection option:selected").attr('acl');
var access = acc.split(",");
for(var i=0; i < access.length; i++)
{
$('input[type=checkbox]').each(function()
{
if(access[i] == $(this).attr('ac'))
$(this).attr('checked',true);
});
}
}
It works.
try using this:
// to set unchcked all check boxes with name=chkAc;
function checkUncheckFields()
{
$("[name=chkAc]").each(function(){
$( this ).attr('checked', false);
});
}
function userChange()
{
var access = $("#userSelection option:selected").attr('acl').split(',');
checkUncheckFields();
$("[name=chkAc]").each(function(){
if($.inArray($(this).attr('ac'),access) >= 0)// your way of checking will also work.
{
$(this).prop('checked', true);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" >
<select id="userSelection" onchange="userChange()">
<option value="0" acl="">Select User</option>
<option value="1" acl="2,5">ABC</option>
<option value="2" acl="3,4">DEF</option>
</select>
<br/>
<label><input type="checkbox" ac="2" name="chkAc"><p>Income / Expense</p></label>
<label><input type="checkbox" ac="3" name="chkAc"><p>Donations</p></label>
<label><input type="checkbox" ac="4" name="chkAc"><p>Annual Fees</p></label>
<label><input type="checkbox" ac="5" name="chkAc"><p>Members Password</p></label>
</form>
You can see my DEMO CODE
You should change function checkUncheckFields:
<form id="myForm" >
<select id="userSelection" onchange="userChange()">
<option value="0" acl="">Select User</option>
<option value="1" acl="2,5">ABC</option>
<option value="2" acl="3,4">DEF</option>
</select>
<br/>
<label><input type="checkbox" ac="2" name="chkAc"><p>Income / Expense</p></label>
<label><input type="checkbox" ac="3" name="chkAc"><p>Donations</p></label>
<label><input type="checkbox" ac="4" name="chkAc"><p>Annual Fees</p></label>
<label><input type="checkbox" ac="5" name="chkAc"><p>Members Password</p></label>
</form>
<script type="text/javascript">
function checkUncheckFields(isAllCheck)
{
var cbarray = document.getElementsByName('chkAc');
for(var i = 0; i < cbarray.length; i++)
{
if (!isAllCheck) {cbarray[i].checked = false; } else cbarray[i].checked = true;
}
}
function userChange()
{
checkUncheckFields(false);
var access = $("#userSelection option:selected").attr('acl').split(',');
$('#myForm input[type=checkbox]').each(function()
{
if(access.indexOf($(this).attr('ac')) > -1)
{
$(this).attr('checked',true);
}
});
}
</script>