I have trouble to create a script that deselect a chebock when the other on the same line is selected
function uncheck1(){
document.getElementById("check1").checked = true;
document.getElementById("check2").checked = false;
document.getElementById("select").disabled = true;
}
function uncheck2(){
document.getElementById("check1").checked = false;
document.getElementById("check2").checked = true;
document.getElementById("select").disabled = false;
}
<form name="form" action="action.php" method="post">
<table>
<tr>
<td>
<input type="hidden" value="Carrizo J." name="player[]" />
</td>
<td>
<label>Carrizo J.</label>
</td>
<td>
<input id="check1" onclick="uncheck1()" type="checkbox" name="titolare[]" value="0" checked="" />
</td>
<td>
<input id="check2" onclick="uncheck2()" type="checkbox" name="titolare[]" value="1" />
</td>
<td>
<select id="select" name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="hidden" value="Handanovic S." name="player[]" />
</td>
<td>
<label>Handanovic S.</label>
</td>
<td>
<input id="check1" onclick="uncheck1()" type="checkbox" name="titolare[]" value="0" checked="" />
</td>
<td>
<input id="check2" onclick="uncheck2()" type="checkbox" name="titolare[]" value="1" />
</td>
<td>
<select id="select" name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</table>
</form>
As well as, obviusly, it works only the first line.
If I check the right one, the left one is unchecked and the select is enabled.
Then if I check the left one, the right one is unchecked and select is disabled.
Is there a way to be able to do the same things to other 24 lines, without having to write 2 functions for each?
Try this code
window.onload = function() { // when page loaded
var checks = document.querySelectorAll("input[name='titolare[]']");
for (var i = 0; i < checks.length; i++) { // assign to each checkbox
checks[i].onclick = function() {
var row = this.parentElement.parentElement, // the TR
checks = row.querySelectorAll("input[type=checkbox]"), // All checkboxes
sel = row.querySelector("select"); // the select in the row
sel.disabled = this.value == "0"; // whatever you clicked
checks[0].checked = this.value == "0";
checks[1].checked = this.value == "1";
}
}
}
<form name="form" action="action.php" method="post">
<table>
<tr>
<td>
<input type="hidden" value="Carrizo J." name="player[]" />
</td>
<td>
<label>Carrizo J.</label>
</td>
<td>
<input id="check1" type="checkbox" name="titolare[]" value="0" checked="" />
</td>
<td>
<input id="check2" type="checkbox" name="titolare[]" value="1" />
</td>
<td>
<select id="select" name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="hidden" value="Handanovic S." name="player[]" />
</td>
<td>
<label>Handanovic S.</label>
</td>
<td>
<input id="check1" type="checkbox" name="titolare[]" value="0" checked="" />
</td>
<td>
<input id="check2" type="checkbox" name="titolare[]" value="1" />
</td>
<td>
<select id="select" name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</table>
</form>
You can replace the checkboxes with radio buttons but need to name each pair separately, e.g. using the name in the label. You can keep the existing scheme of checkboxes if you are sure the script will run on the client.
One approach is to dynamically add the click listeners and at the same time, add an index to each checkbox using a data- attribute. When a checkbox with an even index is clicked, uncheck the next odd one. If one with an odd index is clicked, uncheck the previous even one.
A similar scheme can be used for the selects, except you don't need a data- attribute as long as there are only selects matched to checkbox pairs. I've slimmed down the HTML a bit…
E.g.
function updateSelect(){
var idx = this.dataset.index;
// Uncheck related checkbox. If this one's index
// is even, uncheck next, otherwise previous
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes[idx % 2? idx - 1 : +idx +1 ].checked = false;
// Get the select elements
var selects = document.querySelectorAll('select');
// Find related select based on checkbox index
var selIdx = Math.floor(idx/2);
// Disable based on whether related checkbox index is odd or even
selects[selIdx].disabled = !(idx%2);
}
window.onload = function(){
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
[].forEach.call(checkboxes,function(cb, idx) {
cb.addEventListener('click', updateSelect, false);
// Add in index to each checkbox so it's easy to find the previous or next
cb.dataset.index = idx;
})
}
<form name="form">
<table>
<tr>
<td><input type="hidden" value="Carrizo J." name="player[]">
<td><label>Carrizo J.</label>
<td><input type="checkbox" name="titolare[]" value="0" checked>
<td><input type="checkbox" name="titolare[]" value="1">
<td><select name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
<tr>
<td><input type="hidden" value="Handanovic S." name="player[]">
<td><label>Handanovic S.</label>
<td><input type="checkbox" name="titolare[]" value="0" checked>
<td><input type="checkbox" name="titolare[]" value="1">
<td><select name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
</table>
</form>
Note that NodeLists are now iterable, so you in some hosts instead of:
[].forEach.call(checkboxes, function(checkbox, index){...})
you could do:
checkboxes.forEach(function(checkbox, index){...})
But support may be lacking in many browsers in use (for the time being).
I believe this is pretty much what you're looking for, and I think the changes are self-explanatory:
function checkChange(elem) {
var elemRoot = elem.parentNode.parentNode;
elemRoot.querySelectorAll("select[name='ordine[]']")[0].disabled = !elemRoot.getElementsByClassName('memberRadio2')[0].checked;
}
<form name="form" action="action.php" method="post">
<table>
<tr>
<td>
<input type="hidden" value="Carrizo J." name="player[]" />
</td>
<td>
<label for="titolare1">Carrizo J.</label>
</td>
<td>
<input onclick="checkChange(this)" type="radio" name="titolare1" value="0" checked="" />
</td>
<td>
<input onclick="checkChange(this)" type="radio" name="titolare1" value="1" class="memberRadio2" />
</td>
<td>
<select name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="hidden" value="Handanovic S." name="player[]" />
</td>
<td>
<label for="titolare2">Handanovic S.</label>
</td>
<td>
<input onclick="checkChange(this)" type="radio" name="titolare2" value="0" checked="" />
</td>
<td>
<input onclick="checkChange(this)" type="radio" name="titolare2" value="1" class="memberRadio2" />
</td>
<td>
<select name="ordine[]" disabled>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</table>
</form>
Note: You will need to change the logic on the server side to make use of the multiple radio values (indexed using separate names).
Related
I'm trying to use/adapt an existing script to show/hide a hierarchical series of radio buttons, based on selection. Please see the code below. The problem is that the 2nd-level radio button disappears when a selection is made for the 3rd-level radio button. It seems that the culprit is, $(".opthide").not(targetBox).hide(); but I'm unsure how to restrict hiding to related elements.
$(document).ready(function() {
$('input[name="insv_sts5"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".opthide").not(targetBox).hide();
$(targetBox).show();
});
});
$(document).ready(function() {
$('input[name="insv_sts6"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".opthide").not(targetBox).hide();
$(targetBox).show();
});
});
$(document).ready(function() {
$('input[name="insv_sts9"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".opthide").not(targetBox).hide();
$(targetBox).show();
});
});
.opthide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post">
<table cellpadding="5" cellspacing="5">
<tr>
<th scope="col">Level</th>
<th scope="col">Question</th>
<th scope="col">Answer</th>
</tr>
<tr>
<td>1</td>
<td>Indicate what kind of pet you have: </td>
<td>
<label>
<input type="radio" name="insv_sts5" value="6" id="insv_sts_15"> Dog
</label>
<label>
<input type="radio" name="insv_sts5" value="9" id="insv_sts_15"> Cat
</label>
<br />
</td>
</tr>
<tr class="6 opthide">
<td>2a</td>
<td>Is your dog a beagle? </td>
<td>
<label>
<input type="radio" name="insv_sts6" value="7" id="insv_sts_16"> Yes
</label>
<label>
<input type="radio" name="insv_sts6" value="8" id="insv_sts_16"> No
</label>
<br />
</td>
</tr>
<tr class="7 opthide">
<td>3a</td>
<td>Is your beagle AKC Registered?</td>
<td>
<label>
<input type="radio" name="insv_sts7" value="1" id="insv_sts_17"> Yes
</label>
<label>
<input type="radio" name="insv_sts7" value="0" id="insv_sts_07"> No
</label>
</td>
</tr>
<tr class="8 opthide">
<td>3b</td>
<td>Is your dog a German Shepherd?</td>
<td>
<label>
<input type="radio" name="insv_sts8" value="1" id="insv_sts_18"> Yes
</label>
<label>
<input type="radio" name="insv_sts8" value="0" id="insv_sts_08"> No
</label>
</td>
</tr>
<tr class="9 opthide">
<td>2b</td>
<td>Is your cat a Siamese? </td>
<td>
<label>
<input type="radio" name="insv_sts9" value="10" id="insv_sts_19"> Yes
</label>
<label>
<input type="radio" name="insv_sts9" value="11" id="insv_sts_19"> No
</label>
</td>
</tr>
<tr class="10 opthide">
<td>3c</td>
<td>Is your Siamese a blue seal? </td>
<td>
<label>
<input type="radio" name="insv_sts10" value="1" id="insv_sts_110"> Yes
</label>
<label>
<input type="radio" name="insv_sts10" value="0" id="insv_sts_010"> No
</label>
</td>
</tr>
<tr class="11 opthide">
<td>3d</td>
<td>Is your cat a Persian?</td>
<td>
<label>
<input type="radio" name="insv_sts11" value="1" id="insv_sts_111"> Yes
</label>
<label>
<input type="radio" name="insv_sts11" value="0" id="insv_sts_011"> No
</label>
</td>
</tr>
</table>
</form>
welcome to SO,
Here are my 2 cents.
I made loop go through all radio buttons on click and act appropriately if the button is checked it shows target element, if it is not it clears checks on lower-level buttons and hide the element, this is needed to prevent elements showing even if a user changes mind and change some top-level checkbox.
Hope it helps, if you would have any questions or anyone would have different approach let me know.
Final would look like this.
$(document).ready(function() {
$('input[type="radio"]').click(function() {
$('input[type="radio"]').each(function () {
//iterate through all radio buttons
var $target = $(this).val() //get target class from value
if ($(this).prop('checked')) { //check if radio box is checked
$('.' + $target).show() //show target tr
} else {
//hide target tr and uncheck all radio buttons in child element
$('.' + $target).hide().find('input[type="radio"]').prop('checked', false);
}
})
});
});
.opthide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post">
<table cellpadding="5" cellspacing="5">
<tr>
<th scope="col">Level</th>
<th scope="col">Question</th>
<th scope="col">Answer</th>
</tr>
<tr>
<td>1</td>
<td>Indicate what kind of pet you have: </td>
<td>
<label>
<input type="radio" name="insv_sts5" value="6" id="insv_sts_15"> Dog
</label>
<label>
<input type="radio" name="insv_sts5" value="9" id="insv_sts_15"> Cat
</label>
<br />
</td>
</tr>
<tr class="6 opthide">
<td>2a</td>
<td>Is your dog a beagle? </td>
<td>
<label>
<input type="radio" name="insv_sts6" value="7" id="insv_sts_16"> Yes
</label>
<label>
<input type="radio" name="insv_sts6" value="8" id="insv_sts_16"> No
</label>
<br />
</td>
</tr>
<tr class="7 opthide">
<td>3a</td>
<td>Is your beagle AKC Registered?</td>
<td>
<label>
<input type="radio" name="insv_sts7" value="1" id="insv_sts_17"> Yes
</label>
<label>
<input type="radio" name="insv_sts7" value="0" id="insv_sts_07"> No
</label>
</td>
</tr>
<tr class="8 opthide">
<td>3b</td>
<td>Is your dog a German Shepherd?</td>
<td>
<label>
<input type="radio" name="insv_sts8" value="1" id="insv_sts_18"> Yes
</label>
<label>
<input type="radio" name="insv_sts8" value="0" id="insv_sts_08"> No
</label>
</td>
</tr>
<tr class="9 opthide">
<td>2b</td>
<td>Is your cat a Siamese? </td>
<td>
<label>
<input type="radio" name="insv_sts9" value="10" id="insv_sts_19"> Yes
</label>
<label>
<input type="radio" name="insv_sts9" value="11" id="insv_sts_19"> No
</label>
</td>
</tr>
<tr class="10 opthide">
<td>3c</td>
<td>Is your Siamese a blue seal? </td>
<td>
<label>
<input type="radio" name="insv_sts10" value="1" id="insv_sts_110"> Yes
</label>
<label>
<input type="radio" name="insv_sts10" value="0" id="insv_sts_010"> No
</label>
</td>
</tr>
<tr class="11 opthide">
<td>3d</td>
<td>Is your cat a Persian?</td>
<td>
<label>
<input type="radio" name="insv_sts11" value="1" id="insv_sts_111"> Yes
</label>
<label>
<input type="radio" name="insv_sts11" value="0" id="insv_sts_011"> No
</label>
</td>
</tr>
</table>
</form>
I have a table like this:
<table id="TempTable">
<tr>
<td>
<input type="checkbox" id="chkbox1"/>
<input type="hidden" value="1" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox2"/>
<input type="hidden" value="2" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox3"/>
<input type="hidden" value="3" />
</td>
</tr>
</table>
And I want to get the hidden value in the same td as the checked checkbox.
I tried this:
$("#TempTable tr input:checkbox:checked").each(function(){
alert($("#"+this.id).parent("td").child("input:hidden").val());
});
Of course, after I get value what I want, I will save it to an Array.
Not sure why the values are not on the checkbox, it would simplify the code.
But With your code, you would just use next and map.
$(":checkbox").on("change", function() {
var vals = $(":checkbox:checked").map( function(){
return $(this).next().val();
}).get();
console.log(vals);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="TempTable">
<tr>
<td>
<input type="checkbox" id="chkbox1"/>
<input type="hidden" value="1" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox2"/>
<input type="hidden" value="2" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox3"/>
<input type="hidden" value="3" />
</td>
</tr>
</table>
and as I said before putting the values on the checkbox simplify's it
$(":checkbox").on("change", function() {
var vals = $(":checkbox:checked").map( function(){
return this.value;
}).get();
console.log(vals);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="TempTable">
<tr>
<td>
<input type="checkbox" id="chkbox1" value="1"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox2" value="2"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkbox3" value="3"/>
</td>
</tr>
</table>
Try this:
$("input[type='checkbox']").each( function (){
var value = $(this).parent().find("input:hidden").val();
// this will return the value of each hidden field
});
You can use siblings and input type hidden to get the value.
$("#TempTable tr input[type=checkbox]:checked").each(function(){
$(this).siblings('input[type=hidden]').val()
});
I have an issue with my code. How to substract checkbox value when combobox change. I hope anybody here can help me.
Here is my js code:
//javascript for adding checkbox value and display in text.
<script>
$(document).ready(function(){
$('input[type=checkbox]').click(function(e){
$('#txtInput').val($(this).val())
var total = 0;
var text;
$("input[type=checkbox]:checked").each(function(i,ch) {
total += parseFloat($(this).val());
});
$("#txtInput").val(total);
});
});
</script>
//javascript for substract checkbox value when combobox change
<script>
$(document).ready(function(){
$('.xyz').change(function(){
var tmp = $(this).closest('tr').find("input[type='checkbox']").attr('id');
var substract = 0;
$('#'+tmp+'').prop("checked",false)+(substract -= parseFloat($('#'+tmp+'').val()));
$("#txtInput").val(substract);
});
});
And here is my HTML code:
<table>
<tr>
<th>SELECTION</th>
<th>ACTION</th>
<th>FOOD NAME</th>
</tr>
<tr>
<td><select class="xyz" name="xyz1" id="xyz1"><option >Cancel</option>
<option>Take</option></select></td>
<td><input type="checkbox" name="check1" id="check1" value="1" /></td>
<td>French Fries</td>
</tr>
<tr>
<td><select class="xyz" name="xyz2" id="xyz2"><option >Cancel</option>
<option>Take</option></select></td>
<td><input type="checkbox" name="check2" id="check2" value="3" /></td>
<td>Pizza</td>
</tr>
<tr>
<td><select class="xyz" name="xyz3" id="xyz3"><option >Cancel</option>
<option>Take</option></select></td>
<td><input type="checkbox" name="check3" id="check3" value="5" /></td>
<td>Beef Burger</td>
</tr>
</table>
<input type="text" name="txtInput" id="txtInput" />
First, if I select "Take" in combobox and click checkbox the value will be shown into text.
Second, if I do it again the checkbox will be add the value and show the result into text.
Third, this my problem. If I change combobox into "Cancel" the checkbox only uncheck but can't decrease the value. I want if I change combobox into "Cancel" the value decrease according checkbox selection value and checkbox uncheck.
For any help, I really appreciate it. Thanks.
Make a common function which will read the state of the input elements and do the calculations accordingly.
.parents(selector) will traverse up and will returned matched element.
Try this:
var doCalc = function() {
var total = 0;
var text;
$("input[type=checkbox]:checked").each(function(i, ch) {
if ($(this).parents('tr').find('select option:selected').text() == 'Take') {
total += parseFloat($(this).val());
}
});
$("#txtInput").val(total);
}
$('input[type=checkbox]').change(doCalc);
$('.xyz').change(function() {
if ($(this).find('option:selected').text() == 'Cancel') {
$(this).parents('tr').find('input[type="checkbox"]').prop('checked', false);
}
doCalc();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<th>SELECTION</th>
<th>ACTION</th>
<th>FOOD NAME</th>
</tr>
<tr>
<td>
<select class="xyz" name="xyz1" id="xyz1">
<option>Cancel</option>
<option>Take</option>
</select>
</td>
<td>
<input type="checkbox" name="check1" id="check1" value="1" />
</td>
<td>French Fries</td>
</tr>
<tr>
<td>
<select class="xyz" name="xyz2" id="xyz2">
<option>Cancel</option>
<option>Take</option>
</select>
</td>
<td>
<input type="checkbox" name="check2" id="check2" value="3" />
</td>
<td>Pizza</td>
</tr>
<tr>
<td>
<select class="xyz" name="xyz3" id="xyz3">
<option>Cancel</option>
<option>Take</option>
</select>
</td>
<td>
<input type="checkbox" name="check3" id="check3" value="5" />
</td>
<td>Beef Burger</td>
</tr>
</table>
<input type="text" name="txtInput" id="txtInput" />
Fiddle here
I have an issue with my code. I hope anybody here can help me to fix it. I have problem in remove value from text on change event of select input .
Here is my js code:
$(document).ready(function() {
$('.select').change(function() {
var check = $(this).closest('tr').find("input[type='checkbox']").attr('id');
$('#' + check + '').prop("checked", false);
var txt = $(this).closest('tr').find("input[type='text']").attr('id');
$('#' + txt + '').val("");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr>
<th>SELECT TYPE</th>
<th>TAKE IT</th>
<th>YOUR CHOOSEN</th>
</tr>
<tr>
<td>
<select class="select" name="select1">
<option>--CHOOSE--</option>
<option value="Cars">Cars</option>
<option value="Bike">Bike</option>
</select>
</td>
<td>
<input type="checkbox" name="check1" />
</td>
<td>
<input type="text" name="input1" />
</td>
</tr>
<tr>
<td>
<select class="select" name="select2">
<option>--CHOOSE--</option>
<option value="Cars">Cars</option>
<option value="Bike">Bike</option>
</select>
</td>
<td>
<input type="checkbox" name="check2" />
</td>
<td>
<input type="text" name="input2" />
</td>
</tr>
<tr>
<td>
<select class="select" name="select3">
<option>--CHOOSE--</option>
<option value="Cars">Cars</option>
<option value="Bike">Bike</option>
</select>
</td>
<td>
<input type="checkbox" name="check3" />
</td>
<td>
<input type="text" name="input3" />
</td>
</tr>
</table>
Note: I am loading data from database and showing the result into text and check-box automatically checked according to customer choice. When the customer want to edit data so, they will change the select input and the text and check-box should be clear. I only can remove the checked check-box but can't clear the text. Anybody please help. I really appreciate for any help.
I think you are having a problem to get how the script is working.
var check = $(this).closest('tr').find("input[type='checkbox']").attr('id');
var txt = $(this).closest('tr').find("input[type='text']").attr('id');
this two code look for the id of input checkbox and the input text.
As I see there is no id defined for these two element. So those variable will have nothing in them (undefined) hence the code will not work.
One solve is:
You can add id to those field. Like
<tr>
<td><select class="select" name="select1">
<option>--CHOOSE--</option><option value="Cars">Cars</option><option value="Bike">Bike</option>
</select> </td>
<td><input type="checkbox" name="check1" id="check1" /></td>
<td><input type="text" name="input1" id="input1" /></td>
</tr>
<tr>
<td>
<select class="select" name="select2"><option>--CHOOSE--</option><option value="Cars">Cars</option><option value="Bike">Bike</option>
</select></td>
<td><input type="checkbox" name="check2" id="check2" /></td>
<td><input type="text" name="input2" id="input2" /></td>
Another Solve:
You can modify you script like this.
$(document).ready(function(){
$('.select').change(function(){
var check = $(this).closest('tr').find("input[type='checkbox']");
$(check).prop("checked",false);
var txt = $(this).closest('tr').find("input[type='text']");
$(txt).val("");
});
});
$(document).ready(function(){
$('.select').change(function(){
$(this).parent().parent().find("input[type='text']").val(""); $(this).parent().parent().find("input[type='checkbox']").prop("checked",false);
});});
Please try this friend i will work fine
My task is what I have done but I am wondering about if the select box is not only three options... If they are 5 or 10 options so let's imagine that how the if else condition below can be...
More than that, after choosing another option, the others option's input will be returned to no value as my code.
Demo
HTML:
<table>
<tr><td>123</td></tr>
<tr><td>456</td></tr>
<tr><td>...</td></tr>
<tr>
<td>
<select id="select_vehicle">
<option value="company_vehicle">Company Vehicle</option>
<option value="hiring_vehicle">Hiring Vehicle</option>
<option value="taxi">Taxi</option>
</select>
</td>
</tr>
<tr id="company_vehicle">
<td>Company Vehicle</td>
<td>
<input type="text" />
</td>
<td>
<input type="radio" name="vehicle" value="bus" />Bus</td>
<td>
<input type="radio" name="vehicle" value="train" />Trolley Car</td>
</tr>
<tr id="hiring_vehicle">
<td>Hiring Vehicle</td>
<td>
<input type="radio" name="vehicle" value="bus" />Bus</td>
<td>
<input type="radio" name="vehicle" value="train" />Trolley Car</td>
<td>
<input type="text" />
</td>
</tr>
<tr id="taxi">
<td>Taxi</td>
<td>
<input type="checkbox" name="vehicle" value="Taxi" />Taxi
</td>
</tr>
<tr><td>...</td></tr>
<tr><td>123</td></tr>
<tr><td>456</td></tr>
</table>
Javascript:
var select_vehicle = $("#select_vehicle");
// Set selected item
var set_selected_item = $(select_vehicle).val("company_vehicle");
// Hide options "Hiring Vehicle" & "Taxi"
var company_vehicle = $("#company_vehicle"); // Get id "Company Vehicle"
var hiring_vehicle = $("#hiring_vehicle"); // Get id "Hiring Vehicle"
hiring_vehicle.hide();
var taxi = $("#taxi"); // Get id "Taxi"
taxi.hide();
$(select_vehicle).on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
if (valueSelected == "company_vehicle") {
company_vehicle.show();
hiring_vehicle.hide();
taxi.hide();
$("#taxi input").removeAttr('checked');
$("#hiring_vehicle input").removeAttr('checked').val("");
} else if (valueSelected == "hiring_vehicle") {
company_vehicle.hide();
hiring_vehicle.show();
taxi.hide();
$("#company_vehicle input").removeAttr('checked').val("");
$("#taxi input").removeAttr('checked');
} else {
company_vehicle.hide();
hiring_vehicle.hide();
taxi.show();
$("#company_vehicle input").removeAttr('checked').val("");
$("#hiring_vehicle input").removeAttr('checked').val("");
}
});
You can do:
$('#select_vehicle').change(function() {
var val = this.value;
$('#'+val).find('input[type="text"]').val('');
$('#'+val).find('input[type="radio"]').prop('checked',false);
$('#'+val).show().siblings('tr[id]').hide();
}).change();
Updated Fiddle
You can use the value of $("#select_vehicle") to dynamically get the id of the element to show. In the HTML add the class select_option to all of the tr's that are option holders like:
<tr id="company_vehicle" class="select_option">
<td>Company Vehicle</td>
<td>
<input type="text" />
</td>
<td>
<input type="radio" name="vehicle" value="bus" />Bus</td>
<td>
<input type="radio" name="vehicle" value="train" />Trolley Car</td>
</tr>
<tr id="hiring_vehicle" class="select_option">
<td>Hiring Vehicle</td>
<td>
<input type="radio" name="vehicle" value="bus" />Bus</td>
<td>
<input type="radio" name="vehicle" value="train" />Trolley Car</td>
<td>
<input type="text" />
</td>
</tr>
<tr id="taxi" class="select_option">
<td>Taxi</td>
<td>
<input type="checkbox" name="vehicle" value="Taxi" />Taxi</td>
</tr>
Javscipt:
$("#select_vehicle").on('change', function(){
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$('.select_option').hide();
$('.select_option input[type="text"]').val('');
$('.select_option input:checked').prop('checked', false);
$('#'+valueSelected).show();
}).trigger('change');