We Keep Coding

How can I check with JQuery if a checkbox is checked and if so add a class to the parent label?

I would like, on load of the page, to check if a checkbox is :checked Then if it is, add a class to the label. I currently have the following script but it doesn't work.
$(document).ready(function() {
$('input').is(':checked') {
$(this).parent('label').toggleClass('label--active');
});
});
My HTML is:
<label class="container-checkbox" for="checkOne">
<span class="checkbox-label">Option one</span>
<input type="checkbox" id="checkOne">
<span class="checkmark"></span>
</label>
I can not change the DOM order as these are custom checkboxes.

I guess you can use this:
$(document).ready(function() {
let checkboxone = document.getElementById('checkOne');
checkboxone.addEventListener('change',function() {
checkboxone.parentNode.classList.toggle('label--active');
});
});
How does is work?
Everytime when the checkbox is clicked, the class 'label--active' will be added / removed.

Unable to get radio group value via jquery

I have a radio group which is contains 2 radio buttons. This radio group created after an Ajax response. I want to get the value of the checked radio button but i am unable to do this. Here is my implementation, any help would be appriciated.
HTML:
Yes<input class='radioInput' id='g1Positive' type='radio' name='g1' value='YES'/>
No<input class='radioInput' id='g1Negative' type='radio' name='g1' value='NO'/>
JS:
$('#resultTable').on("click", ".editForm2", function(){
var isIengStuWork = $('input:radio[name=g1]:checked').val();
});

