Develop Reference

Express handlebars, can't bind checked attribute to checkbox

I am opening some divs when a user clicks on a certain checkbox like so:
$(document).ready(function () {
$('input[type="checkbox"]').click(function () {
var inputValue = $(this).attr("value");
if ($(this).prop("checked") == true) {
$("." + inputValue).show();
}
else if ($(this).prop("checked") == false) {
$("." + inputValue).hide();
}
});
});
Then, I store the classes of the checked boxes and if the user gave me bad input I redirect them to the submission page, I store the checked boxes like so:
allEvents={'coinChecked':true,'crinChecked':true,'ppChecked':false,'quizChecked':false}
Now I pass this allEvents object back to the submission page with res.render(check:allEvents)
Then, I use the following code (on SO) to bind the checked attribute to a checkbox, and hence open the initially hidden div with :
<input type="checkbox" name="events" value="coin" {{bindAttr checked="check.coinChecked"}}> Code-in
But neither does this make the checkbox "checked", nor does it display the hidden div.
How can I do this, or is there a workaround for this process?
thanks

<input type="checkbox" name="events" value="coin" checked={{if(check.coinchecked){{checked}}}}> Code-in
might do the trick

call javascript on changing dropdown value programatically

I have a dropdown having n number of items, on selection of a particular item I make a tr visible. This I've done through JavaScript. Whenever a user changes the dropdown value the JavaScript on change event for the dropdown is fired. Till here its fine.
Problem:
When I set the value of the dropdown from my c# code the JavaScript event isn't fired, due to which the tr is not being visible. How can I address this problem???
Help !!!
Edit 1:
> ddlInform_Invite_Rating.Attributes.Add("onchange", "GetInviteRating('"
> + ddlInform_Invite_Rating.ClientID + "','" + txtInform_Invite_Score.ClientID + "');");
I've done dis in page load. The javascript is called when user changes the value. but when i set the dropdown's value (on page load) the javascript isnt called. I tried using using registerclientscript but that doesnt work as well.

I solved the above problem by including the following line in my JQuery:
$(document).ready(function () {
$("#<%=ctrl1.ClientID %>").change(function () {
//debugger;
if ($(this).val() != 0 && $(this).val() != 99) {
$(this).parent().closest('td').next().css("display", "table-cell");
$(this).parent().closest('td').next().next().css("display", "table-cell");
}
else {
$(this).parent().closest('td').next().css("display", "none");
$(this).parent().closest('td').next().next().css("display", "none");
}
}
);
$("#<%=ctrl1.ClientID %>").trigger('change');
}
);
Thanks for all your help anyway.

You can call javascript function by using below code.
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "key", "yourfunctionhere();", true);

Radio button not changing when clicked inside a jQuery tab

So I am required to use a radio button in a jquery tab, next to the tab label. Everything works fine when a user clicks anywhere on the tab, except when the user clicks directly on the radio button itself. The tab changes, but the radio button doesn't.
Here is a fiddle.
If you click on text, the tab changes fine, and the radio changes as well, but you click directly on the radio button, the tab changes, but the radio doesn't.
I cannot seem to get it to work.
This is my latest attempt to get it to work
$("#tabs > ul > li > a > label > input").on('click',function(){
var actualRadio = $("[name=biosafetyLevel]:checked").attr('id');
$('input:radio[name=biosafetyLevel]').each(function () {
$(this).prop('checked', false)
});
$("#" + actualRadio).prop('checked', true);
});
This doesn't seem to do anything.

You problem is that when you click on input itself checked attribute applies faster than your javascript works. Only way i find out is to give complete function like this:
$("#tabs > ul > li > a").on('click',function() {
var curTab = $(this).attr('id');
var curRadio = $("input[type='radio']:checked");
curRadio.prop("checked", false);
$("#" + curTab + "> label > input").prop('checked', true);
},function(){
$(this).prop('checked', true);
});
function(){ $(this).prop('checked', true); }); in the end ensures that if someone clicked input itself, it will be cheked in the end, if someone will click "a" DOM element, this thing just wont work cause "a" has no checked property.
Here is fiddle:
http://jsfiddle.net/9dS8a/30/

1.$.each() passes 2 parameters, first is index, second is element.
$('input:radio[name=biosafetyLevel]').each(function (i, item) {
$(item).attr('checked', '')
});
$("#" + actualRadio).attr('checked', 'checked');
2.You do not need to iterate at all
$('input:radio[name=biosafetyLevel]').attr('checked', '');
$("#" + actualRadio).attr('checked', 'checked');
will do exactly the same.

How to implement a click event on mutually exclusive checkboxes in jQuery?

I have two checkboxes:
<input id="outside" type="checkbox" value="1" data-gid="41820122" />
<input id="inside" type="checkbox" value="1" data-gid="41820122" />
I've made them mutually exclusive with:
$(function(){
//mutually exclusive checkboxes
$("input[data-gid]").click(function(){
var gid = $(this).attr('data-gid');
var fid = $(this).attr('id');
var checkboxes = $("input[data-gid=" + gid + "][id!=" + fid + "]");
checkboxes.attr("checked", false);
});
});
This works fine. But I also want to add additional click functionality to the 'inside' checkbox. I want it to enable/disable a textarea on the same form, so I've done this:
$('#application_inside').click(function() {
if ($(this).is(':checked')) {
return $('textarea').removeAttr('disabled');
} else {
return $('textarea').attr('disabled', 'disabled');
}
});
So, if the 'inside' checkbox is checked, the textarea will be enabled, if it's not checked, the textarea should be disabled.
The problem is that if the 'inside' checkbox is checked, and the user then checks the 'outside' checkbox, the 'inside' becomes unchecked (as it should be), but the textarea remains enabled. This appears to be because the 'inside' checkbox was never actually clicked by the user.
I've tried working around this with the following:
$(function(){
//mutually exclusive checkboxes
$("input[data-gid]").click(function(){
var gid = $(this).attr('data-gid');
var fid = $(this).attr('id');
var checkboxes = $("input[data-gid=" + gid + "][id!=" + fid + "]");
checkboxes.attr("checked", false);
checkboxes.triggerHandler("click"); //new code to fire any click code associated with unchecked boxes
});
});
But this just throws the browser in a loop, since the two different click events end up calling each other.
How can I keep my mutually exclusive code while still allowing the enable/disable code for the 'inside' checkbox to work?

