We Keep Coding

Radio Button Check

I am trying to check if a radio box is checked using JavaScript, but I can't seem to figure it out properly.
This is the HTML code:
<input type="radio" name="status" id="employed_yes" value="yes">
<input type="radio" name="status" id="employed_no" value="no">
I have tried using jQuery as follows:
$(document).ready(function() {
if($('#employed_yes').is(':checked')) {
// do something
}
});
Also, I tried using pure Javascript by getting the element and check its 'checked' attribute, but it didn't work.
I look forward to your insight!
Thank you!

Use onchange
$('input[type="radio"]').on('change',function(){
if($('#employed_yes').is(':checked')) {
alert("yes");
}
});
DEMO

Try to check using name of the radio buttons like
if($('input[name="status"]').val() != "") {
// do something
} else {
alert("Select an Status");
}

Your solution doesn't work because when the page loads the checkbox's default state is unchecked, which is when the jQuery code runs.
You need to listen for the change event on the checkbox like so:
$(document).ready(function() {
$("#employed_yes").change(function() {
if(this.checked) {
document.write("checked");
}
});
});
Demo: http://jsfiddle.net/7CduY/

Try this. This will alert Hi on document ready if the any radio button is checked. If you want to check on specific event then you can bind on any event to check same.
$(document).ready(function() {
if($('input[type=radio]').is(':checked')) {
alert("Hi");
}
});

if($('input:radio:checked').text("yes") {
// do something
}
Got the idea from the jQuery forum. http://forum.jquery.com/topic/how-to-check-whether-all-radio-buttons-have-been-been-selected

Dude, I think you Wanted, whether radio button is checked or not, this what i understand from your question
If so here it is
$(document).ready(function() {
$('input[type="radio"]').on('change',function(){
if($('[name=status]:checked').length) {
alert("checked");
}
});
});
FIDDLE DEMO

Pure JS:
<input type = "button" value = "What?" name = "wic" onclick = "whatischecked(this.name);" />
Event onClick:
function whatischecked(name) {
var
emp = document.getElementById("employed_yes").checked
nonemp = document.getElementById("employed_no").checked
if (emp) {
alert("Employed");
};
if (nonemp) {
alert("Non-Employed");
};
if ((emp == false) & (nonemp == false))
{
alert("nothing checked")
};
}

Jquery Show Input Text Based On Input Value

I facing problem with my jquery, on showing input text based on input value.
Here is the JS fiddle demo :
http://jsfiddle.net/Ltapp/364/
When I try to input #hotmail, the input box will show. But when I want to type some text in the #hotm input box, it will hide again.
JS code :
$(window).load(function(){
var myString = '#hotmail';
$('#hotm').hide();
$("input").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});
});

It's because your selector $("input") affects both input elements. I have updated it to the $("input:first") selector instead. JsFiddle here
$("input:first").keyup(function () {
var value = $(this).val();
if(value.match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});

As many has said, you are binding the event on all the inputs I did a little change:
$(function(){
var myString = /#hotmail/ig;
$("#check").bind('keyup checkvalue', function() {
$('#hotm')[myString.test(this.value) ? 'show' : 'hide']();
}).trigger('checkvalue');
});
using regex if you are using #HoTmAil it will also hit on that, and also added a custom event checkvalue to see if #hotm should be visible on for example a postback on the form you might be using.
demo: http://jsfiddle.net/voigtan/xjwvT/1/

You're affecting all inputs. Either give each one a unique ID / Class or use the jQuery $(this) method.
See JSFiddle Here:
http://jsfiddle.net/Ltapp/366/
<input type="text" id="firstinput"/>
<p id="secondinput"><input type="text"/></p>
var myString = '#hotmail';
$('#secondinput').hide();
$("#firstinput").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#secondinput').show();
} else {
$('#secondinput').hide();
}
});

