We Keep Coding

.is(":checked") doesn't work in jQuery

I'm new to jQuery and I need to check if the checkbox is checked. In other posts I saw that I need to use .is(":checked") to solve it, but somehow it doesn't work.
$('.neutral').on('click', function() {
var checkbox = $(this);
if (checkbox.is(":checked")) {
console.log('checked');
} else {
console.log('unchecked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="neutral" />
In this code I have 2 problems and I don't know how to solve it.
When I'm using console.log('checked') outside of the if statement (after checkbox variable) and I click on the checkbox one time, console prints the result 2 times.
I don't know why this if statement doesn't working.
Thank you for your time and help.

checked happens after the change event,just replace click with change.
$('.neutral').on('change', function() {
var checkbox = $(this);
if (checkbox.is(":checked")) {
console.log('checked');
} else {
console.log('unchecked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="neutral" />

I have seen your code, I think you should try
$(document).on("click",".neutral",function() {
// Write code here
});
Instead of your code, Replace this code to as i written
$('.neutral').on('click', function() {
// Code here
});
For more undesirability see here
$(document).ready(function() {
// This WILL work because we are listening on the 'document',
// for a click on an element with an ID of #test-element
$(document).on("click","#test-element",function() {
alert("click bound to document listening for #test-element");
});
// This will NOT work because there is no '#test-element' ... yet
$("#test-element").on("click",function() {
alert("click bound directly to #test-element");
});
// Create the dynamic element '#test-element'
$('body').append('<div id="test-element">Click mee</div>');
});
Visit these link that may help you more for your implementation
Statck over flow link
jsFiddle Link

Textarea startswith function not working

I am trying to apply starts with function on textarea, but obviously I am doing something wrong. I don't understand javascript, so I am sorry for obvious mistakes or problems. At least I tried what seemed logical to me... Fiddle here: http://jsfiddle.net/SVxbW/235/
HTML:
$("textarea").bind(function () {
if ($(this).startsWith("Hello") {
$(".kuk").show();
}
else {
$(".kuk").hide();
}
});
.kuk {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<textarea></textarea>
<button class="kuk">Clear</button>
And what if someone pastes the text "Hello" with right click of mouse? How to recognize that action too?

You need to get the val() then use startsWith(). Additionally you need to bind proper event handler. Here I have used keyup
$("textarea").on('keyup', function() {
if ($(this).val().startsWith("Hello")) {
$(".kuk").show();
} else {
$(".kuk").hide();
}
});
Updated Fiddle

Try this. You need to bind an event also you need to get val to check whether it startswith hello or not.
$("textarea").bind('keyup',function () {
if ($(this).val().startsWith("Hello")) {
$(".kuk").show();
}
else {
$(".kuk").hide();
}
});
Here is jsfiddle

I made jsfiddle for those wondering which code I am using right now. I added few kinds of input options and now it works in chrome as well.
final fiddle
$("textarea").bind('change keyup paste blur input',function () {
if ($(this).val().startsWith("Hello") || $(this).val().startsWith("HELLO") || $(this).val().startsWith("hello")) {
$(".kuk").show();
}
else {
$(".kuk").hide();
}
});

Jquery rename content insite a tag and confirm it

The User should be able to change the Name and then confirm the change. I'm not able to archive it with this code as when I click confirm, it returns like before.
What am I missing?
Any better way to put this together (which I'm sure there's one) ?
Please check the demo where you can also see the changeElementTypefunction
http://jsfiddle.net/dLk6E/
js:
$('.replace').on('click', function () {
$("h2").changeElementType("textarea");
$('.replace').hide();
$('.confirm').show();
//Confermation of the change
$('.confirm').bind('click', function () {
$('.replace').show();
$('.confirm').hide();
$("textarea").changeElementType("h2");
});
if ($('textarea:visible')) {
$(document).keypress(function (e) {
if (e.which == 13) {
alert('You pressed enter!');
$("textarea").changeElementType("h2");
$('.replace').css('opacity', '1');
}
});
}
});

Here are your updated code and working fiddle http://jsfiddle.net/dLk6E/
(function($) {
$.fn.changeElementType = function(newType) {
var attrs = {};
$.each(this[0].attributes, function(idx, attr) {
attrs[attr.nodeName] = attr.nodeValue;
});
this.replaceWith(function() {
return $("<" + newType + "/>", attrs).append($(this).contents());
});
}
})(jQuery);
$('.replace').on('click', function (){
$("h2").changeElementType("textarea");
$('.replace').hide();
$('.confirm').show();
//Confermation of the change
$('.confirm').on('click', function(){
$('.replace').show();
$('.confirm').hide();
// you are missing this
$('.replaceble').html($("textarea").val());
$("textarea").changeElementType("h2");
});
if ($('textarea:visible')){
$(document).keypress(function(e) {
if(e.which == 13) {
alert('You pressed enter!');
$("textarea").changeElementType("h2");
$('.replace').css('opacity','1');
}
});
}
});
updated
jsfiddle.net/dLk6E/1

I think your code is right but you need to use the value you're entering when replacing it. So the confirmation binding would be something like this (fetching it, and then using it to update the textarea before "transforming" it into an h2 tag.
$('.confirm').bind('click', function(){
var valueEntered = $('textarea').val();
$('.replace').show();
$('.confirm').hide();
$("textarea").html(valueEntered).changeElementType("h2");
});
You could be using .on for this as well as of jQuery 1.7 is prefered to .bind.
Another thing I would suggest is whenever you struggle with something like this just put in google (or whatever...) exactly what you want, in this case "jquery get value of input" will get asw first result the jquery documentation
This way you won't forget it ;)
Update: Maybe a small detail but in the binding I use it would be more efficient to just hit $('textarea') once, so it would be something like this. Something that you may keep in mind (not really an issue here), better to store in a variable than hit the DOM several times.
$('.confirm').on('click', function(){
var $textarea = $('textarea');
$('.replace').show();
$('.confirm').hide();
$textarea.html($textarea.val()).changeElementType("h2");
});
jsfiddle

Correct jQuery to read from a select option

My script doesn't seem to be working correctly, what I'm trying to get is pretty self explanatory. I have tried several diffrent ways to make this work, searched around and tried to solve it.
I also tried to check the chrome log via console.log() but it didn't run the code through.
So if you know the solution to make it work I would appreciate the answer on how you solved it and what was wrong in the code.
NEW: The fiddle below includes the HTML.
jQuery(document).ready(function($){
$('#cart_review .quantity option :selected').change(function (event) {
$quan = $(this);
console.log($quan.parent().next()[0]);
$quan.parent().next().find('.price').text(function () {
return $quan.val() * parseInt($(this).attr('data-val'), 10) + ' kr';
});
var total = 0;
$('#cart_review .price').each(function(k, v){
total += parseFloat($(v).text(), 10);
});
$('#total').text(total + ' kr')
});
});
Check out this jfFiddle

Option does not have change event, select does. You need to Change the handler to:
$('#cart_review .quantity').change(function (event) {
//rest code
});
jfFiddle

use this
$('#cart_review .quantity').change(function (event) {
// your logic here
}
instead of
$('#cart_review .quantity option').change(function (event) {}
working fiddle
Hope this helps...

http://jsfiddle.net/uQ2F8/3/
$(function(){
$('select.quantity').change(function (event) {
Hey I just changed your selector, I think this is what you're trying to accomplish. I did it with the first one.

How to handle two unrelated events with jquery

I'm wondering if I can fire off both of these events together :
$("input[type=checkbox]").click(function(){
if($(this).is(":checked"))
{
//Value of checkbox
alert(this.value);
}
});
and
$("input[type= 'text']").keyup(function(){
alert(this.value);
});
I looked into .bind, but that seems to only work for one selected elements (i.e. $(p).bind("mouseout mouseenter).doSomething()).
The situation I am running into is that I have a function that needs to fire anytime either one of these things occur.

Try
$("input[type=checkbox],input[type='text']").on('click keyup', function(){
// code
});

Two ways you can achieve this as shown below:
using "on" method:
$(document).on('keyup click',"input[type=checkbox],input[type='text']", function(){
// Do stuff here..
})
Call function after the event.
$("input[type=checkbox]").click(doSomething);
$("input[type= 'text']").keyup(doSomething);
function doSomething() {
}

If you still need the additional if, you can use:
$("input[type=checkbox]").click(function(){
if($(this).is(":checked"))
{
//Value of checkbox
alert(this.value);
somethingHappened();
}
});
$("input[type= 'text']").keyup(function(){
alert(this.value);
somethingHappened();
});
function somethingHappened() {
// Do stuff
}

Perhaps all you need is a common function?
$("input[type=checkbox]").click(function(){
if($(this).is(":checked")) {
special(this.value);
}
});
$("input[type= 'text']").keyup(function(){
special(this.value);
});
function special(val) {
alert(val);
}

If your intent really is to invoke a function when any checkboxes/text fields across the whole page changes, you probably want something like this:
$('body').on('change', ':checkbox,:text', function () {
});
Note that the :checkbox and :text selectors are much nicer than input[type=checkbox] etc.