You can create a custom event that you trigger when you click on #application_inside. Also you will fire this custom event when you uncheck other boxes because of the exclusiveness.
Here is an example: http://jsfiddle.net/gs78t/2/

you may try something like this
var insideChanged = function() {
if ($('#inside').is(':checked')) {
return $('textarea').removeAttr('disabled');
} else {
return $('textarea').attr('disabled', 'disabled');
}
};
$('#application_inside').click(insideChanged);
$(function(){
//mutually exclusive checkboxes
$("input[data-gid]").click(function(){
var gid = $(this).attr('data-gid');
var fid = $(this).attr('id');
var checkboxes = $("input[data-gid=" + gid + "][id!=" + fid + "]");
checkboxes.attr("checked", false);
insideChanged(); //new code to fire any click code associated with unchecked boxes
});
});

I need an event trigger for a radio button for when it is unchecked because another button is checked

I need an event trigger for a radio button for when it is unchecked because another button is checked.
The code below should demonstrate my dilemma.
If you will notice, there is an onchange event trigger atttached to each radio button and checkbox in the html code. In theory a change in state from checked to unchecked should fire the onchange event.
This happens as expected with the check boxes. If you check one, you get the alert, 'Your item is changed to checked'. If you uncheck it, you get the alert, 'Your item is changed to unchecked'.
With the radio buttons, when you check button one, you get, as expected, the alert, 'Your item is changed to checked' since the button changed from unchecked to checked. However, when you check the second button and the first radio button is changed from checked to unchecked the "onchange" event trigger does not fire and the 'else' alert is not triggered.
So this issue for me is what event is triggered when a radio button gets unchecked by another button being checked?
I appreciate everyone's assistance on this.
--Kenoli
<html>
<head>
<title></title>
<script type="text/javascript">
function clickAction() {
//alert ('Your item changed');
if (this.checked == true) {alert ('Your item is changed to checked');}
else if (this.checked == false) {alert('Your item is changed to unchecked');}
}
</script>
<script type="text/javascript">
function initializeToggles() {
var button1= document.getElementById('button1');
button1.onchange = clickAction;
var box1= document.getElementById('box1');
box1.onchange = clickAction;
var box2= document.getElementById('box2');
box2.onchange = clickAction;
}
</script>
<script type="text/javascript">window.onload = initializeToggles;</script>
</head>
<body>
<input type="radio" name="testRadio" id="button1" >Button one<br/>
<input type="radio" name="testRadio" id="button2" >Button two<br/><br/>
<input type="checkbox" name="testCheckbox" id="box1" >Box one<br/>
<input type="checkbox" name="testCheckbox" id="box2" >Box two<br/><br/>
</body>
</html>

I came here looking for a quick solution for this type of problem, and nuc's answer helped me come up with this:
$(document).ready(function(){
$('input[type=radio]').change(function() {
var selected = $(this);
$('input[type=radio]').each(function() {
if $(this).attr('id') != selected.attr('id') {
console.log( $(this).attr('value') + ' was deselected because ' + selected.attr('value') + ' was clicked.')
}
});
});
});

There is no event for when a radio button gets unchecked. You might be able to use the onpropertychange event, however that's not a standardised event so it might only work in Internet Explorer.
The safest way would be to take care of that in the onchange event. If you want to know which radio button was unchecked, you would have to keep a reference to the currently checked element in a variable.

I slightly modified rthbound's code to handle a group of radio input's, in my case enclosed in a <table>. But this could easily altered for a <div>. Also this code is more compliant with jQuery 1.9. A common class would be better, to take the class from the selected radio and find other radio inputs with the same class, but I'm working with ASP.NET and this is quicker and easier for me.
$(document).ready(function(){
$(document).on("change", "input[type='radio']", function () {
var selected = $(this);
$(this).closest("table").find("input[type='radio']").each(function () {
if ($(this).attr("id") !== selected.attr("id")) {
console.log($(this).attr("value") + " was deselected because " + selected.attr("value") + " was clicked.");
}
});
});
});

I've solved this issue in a generic way:
whenever a radio button is changed:
if they were triggered by this system - we don't want unending loops.
find all its radio button friends
trigger change on them
then I can test for whether the radio button was checked or unchecked.
$(function(){
$('body').on('change', 'input[type="radio"]', function(e, by_other) {
if (!by_other) {
$("input[type='radio'][name='" + $(this).attr('name') + "']")
.not(this)
.trigger('change', true)
}
}
}
(I did translate it from coffeescript to javascript for ya'll.)

The Radio buttons have same name, so we can select them by name.
Because .change() is not effected when the radio is unchecked, so we use .click() instead of.
$('input[name="your-radio-name"]').click(function() {
var $radios = $('input[name="your-radio-name"]');
for (var i = 0; i < $radios.length; i++) {
var radio = $radios[i];
if (radio != this) {
radio = $(radio);
// Process for unchecked radios here
}
}
// Now, process for checked radio
// alert(this.value + ' is checked'); Or
alert($(this).val() + ' is checked');
});