use this for your if part :
if($(this).val().match($(this).val().substr(0,strlen($(this).val())))

it's because the new box also = "input"; if you give the hotmail textbox it's own id, it won't hide
<input id="hotmail" type="text"/>
and then
$("#hotmail").keyup(function () {...});

jQuery .val() not setting the value of <select>

I would like to know why jQuery's .val() function is not setting the value of the <select> control for me after I called replaceWith, but it is working otherwise.
Please see here for a (not) working example.
<select><option>ABC</option><option>DEF</option></select>
<input type="button" onclick="ControlOff()" value="Turn Off Control" />
<input type="button" onclick="ControlOn()" value="Turn On Control" />
<input type="button" onclick="Test()" value="Value Setting Test" />
function ControlOff() {
$('select').each(function () {
$(this).replaceWith('<span class="select-type">' + $(this).val() + '</span>');
});
}
function ControlOn() {
$('.select-type').each(function () {
var selected = $(this).text();
$(this).replaceWith('<select><option>ABC</option><option>DEF</option></select>');
$(this).val(selected);
});
}
function Test() {
$('select').val('DEF');
}

The problem is, that $(this) in $(this).val(selected) refers to the removed <span> element, not your new element. You need to replace it with:
$('select').val(selected);
to grab the previously inserted new element.
Also, your code is unecessarily complex, this does the same thing, but simpler:
function ControlOn() {
$selectText = $('.select-type');
var selected = $selectText.text();
$selectText.replaceWith('<select><option>ABC</option><option>DEF</option></select>');
$('select').val(selected); // Use an id instead to match: #my-select-id
}
Make sure to give the <select> element an ID, otherwise it's going to mess up once you introduce a new <select> element somewhere else on the page.
See here for a working example.

The problem is that in ControlOn you have an each which is looping over .select-type elements which are span's and spans cannot be set with the val method:
You can fix this by changing the method to this:
function ControlOn() {
$('.select-type').each(function () {
var selected = $(this).text();
var $select = $('<select><option>ABC</option><option>DEF</option></select>');
$(this).replaceWith($select)
$select.val(selected);
});
}
Live example: http://jsfiddle.net/qSYYc/4/

set value of options will solve your problem. jsfiddle
<select><option value='ABC'>ABC</option><option value="DEF">DEF</option></select>

function ControlOn() {
$('.select-type').each(function () {
var selected = $(this).text();
$(this).replaceWith($('<select><option>ABC</option><option>DEF</option></select>').val(selected));
});
}
Rewrite your code like above, it would work!
The element referenced by this won't change to the select element you just created, it will always be the span element inside the scope of that function. Therefore you should set the value to the newly created select instead of the invariant $(this)!

I'd suggest you to use "disabled" attribute to turn select on and off, it, won't mess up the .val() functionality
function ControlOff() {
$("select").attr("disabled", "disabled");
}
function ControlOn() {
$("select").removeAttr("disabled");
}

Disabling select element when checkbox is checked with jQuery

I want to make a script which will disable a select form element upon checking desired checkbox. Since there will be more times I will use this, I wanted to make it as a function which takes target selection id as an argument. The problem is, this function doesn't work when I'm passing the id as argument. On the contrary, it seems to work with hard-coded id.
<select id="worldSelect" class="select" name="world">
<input id="worldcb" type="checkbox" checked="yes" value="any" name="world">
function toggleSelection(id){
var el = '#' + id;
if (this.checked) {
$(el).attr('disabled', 'disabled');
} else {
$(el).removeAttr('disabled');
}
}
$(function() {
toggleSelection('worldSelect');
$('#worldcb').click(toggleSelection);
});

You can't invoke the same function twice and expect the function to remember the id variable.
However you could do something like this:
function toggleSelection(e){
var el = '#' + e.data;
console.log(arguments);
if (this.checked) {
$(el).attr('disabled', 'disabled');
} else {
$(el).removeAttr('disabled');
}
}
$(function() {
$('#worldcb').click('worldSelect', toggleSelection);
});​
Fiddle: http://jsfiddle.net/4ZBne/1/

How about:
$('#worldcb').click(function() {
toggleSelection('worldSelect', $(this).is(':checked'));
});
function toggleSelection(sel, chk) {
$('#' + sel).attr('disabled', chk);
}​
jsFiddle example.
The toggleSelection() function takes two arguments, sel - the ID of the select box and chk, the checkbox to use.

jQuery change checkbox button text when clicked

I have some jQuery checkbox buttons, and they work fine. However, I would like to change their text upon a click. for example: the button's text is "click me". when the user clicks it, i needs to change to "thanks for clicking", for example.
This is what I am trying using:
<script>
$(function() {
$("#button").button();
$("#button").click(function(){
if($("#label").is(':checked')) {
$("#label span").text("Hide");
}
else {
$("#label span").text("Show");
}
});
});
</script>
<input id='button' type='checkbox' />
<label id='label' for="button">Show/Hide</label>

This is your first problem:
if($("#label").is(':checked')) {
<label> elements don't get "checked" only their checkboxes do. Change it to:
if (this.checked) {
In the code above, this refers to the checkbox element that has been clicked, and we're looking to see if the checked property contains the value true. It's much more efficient that .is(':checked').
Also, the <label> element has no <span> child, it just has text, so
$("#label span").text("Hide");
should be
$("#label").text("Hide");
But you could shorten the whole thing using the ternary conditional operator:
$("#button").click(function(){
$("#label").text(this.checked ? "Hide" : "Show");
}
Working demo: http://jsfiddle.net/AndyE/qnrVp/

$("#button").click(function() {
if($(this).is(':checked')) {
$("#label").text("Hide");
} else {
$("#label").text("Show");
}
});
And here's a live demo.

Try this:
$("#button").click(function(){
var th = $(this);
if(th.is(':checked')) {
$("label[for=" + th.attr('id') + "]").text("Hide");
} else {
$("label[for=" + th.attr('id') + "]").text("Show");
}
});