Hopefully this simple Fiddle is the answer
As you didn't post the html I just display the value in a div when a button is clicked
Html
<input [value][2]="first" type="radio" name="foo">First
<input value="second" type="radio" name="foo">Second
<input value="third" type="radio" name="foo">Third
<button id="show">Show</button>
<div id="result"></div>
JS
$("#show").click(function() {
var value = $('input[name=foo]:checked').val();
$('#result').html(value);
});
UPDATE
After your comment I wonder if you're element with id "resultTable" would be a dynamically loaded one as the radio buttons. In that case that binding wouldn't work.
You should be reference there an already existing element in the DOM, a static element let's say. Although you could still be dynamically loading the element with class "editForm2"
More information on http://api.jquery.com/on/
That would be something like this
$('#staticParentElement').on('click', '#dynamicChildElement', function(){ //whatever });
I have created this updated Fiddle. In it I mimic the ajax addition of elements to the DOM by displaying a button that adds content
In the first case I just add the content inside the table to an existing container, to which I bind the click event of the "show" button
So we add the radio buttons and the show button to a static #staticTable
<div id="staticTable"></div> <br/>
<button id="addStatic">Add dynamic content into static Table</button><br/>
$("#addStatic").click(function() {
$('#staticTable').append("Dynamic content into static table<br/>Yes<input class='radioInput' id='g1Positive' type='radio' name='g1' value='YES'/>No<input class='radioInput' id='g1Negative' type='radio' name='g1' value='NO'/><button class='show'>Show</button>");
});
And then we are able to bind the show button click like this
$("#staticTable").on('click', '.show', function() {
var value = $(':radio[name=g1]:checked').val();
$('#staticResult').html(value);
});
This works
But if we were adding to the DOM the "container" we are binding to, it wouldn't work. In the fiddle for example we inject a #dynamicTable inside a div
<div id="ContainerForDynamicTable"></div><br/>
<button id="addDynamic">Add dynamic Table</button><br/><br/>
$("#addDynamic").click(function() {
$('#ContainerForDynamicTable').append("Dynamic table<br/><div id='dynamicTable'>Yes<input class='radioInput' id='g1Positive'type='radio' name='g1' value='YES'/>No<input class='radioInput' id='g1Negative' type='radio'name='g1' value='NO'/></div><button class='show'>Show</button>");
});
and we try to bind the show button click selecting that #dynamicTable
$("#dynamicTable").on('click', '.show', function() {
var value = $(':radio[name=g1]:checked').val();
$('#dynamicResult').html(value);
});
This doesn't work
Notice that for making the last one we should find a static parent of the .show button, in this case the closest in the upwards tree would be #ContainerForDynamicTable (you can even go up until document although it would be more costly to find later the .show button)

Try this:
$('#resultTable').on("click", ".editForm2", function(){
var checked_ele = $('input[type="radio"][name="g1"]:checked');
$(checked_ele).each(function(){
// do stuff here
});
});

how to check a specific image with input checkbox

I have this code that I'm still modifying. But I'm still having a hard time. I'm new in jquery . I'm planning to make a multiple checkbox with image. please check my code. It's not working. my sample code is two checkbox. Im planning to put it on array so that I could put more than two checkboxes with image. instead of making jquery code in each of checkbox.
here is my code
html
<form id="form1">
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr" class="" />
<input type="checkbox" id="imgCheck[]" name="imgCheck" value="barney" />
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr" class="" />
<input type="checkbox" id="imgCheck[]" name="imgCheck" value="barney2" />
<input type="submit" value="Submit" />
</form>
jquery
$('img').on('click', function(){
var $$ = $(this)
if( !$$.is('.checked')){
$$.addClass('checked');
$('input[id=imgCheck]').prop('checked', true);
} else {
$$.removeClass('checked');
$('input[id=imgCheck]').prop('checked', false);
}
})
style
.checked {border:solid 2px red}

Try
$('img').on('click', function () {
var $$ = $(this)
//toggle the checked state
$$.toggleClass('checked');
//set the next checkbox's state in synch with the checked state of the image
//from the given markup we can assume that an image will always be related to the next sibling element which will be checkbox
$$.next('input').prop('checked', $$.hasClass('checked'));
})
Demo: Fiddle
toggleClass()
hasClass()
next()

Button is not visible because of hidden div

I have this HTML code where I have a div and a button.
Now, with jQuery I made the div "hidden" and it will only show when you have selected the correct <option>. But now the button is only visible if the div is too.
HTML:
<div id="great">
Do you like the netherlands?
<input type="text" id="greatBox" value="Why..."
</div>
<input type="button" id="submitbutton" value="Submit">
and the JS/Jquery looks like this
(its spread over the file, the rest is not needed (i guess))
$('#great').hide()
$("#selectlist").change(function(){
var value = $(this).val();
if ($(this).val() == "netherlands") {
$('#great').slideDown(750)
$('#other').hide()
}
if ($(this).val() == "other") {
$('#great').hide()
}
});
There is not yet any jQuery/javascript bound to the button.

You need to close <input type="text" id="greatBox" value="Why..." >
Because it's open the div never gets closed and everything after it will be hidden.

trouble with jquery and traversing the DOM to select the appropriate elements

Hello guys i have the below html for a number of products on my website,
it displays a line with product title, price, qty wanted and a checkbox called buy.
qty input is disabled at the moment.
So what i want to do is,
if the checkbox is clicked i want the input qty to set to 1 and i want it to become enabled.
I seem to be having some trouble doing this. Could any one help
Now i can have multiple product i.e there will be multiple table-products divs within my html page.
i have tried using jQuery to change the details but i dont seem to be able to get access to certain elements.
so basically for each table-product i would like to put a click listener on the check box that will set the value of the input-text i.e qty text field.
so of the below there could be 20 on a page.
<div class="table-products">
<div class="table-top-title">
My Spelling Workbook F
</div>
<div class="table-top-price">
<div class="price-box">
<span class="regular-price" id="product-price-1"><span class="price">€6.95</span></span>
</div>
</div>
<div class="table-top-qty">
<fieldset class="add-to-cart-box">
<input type="hidden" name="products[]" value="1"> <legend>Add Items to Cart</legend> <span class="qty-box"><label for="qty1">Qty:</label> <input name="qty1" disabled="disabled" value="0" type="text" class="input-text qty" id="qty1" maxlength="12"></span>
</fieldset>
</div>
<div class="table-top-details">
<input type="checkbox" name="buyMe" value="buy" class="add-checkbox">
</div>
<div style="clear:both;"></div>
</div>
here is the javascript i have tried
jQuery(document).ready(function() {
console.log('hello');
var thischeck;
jQuery(".table-products").ready(function(e) {
//var catTable = jQuery(this);
var qtyInput = jQuery(this).children('.input-text');
jQuery('.add-checkbox').click(function() {
console.log(jQuery(this).html());
thischeck = jQuery(this);
if (thischeck.is(':checked'))
{
jQuery(qtyInput).first().val('1');
jQuery(qtyInput).first().prop('disabled', false);
} else {
}
});
});
// Handler for .ready() called.
});

Not the most direct method, but this should work.
jQuery(document).ready(function() {
jQuery('.add-checkbox').on('click', function() {
jQuery(this)
.parents('.table-products')
.find('input.input-text')
.val('1')
.removeAttr('disabled');
});
});

use
jQuery('.add-checkbox').change(function() {
the problem is one the one hand that you observe click and not change, so use change rather as it really triggers after the state change
var qtyInput = jQuery(this).children('.input-text');
another thing is that the input is no direct child of .table-products
see this fiddle

jQuery('input:checkbox.add-checkbox').on('change', function() {
jQuery(this)
.parent()
.prev('div.table-top-qty')
.find('fieldset input:disabled.qty')
.val(this.checked | 0)
.attr('disabled', !this.checked);
});

This should get you started in the right direction. Based on jQuery 1.7.2 (I saw your prop call and am guessing that's what you're using).
$(document).ready(function() {
var thischeck;
$('.table-products').on('click', '.add-checkbox', function() {
var qtyInput = $(this).parents('.table-products').find('.input-text');
thischeck = $(this);
if (thischeck.prop('checked')) {
$(qtyInput).val('1').prop('disabled', false);
} else {
$(qtyInput).val('0').prop('disabled', true);
}
});
});
Removing the property for some reason tends to prevent it from being re-added. This works with multiple tables. For your conflict, just replace the $'s with jQuery.
Here's the fiddle: http://jsfiddle.net/KqtS7/5/