We Keep Coding

Remove Div Attribute when radio button is selected

I'm very new to JavaScript, not really sure what I'm doing. I found some useful code that removes/inserts a Div's attributes when a certain value is selected from a dropdown list. I'd like to modify this code so that the attribute is altered when a radio button is selected.
Here is the code I have at the moment:
function pageLoad(sender, args) {
if (args.get_isPartialLoad()) {
var rangeType = $('#<%= DateRangeList.ClientID%>').val();
if (rangeType == 6) {
$('#DatePeriodRow').removeAttr("style");
}
else {
$('#DatePeriodRow').attr("style", "display: none;");
}
}
}
$(document).ready(function () {
$('#<%= DateRangeList.ClientID %>').live("change", function() {
var rangeType = $('#<%= DateRangeList.ClientID %>').val();
if (rangeType == 6) {
$('#DatePeriodRow').removeAttr("style");
}
else {
$('#DatePeriodRow').attr("style", "display: none;");
}
});
})
I've been trying various ways of rebuilding this code to suit my needs but no luck thus far. I've also done quite a bit of Googling to no avail. I often receive the "Propery/Value is null or undefined" message, and I'm not to sure how to go about debugging the java side of things.
Any and all help would be greatly appreciated!

If you're trying to show hide and element, Raki's answer will do. You could also express it this way:
$('#DatePeriodRow').hide(); // Hide Div
$('#DatePeriodRow').show(); // Show Div
First things first though, if your Property/Value is undefined or null you probably have a problem with your selectors. I.e. the following line:
$('#<%= DateRangeList.ClientID %>')
The <%= ... %> looks like ASP, if this is intended to be run inside that environment perhaps that code is not evaluating correctly which is giving you the wrong jQuery selector.
One More Thing
Check which version of jQuery you're using, .live() is deprecated, newer versions use .on

instead of using $('#DatePeriodRow').removeAttr("style"); use
$('#DatePeriodRow').css("display", "none"); in order to hide div and
$('#DatePeriodRow').css("display", "block"); to display div

ASP Radio-button list is rendered as a table which contains html inputs with type "radio". So you need to add "input" to selector. The code below assigns handler to each radio-button when document is loaded and also checks if one of the buttons has been checked already. If it was - it fires "change" event to trigger the handler. Hope it helps.
$(document).ready(function ()
{
$('#<%=DateRangeList.ClientID%> input').bind("change",
function ()
{
if ($(this).val() == "6") {
$("#DatePeriodRow").show();
}
else {
$("#DatePeriodRow").hide();
}
});
var checkedButton = $('#<%=DateRangeList.ClientID%> input[checked]').first();
if (checkedButton.val())
{
checkedButton.trigger("change");
}
});

KnockoutJS: Checkbox Inside Click-Bound Anchor-Tag not Selectable

I am trying to bind checked on a checkbox input which resides inside an anchor tag which, itself, is click bound.
Whilst I am aware that this may not be entirely valid (interactive content may not be descendant of anchor-tags), I would still like to get it to work as intended - even if just to understand it.
Currently, only the outside click event is handled and the click never arrives at my checkbox.
An example of what I am trying to achieve is here: http://jsfiddle.net/fzmppu93/2/
Having had a look through the KnockoutJS documentation, I tried clickBubble: true on the anchor-tag's click binding - to no avail.
The use case, if you're interested, is an unordered list containing links - each of these "links" contains information on a TV show: title, actors, image, synopsis. The show is selectable, but there are also 'quick-actions' to mark it as seen, star it, and so forth.
Is there another way of making a checkbox work inside an anchor-tag?

I have written a custom binding handler that is similar to "clickBubble", however mines allows to you to prevent the propagation of any event.
Here is the binding handler:
ko.bindingHandlers.preventBubble = {
init: function (element, valueAccessor) {
var eventName = ko.utils.unwrapObservable(valueAccessor());
var arr = eventName;
if (!eventName.pop) {
arr = [arr];
}
for (var p in arr) {
ko.utils.registerEventHandler(element, arr[p], function (event) {
event.cancelBubble = true;
if (event.stopPropagation) {
event.stopPropagation();
}
});
}
}
};
And here is a working fiddle of your example.

Checkbox and click event handling

