Develop Reference

How to get all checkbox values and put value of each one to a specific text input

I have a checkbox with (20) choices and also (20) input fields , i need : when user choose one or more option, put value of checked checkbox in a separate input field else put (0)
I tried the following and it working when user chose only one option.
$(".cont").change(function() {
if($('.cont :checked').val() == "1") {
$('#q1').val('1');
}else{
$('#q1').val('0');
}
if($('.cont :checked').val() == "2") {
$('#q2').val('2');
}else{
$('#q2').val('0');
}
if($('.cont :checked').val() == "3") {
$('#q1').val('3');
}else{
$('#q3').val('0');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<input type="checkbox" value="1">
<input type="checkbox" value="2">
<input type="checkbox" value="3">
</div>
<input id="q1" type="text" >
<input id="q2" type="text" >
<input id="q3" type="text" >

You can combine the uses of .val() and .is(':checked').
$('#q' + $(this).val()) will select the correct text input.
$(this).is(':checked') ? $(this).val() : 0 will put your checkbox value inside your input if checked, 0 if not.
$('.cont input[type="checkbox"]').change(function() {
$('#q' + $(this).val()).val($(this).is(':checked') ? $(this).val() : 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<input type="checkbox" value="1">
<input type="checkbox" value="2">
<input type="checkbox" value="3">
</div>
<input id="q1" type="text">
<input id="q2" type="text">
<input id="q3" type="text">

You need to follow these steps and use much more managed code to achieve this:
Detect change on checkbox checked/unchecked
Get the value of the checkbox and since the id of the input element
is prefixed with q and the value of the checkbox, get the id
first
Use this id to fill the value in the input element.
In addition, you can check for uncheck of the checkbox and substitute
the previous value with null.
$('input[type="checkbox"]').change(function() {
var checkedValue = $(this).val();
var inputElemId = "q"+checkedValue;
if($(this).is(':checked')){
$('#'+inputElemId).val(checkedValue);
} else {
$('#'+inputElemId).val(null);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<input type="checkbox" value="1">
<input type="checkbox" value="2">
<input type="checkbox" value="3">
</div>
<input id="q1" type="text" >
<input id="q2" type="text" >
<input id="q3" type="text" >

Clear the radio button value when user types in a textbox using JavaScript

I am trying to clear the radio button value when the user types something on the textbox.
When the user selects the amount from radio button that value appears in the textbox and if the user wants to enter the different amount the radio button value has to get cleared.
How can I do it?
Here is the code:
<input type="radio" name="a1" value="1000" <?php if ($a1 == '1000') { echo "checked"; } ?>><label>₹1000</label><br/>
<input type="radio" name="a1" value="2000" <?php if ($a1 == '2000') { echo "checked"; } ?> ><label>₹ 2000</label><br/>
<input type="radio" name="a1" value="12000" <?php if ($a1 == '12000') { echo "checked"; } ?> ><label>₹12000</label><br/>
<input type="radio" name="a1" value="12000" <?php if ($a1 == '10000 ') { echo "checked"; } ?>><label>₹ 10000 -Skilling a person</label>
<script>
$('input[type=radio]').click(function(e) {//jQuery works on clicking radio box
var value = $(this).val(); //Get the clicked checkbox value
var check = $(this); //Get the clicked checkbox properties (like ID, value, class etc)
$('[name="amount"]').val(value);
});
</script>
<div>
<label>My Contribution</label>
<input type="text" name="amount" id="amount" value="<?php echo $amount; ?>" placeholder="₹ Any Amount" required="">
</div>

<input type="text" name="amount" id="amount" value="<?php echo $amount; ?>" placeholder="₹ Any Amount" required="" onClick="uncheckRadio();">
<script>
function uncheckRadio(){
$('input[name="a1"]').removeAttr("checked");
}
</script>

$('input[name=a1]').prop('checked',false);

As you have not mentioned the jquery version so check the following:
In versions of jQuery before 1.6 use:
$('input[name="correctAnswer"]').attr('checked', false);
In versions of jQuery after 1.6 you should use:
$('input[name="correctAnswer"]').prop('checked', false);
Check the following example:
$(function(){
$('#button').click(function(){
$('input[type="radio"]').prop('checked', false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="radio" checked>Yes</label>
<label><input type="radio">No</label>
<input type="button" id="button" value="Clear">

Hope this helps you.
$('input[type=radio]').click(function(e) {
$('#amount').val($(this).val());
});
$('#amount').keyup(function(e) {
$('input[type="radio"]').prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="radio" name="a1" value="1000">
<label>₹ 1000</label><br/>
<input type="radio" name="a1" value="2000">
<label>₹ 2000</label><br/>
<input type="radio" name="a1" value="12000">
<label>₹ 12000</label><br/>
<input type="radio" name="a1" value="12000">
<label>₹ 10000 -Skilling a person</label>
<div>
<label>My Contribution</label>
<input type="text" name="amount" id="amount" value="" placeholder="₹ Any Amount" required="">
</div>

Create a function in jquery , select($) input field and give it a property removeattr checked! .removeAttr('checked')

Here's a fiddle for the solution.
//to set input vaue from selected radio selection
$("input[name=amount]").change(function(){
$('#amount').val($(this).val());
});
//to reset radio selection
$('#amount').keyup(function() {
$("input[name=amount]").prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="amount" type="radio" value="100"> 100
<input name="amount" type="radio" value="200"> 200
<input name="amount" type="radio" value="300"> 300
<input name="amount" type="radio" value="400"> 400
<br><br>
Amount: <input type="text" id="amount">

I think it's better and nice way :) without jquery)
var selectVal;
document.addEventListener('click',function(event){
if(event.target.name === 'a1'){
selectVal = event.target.value;
document.querySelector('#amount').value = selectVal;
}
})
document.addEventListener('input', function(event){
if(event.target.name === 'amount' && event.target.value !== selectVal){
var checkedRadio = document.querySelector('input[type="radio"]:checked');
if(checkedRadio) {checkedRadio.checked = false;}
}
})

You could try something like this on the change event of the textbox
$('[name="amount"]').on('change',function(){
var radioValue = 0;
if($('input[type=radio]').is(':checked') == true)
{
radioValue = $('input[type=radio]:checked').val();
}
if(radioValue !== $(this).val()){
$('input[type=radio]').removeAttr('checked');
}
});

Create and Delete input type text if the selected input type checkbox

I have a problem, I need to create or delete as appropriate, a Input type text if a Input type checkbox is selected.
At the moment I can only create the input text, but I manage to find the solution to clear if the checkbox is unchecked.
My HTML code:
<form role="form" action="" method="POST">
<input type="checkbox" class="myCheckBox" name="category[]" value="1">
<input type="checkbox" class="myCheckBox" name="category[]" value="2">
<input type="checkbox" class="myCheckBox" name="category[]" value="3">
<input type="checkbox" class="myCheckBox" name="category[]" value="4">
<input type="checkbox" class="myCheckBox" name="category[]" value="5">
<div class="inputCreate"></div>
<input type="submit" name="" value="Send yours categories">
</form>
And the jQuery code is as follows
var wrapper = $(".inputCreate");
$('.myCheckBox').click(function() {
if ($(this).is(':checked')) {
$(wrapper).append('<input type="text" name="mytext[]" placeholder="">');
}
});
As I can do that by unchecking the checkbox, also delete the input text field ?.
Solution to this problem:
var wrapper = $(".inputCreate");
$(".myCheckBox").change( function(){
if($(this).is(':checked')){
$(wrapper).append('<input type="text" name="mytext[]" placeholder="">');
}
else{
$('.inputCreate :last-child').remove();
}
});
Greeting From Chile.

This should be exactly what you want:
Working Fiddle
var wrapper = $(".inputCreate");
$(".myCheckBox").change( function(){
if($(this).is(':checked')){
$(wrapper).append('<input type="text" name="mytext[]" placeholder="'+$(this).val()+'">');
}
else{
$('.inputCreate :last-child').remove();
}
});

Try this. I assume you want to remove the text box if checkbox unchecked.
$('.myCheckBox').click(function() {
if ($(this).is(':checked')) {
$(wrapper).append('<input type="text" name="mytext[]" placeholder="">');
}else{
$(wrapper).find('input').remove();
}
});

How to toggle div visibility using radio buttons?

I'm working on a project in which I have to toggle the visibility of a <div>.
I've got the following code:
<input type="radio" name="type" value="1"> Personal
<input type="radio" name="type" value="2"> Business
<div class="business-fields">
<input type="text" name="company-name">
<input type="text" name="vat-number">
</div>
I would like to togle the business-fields div. So, if none of the radio buttons, or the 'personal' radio button is selected: The div should be hidden. If the 'business' radio button is selected, I want it to show.
Currently, I am using this code:
$("input[name='type']").click(function() {
var status = $(this).val();
if (status == 2) {
$(".business-fields").show();
} else {
$(".business-fields").hide();
}
});
However, I was wondering if I can do this using the .toggle() function.

I usually tend not to use JS if possible, therefore here comes a HTML+CSS way approach.
.bussines-type .business-fields {
display: none;
}
.bussines-type input[value="2"]:checked ~ .business-fields {
display: block;
}
<div class="bussines-type">
<input id="bt1" type="radio" name="type" value="1">
<label for="bt1"> Personal</label>
<input id="bt2" type="radio" name="type" value="2">
<label for="bt2"> Business</label>
<div class="business-fields">
<input type="text" placeholder="Company name" name="company-name">
<input type="text" placeholder="Vat number" name="vat-number">
</div>
</div>
The ~ stands for any siblings, that are after the element we defined before the ~ sign.

I'd suggest using the change event, and supplying a Boolean switch to the toggle() method, which will show the jQuery collection of elements if the switch evaluates to true, and hide them if it evaluates to false:
// select the relevant <input> elements, and using on() to bind a change event-handler:
$('input[name="type"]').on('change', function() {
// this, in the anonymous function, refers to the changed-<input>:
// select the element(s) you want to show/hide:
$('.business-fields')
// pass a Boolean to the method, if the numeric-value of the changed-<input>
// is exactly equal to 2 and that <input> is checked, the .business-fields
// will be shown:
.toggle(+this.value === 2 && this.checked);
// trigger the change event, to show/hide the .business-fields element(s) on
// page-load:
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="radio" name="type" value="1">Personal</label>
<label>
<input type="radio" name="type" value="2">Business</label>
<div class="business-fields">
<input type="text" name="company-name">
<input type="text" name="vat-number">
</div>
Incidentally, note I've also wrapped the associated text, to indicate the radio-button's purpose, inside of a <label> element to directly associate that text with the <input>, so clicking the text checks the <input> automatically.
References:
change().
on().
toggle().

JS Fiddle
Try this one
<input type="radio" name="type" value="1" checked ="true"> Personal
<input type="radio" name="type" value="2"> Business
<div class="business-fields">
<input type="text" name="company-name">
<input type="text" name="vat-number">
</div>
.business-fields{
display: none;
}
$("input[name='type']").change(function() {
$(".business-fields").toggle();
});

You may use like this:
$("input[name='type']").change(function() {
var status = $(this).val();
if (status != 2) {
$(".business-fields").hide();
} else {
$(".business-fields").show();
}
});

.show and .hide are pretty slow.
https://twitter.com/paul_irish/status/564443848613847040
It's better to toggle a css class on and off with javascript. Set the css of the class to {visibility: hidden} or {display: none}

use the below code
<script>
$(function(){
$(":radio[value=1]").click(function(){
var isVisible = $( ".business-fields" ).is( ":visible" );
if(isVisible==true)
$('.business-fields').toggle();
});
$(":radio[value=2]").click(function(){
var isVisible = $( ".business-fields" ).is( ":visible" );
if(isVisible==false)
$('.business-fields').toggle();
});
});
</script>
AND HTML is-
<input name="type" type="radio" value="1" >Personal
<input type="radio" name="type" value="2" checked="checked"> Business
<div class="business-fields">
<input type="text" name="company-name">
<input type="text" name="vat-number">
</div>

Possibly a more elegant solution, It's a bit more readable in my opinion, and and as #Ollie_W points out it might be more performant that toggle (show/hide).
$('input[name="type"]').on('change', function(event) {
var radioButton = $(event.currentTarget),
isBusiness = radioButton.val() === 'business' && radioButton.prop('checked');
$('.business-fields').toggleClass('hidden', !isBusiness);
}).change();
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="radio" name="type" value="personal">Personal</label>
<label>
<input type="radio" name="type" value="business">Business</label>
<div class="business-fields hidden">
<input type="text" name="company-name">
<input type="text" name="vat-number">
</div>

Hide/display of 3 textboxes on selection of radio button

I have 2 radio buttons. On selection of one I want to display 3 text boxes and hide it on selection of other.
Here is the code.
These are my 2 radio buttons.
<input type="radio" name="type"> Fresher
<input type="radio" name="type"> Experienced
On click of radio button experienced I want to display these 3 text box.
Company Name: <input type="text" hidden="true"/> <br/>
Designation: <input type="text" hidden="true"/> <br/>
Year_of_Experience: <input type="text" hidden="true"/> <br/>
Please help me out with javascript for this as new to it.

You could do this as follows. First change your HTML to this:
<input type="radio" name="type" value="Fresher"> Fresher
<input type="radio" name="type" value="Experienced"> Experienced
<div id="textboxes" style="display: none">
Company Name: <input type="text" hidden="true"/>
Designation: <input type="text" hidden="true"/>
Year_of_Experience: <input type="text" hidden="true"/>
</div>
What this code adds to your code is to have a value for the radio buttons. This allows us to make a selection based on which radio button was selected. Secondly, the input fields are grouped together in a <div> to allow for easy hiding of the three input fields. After you have modifief your HTML as such, include jQuery on your website and use this code:
$(function() {
$('input[name="type"]').on('click', function() {
if ($(this).val() == 'Experienced') {
$('#textboxes').show();
}
else {
$('#textboxes').hide();
}
});
});
You can see how this works using this JSFiddle: http://jsfiddle.net/pHsyj/

This is the best example.Try something like this.,this is a sort of example
$("input[type='radio']").change(function(){
if($(this).val()=="other")
{
$("#otherAnswer").show();
}
else
{
$("#otherAnswer").hide();
}
});
http://jsfiddle.net/Wc2GS/8/
I guess this would solve your probs

<input type="radio" name="type" id='frsradio'> Fresher
<input type="radio" name="type" id='expradio'> Experienced <br>
<input type="text" class='txbx' hidden="true"/> <br/>
<input type="text" class='txbx' hidden="true"/> <br/>
<input type="text" class='txbx' hidden="true"/> <br/>
$(function() {
$('#expradio').click(function() {
$('.txbx').attr('hidden',false);
});
$('#frsradio').click(function() {
$('.txbx').attr('hidden',true);
});
});
WORKING jsfiddle

See there is no unique identity available for your html elements, i just given this code by thinking in a generic manner.
Try,
$('input[name="type"]:eq(1)').change(function(){
$('input[type="text"]').toggle(this.checked);
});

<input type="radio" name="type" onClick ="radio"> Fresher
<input type="radio" name="type" onClick ="radio"> Experienced
on click of radio button experienced i want to display these 3 text box.
<input type="text" hidden="true" class="text"/> <br/>
<input type="text" hidden="true" class="text"/> <br/>
<input type="text" hidden="true" class="text"/> <br/>
and javascript:-
<script>
function radio()
{
var result = document.getElementsByClassName('text'").style.display="none";
}
</script>

Try this
<input type="radio" name="type" value="fresher"> Fresher
<input type="radio" name="type" value="exp"> Experienced
<br/>
<input class="box" type="text" hidden="true"/> <br/>
<input class="box" type="text" hidden="true"/> <br/>
<input class="box" type="text" hidden="true"/> <br/>
Script
$("input[type='radio']").on('change',function(){
if($(this).val() == "exp")
$('.box').show('slow');
else
$('.box').hide();
});
DEMO

Try this....
<input type="radio" name="type" id="fresh"> Fresher
<input type="radio" name="type" id="exp"> Experienced
<input type="text" class="hid" hidden="true"/> <br/>
<input type="text" class="hid" hidden="true"/> <br/>
<input type="text" class="hid" hidden="true"/> <br/>
$("#fresh").change(function(){
$('.hid').css("style","display:none");
});
$("#exp").change(function(){
$('.hid').css("style","display:block");
});

For default hide the text boxes In OnRender Complete Method you need hide the three textbox for that you put the below code.
$("#textbox 1").hide();
$("#textbox 2").hide();
$("#textbox 3").hide();
You need to write the code in Radio button on change.
Using the Id get the value of radio button
var val=$('#radioId').val;
if(val=='Fresher')
{
$("#textbox 1").show();
$("#textbox 2").show();
$("#textbox 3").show();
}
else if (val=='Experienced'){
$("#textbox 1").hide();
$("#textbox 2").hide();
$("#textbox 3").hide();
}