In my angular application, I am looping through a collection and displaying the records with input type="radio".
<tr ng-repeat="account in vm.pagedAccounts.items"
ng-class="{ 'highlight': (account.rowIsSelected) }"
<td>
<input
ng-model="account.rowIsSelected"
value="{{account}}"
name="selectedAccount"
ng-checked="account.rowIsSelected"
ng-change="vm.selectAccount(account)"
type="radio">
</td>
In my controller, I first set rowIsSelected property to false for all the accounts.
response.data.results.forEach(function(account) {
account.rowIsSelected = false;
});
So, I just make sure whenever account.rowIsSelected is set to something, make that checked.
This is working fine.
But, in the selectAccount function, if a different account is clicked, I want to remove the previous all highlights and highlight the current one.
vm.selectAccount = function (account) {
if (account.rowIsSelected) {
//First set all false
vm.pagedAccounts.items.forEach(function(account) {
account.rowIsSelected = false;
});
var selectedAccount = vm.pagedAccounts.items
.filter(function(x){
return x.id=== account.id;
});
//Then set only that accounts property to true
selectedAccount[0].rowIsSelected = true;
}
But if I click the same row twice, it is no longer checked. I want to keep it checked and highlighted.
How to do it?
Does whatever I am doing seem right?
Please help.
Try this.
vm.selectAccount = function (checkedItem) {
var selectedAccount;
vm.pagedAccounts.items.forEach(function(account) {
if(checkedItem.id == account.id){
selectedAccount = account;
account.rowIsSelected = true;
}else{
account.rowIsSelected = false;
}
});
//Then set only that accounts property to true
selectedAccount[0].rowIsSelected = true;
}
I think you should organize your radio buttons in a bit different way, like it recommends angularjs
Something like:
<tr ng-repeat="account in vm.pagedAccounts.items"
ng-class="{ 'highlight': vm.pagedAccounts.selected === account }">
<td>
<input
ng-model="vm.pagedAccounts.selected"
ng-value="account"
type="radio">
</td>
...
And radio buttons should be automatically selected, when ng-model values is equal to ng-value, so you don't need any specific logic or ng-checked, etc.
I have checkbox list and I want to clear all checked data after Clear button.
The data is fetch from json for checkboxes.
HTML:
<div ng-repeat="data in array" >
<label class="Form-label--tick">
<input type="checkbox" id="statusid" value="{{data.id}}" class="Form-label-checkbox" ng-click="print(data.id)">
<span class="Form-label-text" id="statusname" value="{{data.name}}"> {{data.name}}</span>
</label>
</div>
JavaScript:
$scope.clearFilters = function() {
document.getElementById('statusid').value="";
document.getElementById('statusname').value="";
};
clearFilters() is called when Clear Button is clicked.But I am not able clear the checked boxes.It remains checked even after the clear button.
This code is not angular. Don't try to modify any DOM elements directly, but use the $scope variables to change their value.
In angular the checkbox return true or false so to uncheck a checkbox just change it's value to false.
so your code should look like this:
$scope.clearFilters = function() {
$scope.data.id = false;
$scope.data.name = "";
};
I am using a plugin that only triggers on click of checkbox , I need All button checkbox to existing code.
I have made it so that on click of ALL CHECKBOX I manually TRIGGER click selecting all checkbox and firing the existing jquery code
The problem comes when user clicks on one of checkbox I want that option to be as selected option so if all checkbox are checked (including the All) and user clicks on 3rd checkbox it should automatically select 3rd checkbox trigger click on all others (making them unchecked) including all
but my own conflicts i.e. my trigger clicks doesn't lets this happen and code gets into loop between All checkbox checked clicks and single checkbox click
I have created JS Fiddle.
In short I need toggle from checkbox button as well if all are selected on click on one of the checkbox it should make that one selected and rest all unselected
Here is the jQuery code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
jQuery(window).ready(function() {
//check ALl checkbox onClick
jQuery('body').on('click', '.chktaxoall,.chkcmfall',function (e) {
if(this.checked){
var i = 0;
var sList;
jQuery(this).closest('.togglecheck').find('input:checkbox').each(function () {
var sThisVal = (this.checked ? "1" : "0");
i++;
if(sThisVal==0 && i>1){
jQuery(this).trigger('click','bot');
}
});
}
else{
jQuery(this).closest('.togglecheck').find('input:checkbox').prop('checked', this.checked);
}
});
//IF ALL IS SELECTED but if a user clicks on a particular checkbox uncheck all except the one user checked
jQuery('body').on('click', '.wrap_acf input:checkbox',function (e) {
//if all is checked and someone unchecks a checkbox make all uncheck
var thisParent=jQuery(this).parents('.uwpqsf_class').attr('id');
var AllTicked =jQuery("#"+thisParent+" .chkcmfall").prop('checked');
if(thisParent && AllTicked){
jQuery("#"+thisParent+" .chkcmfall").prop('checked',false)
//jQuery(this).trigger('click');
}
})
});
</script>
Here is the HTML structure
<div id="mycategory" class="filter_acc_class uwpqsf_class togglecheck">
<h2 class="LabelPlaceHolder">Category</h2>
<!-- Add controlall and data-boxid -->
<label class="searchLabel control controlAll checkbox" data-boxid="wrap_id_cats"><input type="checkbox" class="chkcmfall" value="" name="mycatname[]" data-boxid="wrap_id_cats"><span class="control-indicator"></span>All</label>
<div id="wrap_id_cats" class="wrap_acf togglecheck">
<label class="searchLabel control checkbox"><input type="checkbox" value="16" name="mycatname[]"><span class="control-indicator"></span>Bakery<span class="fltr_num">(12)</span></label><br>
<label class="searchLabel control checkbox"><input type="checkbox" value="18" name="mycatname[]"><span class="control-indicator"></span>Indulgences<span class="fltr_num">(12)</span></label><br>
<label class="searchLabel control checkbox"><input type="checkbox" value="17" name="mycatname[]"><span class="control-indicator"></span>Dairy<span class="fltr_num">(7)</span></label><br>
<label class="searchLabel control checkbox"><input type="checkbox" value="19" name="mycatname[]"><span class="control-indicator"></span>Meat<span class="fltr_num">(7)</span></label><br>
<label class="searchLabel control checkbox"><input type="checkbox" value="27" name="mycatname[]"><span class="control-indicator"></span>test4<span class="fltr_num">(7)</span></label><br>
<label class="searchLabel control checkbox"><input type="checkbox" value="24" name="mycatname[]"><span class="control-indicator"></span>test1<span class="fltr_num">(5)</span></label><br>
<label class="searchLabel control checkbox"><input type="checkbox" value="26" name="mycatname[]"><span class="control-indicator"></span>test3<span class="fltr_num">(5)</span></label><br>
<label class="searchLabel control checkbox"><input type="checkbox" value="25" name="mycatname[]"><span class="control-indicator"></span>test2<span class="fltr_num">(1)</span></label><br>
<label class="searchLabel control checkbox"><input type="checkbox" value="29" name="mycatname[]"><span class="control-indicator"></span>test6<span class="fltr_num">(1)</span></label><br>
<label class="searchLabel control checkbox"><input type="checkbox" value="30" name="mycatname[]"><span class="control-indicator"></span>test7<span class="fltr_num">(1)</span></label>
</div>
</div>
Not sure I completely understand what you're asking, but with this script you can check/uncheck with one checkbox which reacts to changes of other checkboxes as well.
JavaScript:
$("input[type=checkbox]:not(.chkcmfall)").on("change", function () {
if ($(".chkcmfall").is(":checked")) {
$("input[type=checkbox]:not(this)").prop("checked", false);
$(this).prop("checked", true);
}
$(".chkcmfall").prop("checked", $("input[type=checkbox]:not(.chkcmfall):checked").length == $("input[type=checkbox]:not(.chkcmfall)").length);
});
$(".chkcmfall").on("change", function () {
$("input[type=checkbox]").prop("checked", $(this).is(":checked"));
});
What does it do?
It applies an eventhandler to all checkboxes except the one with class chkcmfall. Whenever one of these checkboxes change from checked to unchecked or vice versa, it counts all checked checkboxes (except the one with class chkcmfall) and if it matches the total amount of checkboxes, it checks the chkcmfall-checkbox as well. Otherwise it unchecks it.
When the chkcmfall-checkbox is checked, all other checkboxes are also checked.
EDIT: When the chkcmfall-checkbox is checked and then another checkbox is checked, only this latter one will be checked and the rest will be unchecked.
EDIT 2: Check all box now acts as a check/uncheck all box.
FIDDLE
EDIT 3: Added a new solution not to be using the prop attribute, but by using the click event of checkboxes as per request of the OP. I've made a difference between a click from a user and a click triggered by code by passing in an extra parameter in the trigger-function. This will prevent the infinite loops the OP was talking about, since we can now prevent the execution of triggering click events based on the source of the click.
JavaScript:
jQuery(window).ready(function () {
//check ALl checkbox onClick
jQuery('body').on('click', '.chktaxoall,.chkcmfall', function (e, source) {
var all = $(this).is(":checked");
if (source != "code") {
$("input[type=checkbox]:not(this)").each(function () {
if ($(this).is(":checked") != all)
$(this).trigger("click", "code");
});
}
});
jQuery('body').on('click', '.wrap_acf input:checkbox', function (e, source) {
var allChecked = $(".chkcmfall").is(":checked");
if (source != "code" && allChecked) {
$(".wrap_acf input:checkbox:not(this)").trigger("click", "code");
$(".chkcmfall").trigger("click", "code");
} else if (source != "code") {
if ($(".wrap_acf input:checkbox:checked").length == $(".wrap_acf input:checkbox").length)
$(".chkcmfall").trigger("click", "code");
}
})
});
NEW FIDDLE
Edit 4: Updated the answer to reflect the wishes of OP to be able to have multiple sets of checkboxes.
For this approach to work you have to be able to set data--attributes to both the checkboxes and the (un)select-all-checkbox. In the following example, the script only applies the checking/unchecking of checkboxes based on a data-attribute called set.
$(document).ready(function () {
//check ALl checkbox onClick
$("body").on("click", ".chktaxoall,.chkcmfall", function (e, source) {
var all = $(this).is(":checked");
var set = $(this).data("set");
if (source != "code") {
$("input[type=checkbox][data-set='" + set + "']:not(this)").each(function () {
if ($(this).is(":checked") != all)
$(this).trigger("click", "code");
});
}
});
$("body").on("click", ".wrap_acf input:checkbox", function (e, source) {
var set = $(this).data("set");
var allChecked = $(".chkcmfall[data-set='" + set + "']").is(":checked");
if (source != "code" && allChecked) {
$(".wrap_acf input[type=checkbox][data-set='" + set + "']:not(this)").trigger("click", "code");
$(".chkcmfall[data-set='" + set + "']").trigger("click", "code");
}
else if (source != "code")
{
if ($(".wrap_acf input[type=checkbox][data-set='" + set + "']:checked").length == $(".wrap_acf input[type=checkbox][data-set='" + set + "']").length)
$(".chkcmfall[data-set='" + set + "']").trigger("click", "code");
}
})
});
FIDDLE 3
supposing you have a table with un checkbox (A) (with class: checkall) as part of a header. then all elements in this column are CHECKBOXES (B) (with class: checkitem ) then you want to change the state of all checkboxes (B) (the checked will be unchecked and vice-versa):
$(".checkall").click(function() {
var value = $(this).is(':checked');
$('.checkitem:checkbox').each(function(){this.checked = !this.checked;})
});
I'm not sure I follow, but here's a simple script to uncheck all checkboxes after a checkbox has been checked:
EDIT: realized you're looking to check/uncheck with one specific checkbox.
$('.chkcmfall').click(function(){
var chall = this;
$('input:checkbox').attr('checked',$(chall).attr('checked');
});
EDIT 2: accounting for your comment:
$('input:checkbox').click(function(){
var clicked_box = this
// see if all checkboxes are checked
if($('input:checked').length == $('input:checkbox').length){
$('input:checkbox').attr('checked','false');
$(clicked_box).attr('checked'),'true');
}
});
<label for="Merital Status">Marital Status:</label>
<input type="radio" title="Marital Status" name="Marital_Status" id="Marital Status" value="Single"/>Single
<input type="radio" title="Marital Status" name="Marital_Status" value="Married"/>Married
<input type="radio" title="Marital Status" name="Marital_Status" value="Divorced"/>Divorced
And I want to write a JavaScript function that checks whether a radi button named "Merital_Status" is selected. I represent the function that I wrote for this purpose. The function gets as an argument the element id and returnes boolen:
function radio_button_checker(elemId)
{
var radios = document.getElementsByTagName(elemId);
var value = false;
for (var i = 0; i < radios.length; i++)
{
if (radios[i].checked)
{
value = true;
break;
}
}
return value;
}
And I invoke this function like this:
if (radio_button_checker('Marital_Status') == false)
{
alert('Please fill in your Merital Status!');
return false;
}
But it does not work. Please tell me how to modify my function in order to check if radiobutton is checked.
What you are doing is looking for an element with the tag name "Merital_Status". Replace document.getElementsByTagName with document.getElementsByName and it should work.
You are mixing ID's and NAME's.
Your radio button "set" needs to all have the same name (which you have), and if you need to refer to them individually by id, then you'll need to add an id to the last two (currently not set... and not required if you apply the labels to each individual option). You will want the label tags for each radio button as it improves the usability by allowing the user to click on the word not just the small radio button.
Marital Status:
<label><input type="radio" name="Marital_Status" value="Single"/>Single</label>
<label><input type="radio" name="Marital_Status" value="Married"/>Married</label>
<label><input type="radio" name="Marital_Status" value="Divorced"/>Divorced</label>
However when you test... you want to see that at least 1 radio in the set is checked. You can do this with:
function radioButtonChecker(fieldNAME){
var radioSet = document.forms[0].elements[fieldName];
for(var i=0;i<radioSet.length;i++){
if(radioSet[i].checked){
return true;
}
}
return false;
}
There are a few presumptions made here.
You always have more than 1 radio button in the set
Your form is the 1st (index 0) form... if not you'll need to adjust the radioSet lookup
How can I check if a checkbox in a checkbox array is checked using the id of the checkbox array?
I am using the following code, but it always returns the count of checked checkboxes regardless of id.
function isCheckedById(id) {
alert(id);
var checked = $("input[#id=" + id + "]:checked").length;
alert(checked);
if (checked == 0) {
return false;
} else {
return true;
}
}
$('#' + id).is(":checked")
That gets if the checkbox is checked.
For an array of checkboxes with the same name you can get the list of checked ones by:
var $boxes = $('input[name=thename]:checked');
Then to loop through them and see what's checked you can do:
$boxes.each(function(){
// Do stuff here with this
});
To find how many are checked you can do:
$boxes.length;
IDs must be unique in your document, meaning that you shouldn't do this:
<input type="checkbox" name="chk[]" id="chk[]" value="Apples" />
<input type="checkbox" name="chk[]" id="chk[]" value="Bananas" />
Instead, drop the ID, and then select them by name, or by a containing element:
<fieldset id="checkArray">
<input type="checkbox" name="chk[]" value="Apples" />
<input type="checkbox" name="chk[]" value="Bananas" />
</fieldset>
And now the jQuery:
var atLeastOneIsChecked = $('#checkArray:checkbox:checked').length > 0;
//there should be no space between identifier and selector
// or, without the container:
var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;
$('#checkbox').is(':checked');
The above code returns true if the checkbox is checked or false if not.
All following methods are useful:
$('#checkbox').is(":checked")
$('#checkbox').prop('checked')
$('#checkbox')[0].checked
$('#checkbox').get(0).checked
It is recommended that DOMelement or inline "this.checked" should be avoided instead jQuery on method should be used event listener.
jQuery code to check whether the checkbox is checked or not:
if($('input[name="checkBoxName"]').is(':checked'))
{
// checked
}else
{
// unchecked
}
Alternatively:
if($('input[name="checkBoxName"]:checked'))
{
// checked
}else{
// unchecked
}
The most important concept to remember about the checked attribute is
that it does not correspond to the checked property. The attribute
actually corresponds to the defaultChecked property and should be used
only to set the initial value of the checkbox. The checked attribute
value does not change with the state of the checkbox, while the
checked property does. Therefore, the cross-browser-compatible way to
determine if a checkbox is checked is to use the property
All below methods are possible
elem.checked
$(elem).prop("checked")
$(elem).is(":checked")
This is also an idea I use frequently:
var active = $('#modal-check-visible').prop("checked") ? 1 : 0 ;
If cheked, it'll return 1; otherwise it'll return 0.
You can use this code,
if($("#checkboxId").is(':checked')){
// Code in the case checkbox is checked.
} else {
// Code in the case checkbox is NOT checked.
}
As per the jQuery documentation there are following ways to check if a checkbox is checked or not. Lets consider a checkbox for example (Check Working jsfiddle with all examples)
<input type="checkbox" name="mycheckbox" id="mycheckbox" />
<br><br>
<input type="button" id="test-with-checked" value="Test with checked" />
<input type="button" id="test-with-is" value="Test with is" />
<input type="button" id="test-with-prop" value="Test with prop" />
Example 1 - With checked
$("#test-with-checked").on("click", function(){
if(mycheckbox.checked) {
alert("Checkbox is checked.");
} else {
alert("Checkbox is unchecked.");
}
});
Example 2 - With jQuery is, NOTE - :checked
var check;
$("#test-with-is").on("click", function(){
check = $("#mycheckbox").is(":checked");
if(check) {
alert("Checkbox is checked.");
} else {
alert("Checkbox is unchecked.");
}
});
Example 3 - With jQuery prop
var check;
$("#test-with-prop").on("click", function(){
check = $("#mycheckbox").prop("checked");
if(check) {
alert("Checkbox is checked.");
} else {
alert("Checkbox is unchecked.");
}
});
Check Working jsfiddle
I know the OP want jquery but in my case pure JS was the answer so if anyone like me is here and do not have jquery or do not want to use it - here is the JS answer:
document.getElementById("myCheck").checked
It returns true if the input with ID myCheck is checked and false if it is not checked.
Simple as that.
You can try this:
<script>
function checkAllCheckBox(value)
{
if($('#select_all_').is(':checked')){
$(".check_").attr ( "checked" ,"checked" );
}
else
{
$(".check_").removeAttr('checked');
}
}
</script>
<input type="checkbox" name="chkbox" id="select_all_" value="1" />
<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
You can use any of the following recommended codes by jquery.
if ( elem.checked ) {};
if ( $( elem ).prop( "checked" ) ) {};
if ( $( elem ).is( ":checked" ) ) {};
You can do it simply like;
Working Fiddle
HTML
<input id="checkbox" type="checkbox" />
jQuery
$(document).ready(function () {
var ckbox = $('#checkbox');
$('input').on('click',function () {
if (ckbox.is(':checked')) {
alert('You have Checked it');
} else {
alert('You Un-Checked it');
}
});
});
or even simpler;
$("#checkbox").attr("checked") ? alert("Checked") : alert("Unchecked");
If the checkbox is checked it will return true otherwise undefined
$(document).on('click','#checkBoxId',function(){
var isChecked = $(this).is(':checked');
console.log(isChecked);
});
This code above works also on bootstrap modal. isChecked is true or flase ;
Simple Demo for checking and setting a check box.
jsfiddle!
$('.attr-value-name').click(function() {
if($(this).parent().find('input[type="checkbox"]').is(':checked'))
{
$(this).parent().find('input[type="checkbox"]').prop('checked', false);
}
else
{
$(this).parent().find('input[type="checkbox"]').prop('checked', true);
}
});
Just to say in my example the situation was a dialog box that then verified the check box before closing dialog. None of above and How to check whether a checkbox is checked in jQuery? and jQuery if checkbox is checked did not appear to work either.
In the end
<input class="cb" id="rd" type="checkbox">
<input class="cb" id="fd" type="checkbox">
var fd=$('.cb#fd').is(':checked');
var rd= $('.cb#rd').is(':checked');
This worked so calling the class then the ID. rather than just the ID. It may be due to the nested DOM elements on this page causing the issue. The workaround was above.
For checkbox with an id
<input id="id_input_checkbox13" type="checkbox"></input>
you can simply do
$("#id_input_checkbox13").prop('checked')
you will get true or false as return value for above syntax. You can use it in if clause as normal boolean expression.
Actually, according to jsperf.com, The DOM operations are fastest, then $().prop() followed by $().is()!!
Here are the syntaxes :
var checkbox = $('#'+id);
/* OR var checkbox = $("input[name=checkbox1]"); whichever is best */
/* The DOM way - The fastest */
if(checkbox[0].checked == true)
alert('Checkbox is checked!!');
/* Using jQuery .prop() - The second fastest */
if(checkbox.prop('checked') == true)
alert('Checkbox is checked!!');
/* Using jQuery .is() - The slowest in the lot */
if(checkbox.is(':checked') == true)
alert('Checkbox is checked!!');
I personally prefer .prop(). Unlike .is(), It can also be used to set the value.
Something like this can help
togglecheckBoxs = function( objCheckBox ) {
var boolAllChecked = true;
if( false == objCheckBox.checked ) {
$('#checkAll').prop( 'checked',false );
} else {
$( 'input[id^="someIds_"]' ).each( function( chkboxIndex, chkbox ) {
if( false == chkbox.checked ) {
$('#checkAll').prop( 'checked',false );
boolAllChecked = false;
}
});
if( true == boolAllChecked ) {
$('#checkAll').prop( 'checked',true );
}
}
}
Try this...
$(function(){
$('body').on('click','.checkbox',function(e){
if($(this).is(':checked')){
console.log('Checked')
} else {
console.log('Unchecked')
}
})
})
Toggle checkbox checked
$("#checkall").click(function(){
$("input:checkbox").prop( 'checked',$(this).is(":checked") );
})
Using this code you can check at least one checkbox is selected or not in different checkbox groups or from multiple checkboxes.
Using this you can not require to remove IDs or dynamic IDs. This code work with the same IDs.
Reference Link
<label class="control-label col-sm-4">Check Box 2</label>
<input type="checkbox" name="checkbox2" id="checkbox21" value=ck1 /> ck1<br />
<input type="checkbox" name="checkbox2" id="checkbox22" value=ck2 /> ck2<br />
<label class="control-label col-sm-4">Check Box 3</label>
<input type="checkbox" name="checkbox3" id="checkbox31" value=ck3 /> ck3<br />
<input type="checkbox" name="checkbox3" id="checkbox32" value=ck4 /> ck4<br />
<script>
function checkFormData() {
if (!$('input[name=checkbox2]:checked').length > 0) {
document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null";
return false;
}
if (!$('input[name=checkbox3]:checked').length > 0) {
document.getElementById("errMessage").innerHTML = "Check Box 3 can not be null";
return false;
}
alert("Success");
return true;
}
</script>
Since it's mid 2019 and jQuery sometimes takes a backseat to things like VueJS, React etc. Here's a pure vanilla Javascript onload listener option:
<script>
// Replace 'admincheckbox' both variable and ID with whatever suits.
window.onload = function() {
const admincheckbox = document.getElementById("admincheckbox");
admincheckbox.addEventListener('click', function() {
if(admincheckbox.checked){
alert('Checked');
} else {
alert('Unchecked');
}
});
}
</script>
Your question is not clear: you want to give "checkbox array id" at input and get true/false at output - in this way you will not know which checkbox was checked (as your function name suggest). So below there is my proposition of body of your isCheckedById which on input take checkbox id and on output return true/false (it's very simple but your ID should not be keyword),
this[id].checked
function isCheckedById(id) {
return this[id].checked;
}
// TEST
function check() {
console.clear()
console.log('1',isCheckedById("myCheckbox1"));
console.log('2',isCheckedById("myCheckbox2"));
console.log('3',isCheckedById("myCheckbox3"));
}
<label><input id="myCheckbox1" type="checkbox">check 1</label>
<label><input id="myCheckbox2" type="checkbox">check 2</label>
<label><input id="myCheckbox3" type="checkbox">check 3</label>
<!-- label around inputs makes text clickable -->
<br>
<button onclick="check()">show checked</button>
You can try either any of the ways preferred, as in jQuery or JavaScript.
Get the value as below and assign to the variable then you if-else statements as per your requirement.
var getVal=$('#checkbox_id').is(":checked"); // jQuery
var getVal=document.getElementById("checkbox_id").checked //JavaScript
if (getVal==true) {
// perform task
} else {
// perform task
}
use code below
<script>
$(document).ready(function () {
$("[id$='chkSendMail']").attr("onchange", "ShowMailSection()");
}
function ShowMailSection() {
if ($("[id$='chkSendMail'][type='checkbox']:checked").length >0){
$("[id$='SecEmail']").removeClass("Hide");
}
</script>