I'm trying to set a textbox to 'readonly', add a class, and put a text into the textbox at that moment when I check the checkbox. Moreover, I'm also trying to remove 'readonly' attribute from the textbox, add a class, and delete text in the textbox.
I have
$('#CheckBoxSectionCode').click(function () {
if ($(this).is(':checked')) {
$('#TextBoxSectionCode').attr('readonly', 'readonly');
$('#TextBoxSectionCode').addClass('disabled');
$('#TextBoxSectionCode').text(document.getElementById('TextBoxSectionName').val);
}
else {
$('#TextBoxSectionCode').attr('readonly', false);
$('#TextBoxSectionCode').addClass('abled');
$('#TextBoxSectionCode').text('');
}
});
This code doesn't work for me.
Thanks,
Phillip
Thanks everyone for answers.
According to your comments and answers, I've changed my code but it's still not working.
$('#CheckBoxSectionCode').click(function () {
if ($(this).is(':checked')) {
$('#TextBoxSectionCode').prop('readonly', true);
$('#TextBoxSectionCode').addClass('disabled');
$('#TextBoxSectionCode').text('disabled');
}
else {
$('#TextBoxSectionCode').prop('readonly', false);
$('#TextBoxSectionCode').removeClass('disabled').addClass('enabled');
$('#TextBoxSectionCode').text('');
}
});
I'm using chrome browser to run this code, and using developer tools in chrome and put a break point at the code above to see what's happening in the jquery. However, when I click the check box to check/uncheck, nothing happens there.

document.getElementById('TextBoxSectionName').val this is wrong. You really should cache your jQuery object so it's not navigating the DOM over and over. Then you mix in native JS and .val is not a DOM property or method, nor is it a jQuery property, it should be .value for a DOM object or .val() for a jQuery object.
Obligatory explanation by #Archy Wilhes:
"Just to clarify; when #SterlingArcher says caching the jQuery object,
she/he means doing something like var obj = $('#TextBoxSectionCode')
then calling the functions using the variable like this:
obj.attr(...); obj.addClass(...). Every time you do a $(something) you
are calling a function in jQuery that looks for the DOM."

since everytime you are adding the class the element is going to end up having both the two classes. Consider removing the other class before adding one. For example,
$(selector).removeClass('disabled').addClass('enabled')

Try with change event instead of click:
$('#CheckBoxSectionCode').change(function () {
if ($(this).is(':checked')) {
$('#TextBoxSectionCode').attr('readonly', 'readonly');
$('#TextBoxSectionCode').addClass('disabled');
$('#TextBoxSectionCode').text(document.getElementById('TextBoxSectionName').val);
}
else {
$('#TextBoxSectionCode').attr('readonly', false);
$('#TextBoxSectionCode').addClass('abled');
$('#TextBoxSectionCode').text('');
}
});

You could do the following way.
//Cache reference to DOM as DOM scan is expensive!
var textBox = $('#TextBoxSectionCode');
$('#CheckBoxSectionCode').click(function () {
//Use prop as opposed to attr
textBox.prop("readOnly", false).removeClass('disabled').addClass('abled').text("");
if ($(this).is(':checked')) {
textBox.prop("readOnly", true).removeClass('abled').addClass('disabled').text($("#TextBoxSectionName").val());
}
});

Javascript - how to check "certain" checkboxes and not all using my current code?

So I have two tables that pop open on one page. Here's the script that I've been previously using to select all of the checkboxes in the first table (which was the only one at the time):
<script>
$('#selectAll').click(function() {
if(this.checked) {
$(':checkbox').each(function() {
this.checked = true;
});
} else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});
</script>
How can I change this to be more specific? Do I need to add a specific class or ID attribute to the checkbox for this to work?

Assuming that both tables have class .table. Optimized version of your script which would work for both tables can look like this:
$('.table').on('click', '.selectAll', function(e) {
$(':checkbox', e.delegateTarget).prop('checked', this.checked);
});
Notes:
Instead of id #selectAll your select-all checkboxes must have class .selectAll.
With .on method we bind one click event handler to table, which triggers when .selectAll is clicked. e.delegateTarget points to the current table DOMElement. Then $(':checkbox', e.delegateTarget) means find checkboxes within current table.
Instead of looping with each method and setting checked = true/false you can use jQuery's prop method to do the same but more concise.
Demo: http://jsfiddle.net/pkp7osfn/

jQuery - call a function anytime a user changes any form input?

I have a page that has multiple forms. Anytime the user clicks an input or modifies text in an input I would like a function to be called. Any ideas on how to do this efficiently and in a way where it doesn't require the form IDs?

JavaScript events bubble up. So how about:
$('form').change(function() {
// do something
}).click(function() {
// do something
});
In each case you can query for the element that triggered the event and do what you please.

$('form input').each(function() {
var val = this.value;
$(this).click(function() { }
$(this).blur(function() {
}
});
You can also use delegate for better performance. It would help seeing your source and your exact needs.