We Keep Coding

Evaluate sum of values without clicking a button

I really don't know how to program in Javascript, yet I've tried to do some stuff. I have values to be summed if some are selected. The following function does sum operation and show result at once without clicking a button only for checkbox fields, not for the dropdown list and text fields.
However, I need to involve the selected values as well from the dropdown lists and entered both text fields in the same manner of the checkboxes and their immediate responses(output).
I think change method can be used in the same manner.
#Edit:
Sorry, I forgot the tell but, I need to multiply the m2 entered value by before summing with 3134,204499 and Bina Yasi with -566,2202888.
function calcAndShowTotal() {
var total = 55435.04798; // it is constant value which must be the beginning value.
$('#housepriceguesslist :checkbox:checked').each(function() {
total += parseFloat($(this).attr('price')) || 0;
});
$('#total').val(total);
}
$('#housepriceguesslist :checkbox').change(calcAndShowTotal).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="housepriceguesslist">
<select id="ilce">
<option value="0">Choose a state</option>
<option value="63999.50712318567">Adalar</option>
<option value="6259.918435398593">Ataşehir</option>
<option value="46285.35729304834">Beykoz</option>
<option value="54258.92953697798">Kadıköy</option>
<option value="-3500.620905653726">Kartal</option>
<option value="12889.41219909602">Maltepe</option>
<option value="-33711.83156847153">Pendik</option>
<option value="-34577.42485251657">Sancaktepe</option>
<option value="-52183.1608811019">Sultanbeyli</option>
<option value="-34760.71735007784">Tuzla</option>
<option value="-27379.87966213786">Çekmeköy</option>
<option value="-5332.203990418937">Ümraniye</option>
<option value="26485.33532820411">Üsküdar</option>
<option value="-18732.62070553167">Şile</option>
</select>
<select id="odasalon">
<option value="0">Choose room number</option>
<option value="5940.027623576261">1+0</option>
<option value="-1399.625767475593">1+1</option>
<option value="-3033.638999060459">2+1</option>
<option value="11519.83954756076">3+1</option>
<option value="-7018.52116545078">4+1</option>
<option value="-6008.081239150166">5+1</option>
</select>
m2: <input type="text" id="m2" /> Bina Yasi: <input type="text" id="binayasi" />
<br/>
<br/> Features:
<br/>
<br/>
<input type="checkbox" id="Bati" value="Bati" price="-783.4452683566533" /> <label for="Bati">Bati</label>
<br/>
<input type="checkbox" id="Dogu" value="Dogu" price="-4895.732009084263" /> <label for="Dogu">Dogu</label>
<br/>
<input type="checkbox" id="Guney" value="Guney" price="-2599.001349652765" /> <label for="Guney">Guney</label>
<br/>
<input type="checkbox" id="Kuzey" value="Kuzey" price="3832.013070771234" /> <label for="Kuzey">Kuzey</label>
<br/>
<input type="checkbox" id="Amerikan Mutfak" value="Amerikan Mutfak" price="2346.347889828301" /> <label for="Amerikan Mutfak">Amerikan Mutfak</label>
<br/>
<input type="checkbox" id="Dusakabin" value="Dusakabin" price="-176.5092353740256" /> <label for="Dusakabin">Dusakabin</label>
<br/>
<input type="checkbox" id="Akilli Ev" value="Akilli Ev" price="-4756.206384200719" /> <label for="Akilli Ev">Akilli Ev</label>
<br/>
<input type="checkbox" id="Ebeveyn Banyosu" value="Ebeveyn Banyosu" price="10135.50644456019" /> <label for="Ebeveyn Banyosu">Ebeveyn Banyosu</label>
<br/>
<input type="checkbox" id="Kiler" value="Kiler" price="-10693.49979821809" /> <label for="Kiler">Kiler</label>
<br/>
<input type="checkbox" id="Kuvet" value="Kuvet" price="-941.0629741243247" /> <label for="Kuvet">Kuvet</label>
<br/>
<input type="checkbox" id="Parke Zemin" value="Parke Zemin" price="-8453.847199707092" /> <label for="Parke Zemin">Parke Zemin</label>
<br/>
<input type="checkbox" id="Seramik Zemin" value="Seramik Zemin" price="1545.025601000643" /> <label for="Seramik Zemin">Seramik Zemin</label>
<br/>
<input type="checkbox" id="Sauna" value="Sauna" price="8677.708176289747" /> <label for="Sauna">Sauna</label>
<br/>
<input type="checkbox" id="Spor Salonu" value="Spor Salonu" price="1159.884679563385" /> <label for="Spor Salonu">Spor Salonu</label>
<br/>
<input type="checkbox" id="Tenis Kortu" value="Tenis Kortu" price="16065.26794172257" /> <label for="Tenis Kortu">Tenis Kortu</label>
<br/>
</div>
<input type="text" id="total" value="0" />

