Develop Reference

Add active class without any click or pressing any key(checkbox)

I want the checkbox field should add an active class to its label if it is checked. I have done everything like when check it adds class to label and when not checked it does not add the active class.
But my point is when the code is
<label class="define--area--label"><input type="checkbox" checked ><label>
then it does not add the active class to the label.
here is my code
$('.define--area--label > input').change(function() {
if ($(this).is(':checked')) {
$(this).parent().addClass('active');
} else {
$(this).parent().removeClass('active');
}
});
Full Example

I think you have to trigger change event through JavaScript after document loaded.
$(document).ready(function(){
$('.define--area--label > input').change(function() {
if ($(this).is(':checked')) {
$(this).parent().addClass('active');
} else {
$(this).parent().removeClass('active');
}
});
$('.define--area--label > input:checked').trigger('change');
})

$(document).ready(function(){
$('.define--area--label > input').each(function() {
if($(this).is(':checked')){
$(this).parent().addClass('active');
}
});
});

How to Add and remove attribute if found specific class

I have some list items and if I click any list item it become selected by adding class .selected
If I click outside of the list item all list item become unselected. FIDDLE
I also have one button initially disabled. I wanted to make the button active by removing "disabled" attribute when list items are selected.
Again if I click outside all list item should be unselected and button become disable again.
How I can do this? Any help will be appreciated.
JS
$(".list-group-item").click(function() {
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
});
$(document).on('click', function (e) {
if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
$('.list-group-item').removeClass('selected');
}
});

All you're missing is how to enable/disable your button and that is
$('.load-table').prop('disabled',false); // or true to disable
So just plug this in as required
$(".list-group-item").click(function() {
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
$('.load-table').prop('disabled',false);
});
$(document).on('click', function (e) {
if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
$('.list-group-item').removeClass('selected');
$('.load-table').prop('disabled',true);
}
});
http://jsfiddle.net/has9L9Lh/22/

Use .hasClass() instead and set else condition and to disable and enable the button use .prop()
$(".list-group-item").click(function(e) {
e.stopPropagation();
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
$('.load-table').prop('disabled',false);
});
$(document).on('click', function (e) {
if ($(e.target).hasClass("list-group")) {
$('.list-group-item').removeClass('selected');
}
else{
$('.list-group-item').removeClass('selected');
$('.load-table').prop('disabled',true);
}
});
Demo

Use attr() property of jquery.
$(".list-group-item").click(function () {
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
if ($("button").attr("disabled") === "disabled") {
$("button").attr("disabled", false);
}
});
$(document).on('click', function (e) {
if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
$('.list-group-item').removeClass('selected');
$("button").attr("disabled", true);
}
});
Above code should work. When the item is clicked then check if the button is still disabled. If it is then enable the button.
Same goes when the user click outside the list.
Fiddle

jQuery .on() tr click event using .not() on tr checkbox click?

So my title may be confusing, but it has the right details. I have a table with clickable rows. When clicking the row, the row highlights. The table also has a checkbox column. Clicking the checkbox should NOT highlight or remove highlight from the row. How can I properly use .not() or :not in the .on('click', 'tr', function(){ ... }) ? http://jsfiddle.net/vmu0p2oe/
$('table').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
//$(this).find(":checkbox").prop("checked", false);
}
else {
$('tr.selected').removeClass('selected');
$(this).addClass('selected');
//$(this).find(":checkbox").prop("checked", true);
}
});

Add this to the beginning of the handler:
if($(e.target).is('input[type=checkbox]')) {
return;
}
This will stop the handler from running if the element clicked is a checkbox.
Fiddle: http://jsfiddle.net/vmu0p2oe/1/

Add a handler for the checkbox that uses stopPropagation() to prevent the click from bubbling out to the tr:
$('table').on('click', ':checkbox', function(e) {
e.stopPropagation();
});
DEMO

How about this:
$('table').on('click', 'tr', function (e) {
var el = e.target;
if ( el.type !== "checkbox"){
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
//$(this).find(":checkbox").prop("checked", false);
} else {
$('tr.selected').removeClass('selected');
$(this).addClass('selected');
//$(this).find(":checkbox").prop("checked", true);
}
}
});
fiddle

replace radio button with css button and keep label in div

