We Keep Coding

asp.net radio button on click event without page load

My problem is pretty simple, but I am not able to fix it.
I have 2 radio buttons and a hidden text label. Once the first radio button is clicked, I want to show the hidden label, and when the second radio button is clicked, I want to hide it again - all this without reloading the page.
I am hoping this can be achieved by JavaScript, but unfortunately I don't know how.
Any help will be appreciated.
Thanks in advance.

Try the following simple example.
$(document).ready(function() {
$('input[type=radio][name=GName]').change(function() {
if (this.value == '1') {
$("#label").text("Yes");
}
else if (this.value == '2') {
$("#label").text("No");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<input type="radio" name="GName" value="1"> Yes</input>
<input type="radio" name="GName" value="2"> No</input>
<p> <span id="label"> </p>

You can use jQuery to bind an onlick-Event handler
$('#firstcheckbox').click(function() {
//code goes here
});
$('#secondcheckbox').click(function() {
//code goes here
});

How to hide radio button until something happens?

So I want to hide a radio button until my form is filled out but I don't know how. I tried .hide(); and that worked when I put it outside of my .submit function but doesn't work inside of it. This is using jquery and bootstrap.
Here is a small version of the JS I have ('agree' is the radio button):
$('myForm').submit(function(e){
var firstName = $('first-name').val();
var pattern = /^$/;
var error = '';
var checkbox = document.getElementById('agree');
if(pattern.test(firstName)){
error += 'Error: enter first name.\n';
}
if(error.length != 0){
alert(error);
e.preventDefault();
}
});
I want to hide the radio button until the first name part of the form is filled out then the radio button will appear.

Put an id in your radio like this :
<input type="radio" id="rad" />
Then hide it like this using jquery :
$('#rad').hide();
Then an example of how you can make it show when something happens would go a bit like this :
If ($('#something') > 10) {
$('#rad').show();
}
Hope this helped :)

I would use plain JavaScript for this:
<input type="text" name="first-name" value="" onchange="document.getElementById('agree').style.display = (this.value == '' ? 'block' : 'none' );"/>
<input type="checkbox" name="agree" value="Agree" style="display:none"/>
Edit:
Other ways to do this is to use onkeydown, onkeyup or onblur instead of onchange

Here is a simple example using jquery... http://jsfiddle.net/wa8rxj43/2/
HTML
<input type="text" id="name" class="name">
<input class="not-display" id="somecheck" type="checkbox" name="vehicle" value="Car" checked>
JavaScript
$('#somecheck').hide();
$("#name").bind({
'input':function(){
if(this.value.length > 0)
{
$('#somecheck').show();
}
else
{
$('#somecheck').hide();
}
}
});
Edit: Removed CSS per OP's request.

Change label text on radio button selection with jQuery

I need to change the label text on a radio button when it is selected from "Set default" to "default" - How can this be done with jQuery? I presume that you would use the class radio-defaultas the selector but I don't know much about jQuery.
<div class="radio-default">
<input type="radio" id="line-radio-1" name="line-radio">
<label for="line-radio-1">Set default</label>
</div>
<div class="radio-default">
<input type="radio" id="line-radio-2" name="line-radio">
<label for="line-radio-2">Set default</label>
</div>
<div class="radio-default">
<input type="radio" id="line-radio-3" name="line-radio">
<label for="line-radio-3">Set default</label>
</div>

Try
$("input[name='line-radio']").click(function() {
$('.radio-default label').text('Set default');
if(this.checked){
$(this).next().text('default');
}
});
Fiddle

Use below script
$( "input:radio" ).click(function() {
$(':radio').each(function() {
$("#"+this.id).next().text( "Set default" );
});
$("#"+this.id).next().text( "Default" );
});

Do this:-
var $radioButtons = $('.radio-default input:radio[name="line-radio"]');
$radioButtons.change(function(){
if($(this).val() == 'on'){
$radioButtons.siblings('label').text('Set default');
$(this).siblings('label').text('default')
}
});
Working JsFiddle here

You can add an on click hadler on the radio button
<input type="radio" id="line-radio-1" name="line-radio" onClick="yourFunc">
yourFunc: function(e){
$(e).next('label').text('your text');
}

you may want to reset the text on the previoused button clicked, but this can help you:
$('.radio-default').on('click',function(){
$(this).find('label').text("set");
})

Try this
$('input:radio').click(function() {
$('label').text('Set default');
$(this).next('label').html('Default');
});
http://jsfiddle.net/ph2gvjcc/

jQuery click event on radio button doesn't get fired

I've got the following code to trigger a click event on some radio buttons! but it doesn't get fired! can any one help me with this!
CODE :
$("#inline_content input[name='type']").click(function(){
if($('input:radio[name=type]:checked').val() == "walk_in"){
$('#select-table > .roomNumber').attr('enabled',false);
}
});
RADIO BUTTONS
<form class="type">
<input type="radio" name="type" checked="checked" value="guest">In House</input>
<input type="radio" name="type" value="walk_in">Walk In</input>
</form>.
Update
Tried onChange() too but not working.

It fires. Check demo http://jsfiddle.net/yeyene/kbAk3/
$("#inline_content input[name='type']").click(function(){
alert('You clicked radio!');
if($('input:radio[name=type]:checked').val() == "walk_in"){
alert($('input:radio[name=type]:checked').val());
//$('#select-table > .roomNumber').attr('enabled',false);
}
});

There are a couple of things wrong in this code:
You're using <input> the wrong way. You should use a <label> if you want to make the text behind it clickable.
It's setting the enabled attribute, which does not exist. Use disabled instead.
If it would be an attribute, it's value should not be false, use disabled="disabled" or simply disabled without a value.
If checking for someone clicking on a form event that will CHANGE it's value (like check-boxes and radio-buttons), use .change() instead.
I'm not sure what your code is supposed to do. My guess is that you want to disable the input field with class roomNumber once someone selects "Walk in" (and possibly re-enable when deselected). If so, try this code:
HTML:
<form class="type">
<p>
<input type="radio" name="type" checked="checked" id="guest" value="guest" />
<label for="guest">In House</label>
</p>
<p>
<input type="radio" name="type" id="walk_in" value="walk_in" />
<label for="walk_in">Walk in</label>
</p>
<p>
<input type="text" name="roomnumber" class="roomNumber" value="12345" />
</p>
</form>
Javascript:
$("form input:radio").change(function () {
if ($(this).val() == "walk_in") {
// Disable your roomnumber element here
$('.roomNumber').attr('disabled', 'disabled');
} else {
// Re-enable here I guess
$('.roomNumber').removeAttr('disabled');
}
});
I created a fiddle here: http://jsfiddle.net/k28xd/1/

Personally, for me, the best solution for a similar issue was:
HTML
<input type="radio" name="selectAll" value="true" />
<input type="radio" name="selectAll" value="false" />
JQuery
var $selectAll = $( "input:radio[name=selectAll]" );
$selectAll.on( "change", function() {
console.log( "selectAll: " + $(this).val() );
// or
alert( "selectAll: " + $(this).val() );
});
*The event "click" can work in place of "change" as well.
Hope this helps!

A different way
$("#inline_content input[name='type']").change(function () {
if ($(this).val() == "walk_in" && $(this).is(":checked")) {
$('#select-table > .roomNumber').attr('enabled', false);
}
});
Demo - http://jsfiddle.net/cB6xV/

Seems like you're #inline_content isn't there! Remove the jQuery-Selector or check the parent elements, maybe you have a typo or forgot to add the id.
(made you a jsfiddle, works after adding a parent <div id="inline_content">: http://jsfiddle.net/J5HdN/)

put ur js code under the form html or use $(document).ready(function(){}) and try this.
$('#inline_content input[type="radio"]').click(function(){
if($(this).val() == "walk_in"){
alert('ok');
}
});

CheckAll/UncheckAll checkbox with jQuery

I have made a check-box checkall/uncheckall.
HTML
<div> Using Check all function </div>
<div id="selectCheckBox">
<input type="checkbox" class="all" onchange="checkAll('selectCheckBox','all','check','true');" />Select All
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 1
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 2
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 3
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 4
</div>
main.js
function checkAll(parentId,allClass,checkboxClass,allChecked){
checkboxAll = $('#'+parentId+' .'+allClass);
otherCheckBox = $('#'+parentId+' .'+checkboxClass);
checkedCheckBox = otherCheckBox.filter($('input[type=checkbox]:checked'));
if(allChecked=='false'){
if(otherCheckBox.size()==checkedCheckBox.size()){
checkboxAll.attr('checked',true);
}else{
checkboxAll.attr('checked',false);
}
}else{
if(checkboxAll.attr('checked')){
otherCheckBox.attr('checked',true);
}else{
otherCheckBox.attr('checked',false);
}
}
}
It works fine. But get bulky when I have whole lot of checkboxes. I want to do same work by using jQuery rather than putting onchange on each checkbox. I tried different sort of things but couldnot work. I tried following one:
$('.check input[type="checkbox"]').change(function(e){
checkAll('selectCheckBox','all','check','true');
});
to do same work as onchange event but didnot work. Where do I went wrong.

I think you just need this: You do not need to pass all the arguments and have the inline onchange event attached to it. You can simplify your code.
$(function () {
$('input[type="checkbox"]').change(function (e) {
if(this.className == 'all')
{
$('.check').prop('checked', this.checked); //Toggle all checkboxes based on `.all` check box check status
}
else
{
$('.all').prop('checked', $('.check:checked').length == $('.check').length); // toggle all check box based on whether all others are checked or not.
}
});
});
Demo

Your selector is wrong:
.check input[type="checkbox"]
Above selects any input of type checkbox that has the ancestor with class .check. It'll match this:
<div class="check">
<input type="checkbox".../>
</div>
it should be:
input.check[type="checkbox"]

You closed the string here $('.check input[type='checkbox']') instead, you should use double quotes $('.check input[type="checkbox"]')