You can loop over all the <select> boxes and text inputs with:
function calcAndShowTotal() {
var total = 55435.04798; // it is constant value which must be the beginning value.
$('#housepriceguesslist :checkbox:checked').each(function() {
total += parseFloat($(this).attr('price')) || 0;
});
$("#housepriceguesslist select, #housepriceguesslist :text").each(function() {
let multiplier = 1;
if (this.id == "m2") {
multiplier = 3134.204499;
}
else if (this.id == "binayasi") {
multiplier = -566.2202888;
}
if (this.value) {
total += parseFloat(this.value) * multiplier;
}
});
$('#total').val(total);
}
And if you change the checkboxes to use value instead of price, you can do them all in one loop:
function calcAndShowTotal() {
var total = 55435.04798; // it is constant value which must be the beginning value.
$('#housepriceguesslist :checkbox:checked').each(function() {
total += parseFloat($(this).attr('price')) || 0;
});
$("#housepriceguesslist select, #housepriceguesslist :text, #housepriceguesslist :checkbox:checked").each(function() {
let multiplier = 1;
if (this.id == "m2") {
multiplier = 3134.204499;
else if (this.id == "binyasi") {
multiplier = -566.2202888;
}
if (this.value) {
total += parseFloat(this.value) * multiplier;
}
});
$('#total').val(total);
}
And call the function when any of the inputs are changed:
$('#housepriceguesslist input, #housepriceguesslist select').change(calcAndShowTotal).change();

This solution is simple, just the get the list of all the inputs (i.e. checkbox, and dropdown) using the .find() method and the selector 'input:checkbox, input:text, select'. Then verify if each one of these inputs elements has the attribute checked or select for the checkbox and select input types respectively, or it is a multiplier for the text inputs. This verification ca be done inside of the each() method callback. Finally, just convert then the value to a number, using the parseFloat() method and add it to the total accumulator.
Finally, sum the value to the total input. Like this:
let container;
let inputs;
let total;
function calcAndShowTotal() {
let sum = 55435.04798; // it is constant value which must be the beginning value.
let value;
inputs.each(function() {
if ($(this).is('input:checkbox:checked')) {
// If is a checkbox
value = parseFloat($(this).attr('price')) || 0;
sum += value;
} else if ($(this).is('input:text:not(#total)')) {
// If is a text wait until you move to another element
let factor = 1;
if (this.id == 'm2') {
factor = 3134.204499;
} else if (this.id == 'binayasi') {
factor = -566.2202888;
}
value = parseFloat($(this).val()) * factor || 0;
sum += value;
} else if ($(this).is('select')) {
// If is a option from the select element
value = parseFloat($('option:selected', this).val()) || 0;
sum += value;
}
});
total.val(sum);
}
function initHandlers() {
inputs.on('keydown', function(e) {
let focusable, next;
if (e.keyCode == 13) {
focusable = inputs.filter(':visible');
next = focusable.eq(focusable.index(this) + 1);
if (next.length) {
next.focus();
}
return false;
}
});
inputs.change(calcAndShowTotal);
calcAndShowTotal();
}
$(function() {
console.log('ready!');
total = $('#total');
container = $('#housepriceguesslist');
inputs = container.find('input:checkbox, input:text, select');
initHandlers();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="housepriceguesslist">
Total: <input type="text" id="total" value="0" />
<br/>
<br/>
<select id="ilce">
<option value="0">Choose a state</option>
<option value="63999.50712318567">Adalar</option>
<option value="6259.918435398593">Ataşehir</option>
<option value="46285.35729304834">Beykoz</option>
<option value="54258.92953697798">Kadıköy</option>
<option value="-3500.620905653726">Kartal</option>
<option value="12889.41219909602">Maltepe</option>
<option value="-33711.83156847153">Pendik</option>
<option value="-34577.42485251657">Sancaktepe</option>
<option value="-52183.1608811019">Sultanbeyli</option>
<option value="-34760.71735007784">Tuzla</option>
<option value="-27379.87966213786">Çekmeköy</option>
<option value="-5332.203990418937">Ümraniye</option>
<option value="26485.33532820411">Üsküdar</option>
<option value="-18732.62070553167">Şile</option>
</select>
<select id="odasalon">
<option value="0">Choose room number</option>
<option value="5940.027623576261">1+0</option>
<option value="-1399.625767475593">1+1</option>
<option value="-3033.638999060459">2+1</option>
<option value="11519.83954756076">3+1</option>
<option value="-7018.52116545078">4+1</option>
<option value="-6008.081239150166">5+1</option>
</select>
m2: <input type="text" id="m2" />
Bina Yasi: <input type="text" id="binayasi" />
<br/>
<br/> Features:
<br/>
<br/>
<input type="checkbox" id="Bati" value="Bati" price="-783.4452683566533" /> <label for="Bati">Bati</label>
<br/>
<input type="checkbox" id="Dogu" value="Dogu" price="-4895.732009084263" /> <label for="Dogu">Dogu</label>
<br/>
<input type="checkbox" id="Guney" value="Guney" price="-2599.001349652765" /> <label for="Guney">Guney</label>
<br/>
<input type="checkbox" id="Kuzey" value="Kuzey" price="3832.013070771234" /> <label for="Kuzey">Kuzey</label>
<br/>
<input type="checkbox" id="Amerikan Mutfak" value="Amerikan Mutfak" price="2346.347889828301" /> <label for="Amerikan Mutfak">Amerikan Mutfak</label>
<br/>
<input type="checkbox" id="Dusakabin" value="Dusakabin" price="-176.5092353740256" /> <label for="Dusakabin">Dusakabin</label>
<br/>
<input type="checkbox" id="Akilli Ev" value="Akilli Ev" price="-4756.206384200719" /> <label for="Akilli Ev">Akilli Ev</label>
<br/>
<input type="checkbox" id="Ebeveyn Banyosu" value="Ebeveyn Banyosu" price="10135.50644456019" /> <label for="Ebeveyn Banyosu">Ebeveyn Banyosu</label>
<br/>
<input type="checkbox" id="Kiler" value="Kiler" price="-10693.49979821809" /> <label for="Kiler">Kiler</label>
<br/>
<input type="checkbox" id="Kuvet" value="Kuvet" price="-941.0629741243247" /> <label for="Kuvet">Kuvet</label>
<br/>
<input type="checkbox" id="Parke Zemin" value="Parke Zemin" price="-8453.847199707092" /> <label for="Parke Zemin">Parke Zemin</label>
<br/>
<input type="checkbox" id="Seramik Zemin" value="Seramik Zemin" price="1545.025601000643" /> <label for="Seramik Zemin">Seramik Zemin</label>
<br/>
<input type="checkbox" id="Sauna" value="Sauna" price="8677.708176289747" /> <label for="Sauna">Sauna</label>
<br/>
<input type="checkbox" id="Spor Salonu" value="Spor Salonu" price="1159.884679563385" /> <label for="Spor Salonu">Spor Salonu</label>
<br/>
<input type="checkbox" id="Tenis Kortu" value="Tenis Kortu" price="16065.26794172257" /> <label for="Tenis Kortu">Tenis Kortu</label>
<br/>
</div>
Note:
Remember to round the numbers to get more precision. The text modification will apply after you tab, or move to another element. So I added an enter listener so when you press enter is gonna move to the next element like when you press tab. Also, I moved the total to the top so you can see the results in the preview.
Update:
I recommend you to use the $(function(){}); to get the document when is ready. Inside you can assign the values of your elements. I notice that there was a bug in my code whenever ever you uncheck a checked element the Total should be 55435.04798, but it shows the double it is because total is also a text input.

Similar to Barmar's, I added all elements to the .each() loop but also added the .change() handler to all elements:
var context = $('#housepriceguesslist');
var elems = $('input:checkbox, input:text, select', context);
function calcAndShowTotal() {
var total = 55435.04798; // it is constant value which must be the beginning value.
elems.each(function() {
if ( $(this).is('input:checkbox:checked') ) {
total += parseFloat($(this).attr('price')) || 0;
} else if ( $(this).is('#m2') ) {
total += parseFloat($(this).val()) * 3134.204499 || 0;
} else if ( $(this).is('#binayasi') ) {
total += parseFloat($(this).val()) * -566.2202888 || 0;
} else if ( $(this).is('select') ) {
total += parseFloat($('option:selected',this).val()) || 0;
}
});
$('#total').val(total);
}
elems.change(calcAndShowTotal); // handlers
calcAndShowTotal(); // first run
See example here: https://jsfiddle.net/qgvsern4/1/

Put name attribute of all checked checkboxes into array - JavaScript

I have a pizza ordering form that contains checkboxes for toppings. Each new Pizza is an object that is placed into an array. One of the variables inside the pizza object is toppings. I would like the toppingsvariable to contain an array of all the checkboxes name attribute. How do I do that?
I have made an attempt, but it doesn't seem to work:
HTML:
<fieldset>
<form class="pure-form">
<legend>
<center><label><b>Name: </b></label>
<select class="nameSelection" name="nameSelectionPizza">
<option value="0">Please Select:</option>
</select></center>
</legend>
<br>
<label><b>Pizza Type: </b></label>
<select class="pizza" name="firstMenu" disabled>
<option data-price="0">Please Select:</option>
<option name="margarita">Margarita</option>
<option name="deep-pan">Deep Pan</option>
<option name="stuffed-crust">Stuffed Crust</option>
</select>
<span style="float:right">
<label><b>Pizza Size: </b></label>
<select class="pizzaSize" disabled>
<option data-price="0">Please Select:</option>
<option name="e-small" data-price="4.99">Extra Small - £4.99</option>
<option name="small" data-price="5.99">Small - £5.99</option>
<option name="medium" data-price="6.99">Medium - £6.99</option>
<option name="large" data-price="8.99">Large - £8.99</option>
<option name="e-large" data-price="9.99">Extra Large - £9.99</option>
<option name="f-size" data-price="10.99">Family Size - £10.99</option>
</select>
</span>
</form>
</fieldset>
<fieldset style = "border-top:0px">
<form class="pure-form">
<legend><b>Toppings (99p Each): </b></legend>
<input type="checkbox" class="toppings" name="onions" disabled>Onions</input>
<input type="checkbox" class="toppings" name="mushrooms" disabled>Mushrooms</input>
<input type="checkbox" class="toppings" name="peppers" disabled>Peppers</input>
<input type="checkbox" class="toppings" name="olives" disabled>Olives</input>
<input type="checkbox" class="toppings" name="garlic" disabled> Garlic</input>
<input type="checkbox" class="toppings" name="peperoni" disabled>Peperoni</input>
<input type="checkbox" class="toppings" name="cheese" disabled>Pesto</input>
</form>
</fieldset>
JS:
var pizzaArray = new Array();
function pizza(number, pizzaCost, toppingCost, name, pizzaType, pizzaSize, toppings) {
this.pizzaNumber = number;
this.pizzaCost = pizzaCost;
this.toppingCost = toppingCost;
this.name = name;
this.type = pizzaType;
this.size = pizzaSize;
this.toppings = toppings;
}
var pizzaCounter = 1;
pizzaArray.push(new pizza(pizzaCounter, 0.00, 0.00, "", "", "", ""));
$(document).on("change","input[type='checkbox']", function() {
var topArray = $(":checkbox:checked").next('name').map(function(){
return $(this).attr('name');
}).get();
var checked = $(this).parent().find(":checkbox:checked").length;
var toppingCost = (0.99 * checked);
var form = $(this).closest('div').attr("id");
var formID = form.replace( /^\D+/g, '');
for(var i = 0; i < pizzaArray.length; i++) {
if (pizzaArray[i].pizzaNumber == formID) {
pizzaArray[i].toppingCost = toppingCost;
pizzaArray[i].toppings = topArray;
alert((pizzaArray[i].toppings).toString());
calculateCost();
}
}
});

The error is in your use of next('name'). Remove that and your code should work fine:
var topArray = $(".toppings:checked").map(function(){
return this.name;
}).get();
Note that I changed the selector to use the class of the checkboxes to save any issues if you add further checkboxes to the page in future. I also used the name property directly from the DOMElement to save creating a needless jQuery object.

How to get a value and label in a textbox

function radioVal(){
//var radVal = document.mainForm.rads.value;
var radVal = document.getElementsByName("rads").value;
result.innerHTML = 'You selected: '+radVal;
}
<div class="pres">
<input type="radio" id="radio01" name="rads" value="10" checked />
<label for="radio01" class="dis"><span>1 time service</span></label>
</div>
<div class="pres">
<input type="radio" id="radio02" name="rads" value="20" />
<label for="radio02" class="dis"><span>Every week</span></label>
</div>
<div class="pres">
<input type="radio" id="radio03" name="rads" value="15" />
<label for="radio03" class="dis"><span>Every 2 weeks </span></label>
</div>
<div class="pres">
<input type="radio" id="radio04" name="rads" value="10" />
<label for="radio04" class="dis"><span>Every 4 weeks</span></label>
</div>
<input type="text" value="" id="result" name="perce" />
<input type="text" value="" id="txtservV" name="servicename" />
<input type="text" value="" id="final_pay" name="final_pay" />
Hello i am using this function to get the value of a selected radio button in a textfield name perce and its value in a field name servicename any one help me in it to sourt it out. I am using this function in doucument.ready function.

Use Document.getElementsByName function which returns array of elements (or better collection, array-like object), so that you can access value of input by index (0 in your case):
var perceVal = document.getElementsByName("perce")[0].value
In case of radio buttons you have to iterate through elements and find which one is checked:
var rads = document.getElementsByName("rads");
var radsValue;
for (var i = 0; i < rads.length; i++) {
if (rads[i].checked) {
radsValue = rads[i].value // here is checked radio
break;
}
}

How can i convert checkboxes into dropdown list?

I have few checkboxes and I want to convert them into dropdown list. I tried something but don't know at the end what to do?
<form id="form-wysija-2" class="widget_wysija" action="#wysija" method="post">
<p class="wysija-checkbox-label">Select list(s):</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="1" name="wysija[user_list][list_id][]">
General Antiques
</label>
</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="3" name="wysija[user_list][list_id][]">
Antique & Collectible Tools
</label>
</p>
</form>
and i tried following jQuery to convert these checkboxes into dropdown list. but don't getting to how to done this successfully.
jQuery(document).ready(function($){
var extra, checkBoxesName,
checkBoxlabel,
checkBoxes = $('.wysija-checkbox-paragraph');
var checkBoxesLabel = $('.wysija-checkbox-label');
checkBoxesName = checkBoxes.find('input').prop('name');
checkBoxlabel = checkBoxes.find('label').text();
checkBoxesLabel.append('<select name="'+checkBoxesName+'">'+extra+'</select>');
$('.wysija-checkbox-paragraph').each(function(n){
var dataText = $(this).find('label').text();
$('select[name='+checkBoxesName+']').append('<option value="'+n+'">'+dataText+'</option>');
});
//checkBoxes.remove();
});

Try this:
var checkBoxes = $('.wysija-checkbox-paragraph'),
checkBoxesLabel = $('.wysija-checkbox-label'),
checkBoxesName = checkBoxes.find('input').prop('name')
$select = $('<select name="' + checkBoxesName + '"></select>').appendTo(checkBoxesLabel);
checkBoxes.each(function (n) {
var dataText = $(this).find('label').text();
var dataValue = $(this).find('input').val();
$select.append('<option value="' + dataValue + '">' + dataText + '</option>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form-wysija-2" class="widget_wysija" action="#wysija" method="post">
<p class="wysija-checkbox-label">Select list(s):</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="1" name="wysija[user_list][list_id][]" /> General Antiques
</label>
</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="3" name="wysija[user_list][list_id][]" /> Antique & Collectible Tools
</label>
</p>
</form>
Note, that since checkboxes allow to select multiple values, you might want to add multiple attribute to selectbox, in order to allow the same behavior.

jQuery(document).ready(function($){
var extra, checkBoxesName,
checkBoxlabel,
checkBoxes = $('.wysija-checkbox-paragraph');
var checkBoxesLabel = $('.wysija-checkbox-label');
checkBoxesName = checkBoxes.find('input').prop('name');
checkBoxlabel = checkBoxes.find('label').text();
checkBoxesLabel.append('<select name="'+checkBoxesName+'">'+extra+'</select>');
$('.wysija-checkbox-paragraph').each(function(n){
var dataText = $(this).find('label').text();
$('.wysija-checkbox-paragraph').append('<select name="'+checkBoxesName+']" > <option value="'+n+'">'+dataText+'</option></select>');
});
//checkBoxes.remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form-wysija-2" class="widget_wysija" action="#wysija" method="post">
<p class="wysija-checkbox-label">Select list(s):</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="1" name="wysija[user_list][list_id][]">
General Antiques
</label>
</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="3" name="wysija[user_list][list_id][]">
Antique & Collectible Tools
</label>
</p>
</form>

one radio button will be selected at a time

I have a jsp page which shows the radio button content(on clicking it,select box will appear ) of a table.But here I'm unable select one radio button(with select box) at a time.I'm showing you the code.
<table>
<tr>
<td><input type="radio" onclick="document.getElementById('select1000').style.display=(this.checked)?'inline':'none';" name="license" value="1000"> 1-1000</td>
<td>
<div id="select1000" style="display: none">
<select id="">
<option test="l25" value="25">25</option>
<option test="l100" value="100">100</option>
</select>
</div>
</td>
</tr>
<tr>
<td><input type="radio" onclick="document.getElementById('select3000').style.display=(this.checked)?'inline':'none';" name="license" value=""> 1001-3000</td>
<td>
<div id="select3000" style="display: none">
<select id="">
<option test="l1001" value="1001">1001</option>
<option test="l1075" value="1075">1075</option>
</select>
</div>
</td>
</tr>
<tr>
<td><input type="radio" onclick="document.getElementById('select5000').style.display=(this.checked)?'inline':'none';" name="license" value=""> 3001-5000</td>
<td>
<div id="select5000" style="display: none">
<select id="">
<option test="l3001" value="3001">3001</option>
<option test="l3075" value="3075">3075</option>
</select>
</div>
</td>
</tr>
</table>
Where I am going wrong ..... any valuable input will be appreciated.

Could you try to change the input element's name:
<td><input type="radio" onclick="change(this, 'select1000')" name="license[1]" value="1000"> 1-1000</td>
and create a function:
function change(t, div){
var ele = document.getElementsByTagName("div");
var radios = document.getElementsByName("license[1]");
for (var i = 0, radio; radio = radios[i]; i++) {
if (!radio.checked) {
if(ele[i].id != div){
ele[i].style.display = 'none';
}
}else{
document.getElementById(div).style.display='inline';
}
}
}
I'm not sure if this is what you want, but HERE you can see an example.

You just need to change your parenthesis:
document.getElementById('select5000').style.display = (this.checked ? 'inline':'none');

Here is your inputs
<input type="radio" onchange="hideElem(this,'select1000')" name="license" value="1000">
<input type="radio" onchange="hideElem(this,'select3000')" name="license" value="">
<input type="radio" onchange="hideElem(this,'select5000')" name="license" value="">
and the function:
<script type="text/javascript">
function hideElem(self,divId){
var divs = ['select1000','select3000','select5000'];
if(self.checked){
for(var i=0; i < divs.length; i++){
if (divs[i] === divId){
document.getElementById(divs[i]).style.display = 'inline';
} else{
document.getElementById(divs[i]).style.display = 'none';
}
}
}
}
</script>
DEMO

because when you click an input(radio), this is the current radio and you don't know the previous one, you need to record the previous select, use jQuery, code like:
(function () {
var oldSel = null;
$('input:radio').click(function () {
// get the current select
var sel = $('#select' + this.value);
// show current select
sel.show();
// if old select is exist, hide it
oldSel && oldSel.hide();
// store the current select when radio on click
oldSel = sel;
})​;
})();​
see the demo