have created a fiddle http://jsfiddle.net/4QZED/2/. (Explosion Pills updated version - http://jsfiddle.net/ExplosionPIlls/4QZED/4/ )Instead of showing the normal radio, or replacing the radio with an image. i would like to replace it with a div i can dress up as a button and on hover the class changes and on click the class changes. but also on click the hidden radio is selected. but also require the label (label in reference to the text showing e.g as below .co.uk .com .net etc.) to be inside the div/button. or be able to add text to the div button. is this possible?
$(function() {
$("input [name='domain_ext']").each(function() {
if ($(this).prop('checked')) {
$(this).hide();
$(this).after($("<div class='radioButtonOff'> label </div>"));
} else {
$(this).hide();
$(this).after($("<div class='radioButtonOff'> label </div>"));
}
});
$("input.radio").click(function() {
if($(this).attr('src') == 'radiobuttonOn') {
$(this).attr('src', 'radiobuttonOff');
$(this).prev().attr('checked', 'false');
} else {
$(this).attr('src', 'radioButtonOn');
$(this).prev().attr('checked', 'true');
}
});
});

I've attempted to improve upon your solution to get it to work the way you want. You had several errors. Most importantly, there is a vastly important difference between input[name=domain_ext] and input [name=domain_ext] (the space is the descendant selector). You were also using $(this) in the checked event to apparently change the divs, but the event was bound to the inputs. There's also a difference between input.radio and input[type=radio].
$("input[name='domain_ext']").each(function() {
if ($(this).prop('checked')) {
$(this).hide();
$(this).after("<div class='radioButtonOff'> label </div>");
} else {
$(this).hide();
$(this).after("<div class='radioButtonOff'> label </div>");
}
});
$("input[type=radio]").change(function() {
$(this).siblings('.radioButtonOff').add('.radioButtonOn').toggleClass('radioButtonOff radioButtonOn');
});
http://jsfiddle.net/ExplosionPIlls/4QZED/4/

Only select one row at a time using jquery

I am using mouseover(), mouseout() and click() to highlight rows on mouseover and add a highlight class on click:
//Mouseover any row by adding class=mouseRow
$(".mouseRow tr").mouseover(function() {
$(this).addClass("ui-state-active");
});
$(".mouseRow tr").mouseout(function() {
$(this).removeClass("ui-state-active");
});
$('.mouseRow tr').click(function(event) {
$(this).toggleClass('selectRow');
});
The above code will allow a user to 'highlight' (i.e add class selectRow) to as many rows as they want. What is the best way, using jQuery, to limit the number of rows they can select to just one (so that if they click one row, then click another it will remove the 'selectRow' class from the previously selected row)?

You could remove the selectRow class from all of the tr elements except the clicked one whenever you click on one, and then toggle it on the clicked one:
$('.mouseRow tr').click(function(event) {
$('.mouseRow tr').not(this).removeClass('selectRow');
$(this).toggleClass('selectRow');
});
Here's a working example.

Use this script at end of your html,meant after </body> tag
<script>
$("tr").hover(function()
{
$(this).addClass("hover");
}, function()
{
$(this).removeClass("hover");
});
$('tr').click(function(event) {
$('tr').not(this).removeClass('click');
$(this).toggleClass('click');
});
</script>
This is css that highlight your row:
.click{
background:#FF9900;
color: white
}
.hover{
background:blue;
color: white
}
here is the link of working example
Working example
Hope this will help

While I first tried the toggleClass/removeClass-way with a '.clicked'-Class in CSS, it turned out to lag a bit. So, I did this instead which works better/faster:
$(document).on('click', '.DTA', function (event) {
$('.DTA').not(this).css('backgroundColor', "#FFF");
$(this).css('backgroundColor', "#FAA");
});
Here is the fiddle: https://jsfiddle.net/MonteCrypto/mxdqe97u/27/

$('.mouseRow tr').click(function(event) {
if (!$(this).hasClass('selectRow')){
$('.selectRow').removeClass('selectRow');
$(this).addClass('selectRow');
} else {
$('.selectRow').removeClass('selectRow');
}
});
Should do the trick. Note this still allows your toggle, if you don't want that just remove the if(){ and } else { ... } parts leaving:
$('.selectRow').removeClass('selectRow');
$(this).addClass('selectRow');

Using jquery-ui .selectable function with tbody id='selectable':
$(function() {
$("#selectable").selectable({
filter: "tr", //only allows table rows to be selected
tolerance: "fit", //makes it difficult to select rows by dragging
selected : function(event, ui) {
var rowid = "#"+ui.selected.id; //gets the selected row id
//unselects previously selected row(s)
$('tr').not(rowid).removeClass('ui-selected');
}
});
});
Each of my table rows, which were created dynamically have an id of 'task'+i

You could try this:
$('.mouseRow tr').click(function(event) {
$('.mouseRow tr').each(function(index) {
$(this).removeClass('selectRow');
});
$(this).toggleClass('selectRow');
});
You could also use the .find() method and wrap logic to check if any elements have this class first before removing all.