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>
Related
I created a table with some checkboxes and I want to create a JavaScript that remove the ones I don't want there but I'm stuck in the JavaScript part. Could you please help me in this small challenge? Thanks!
<table class="isTable">
<tbody>
<tr>
<td>
<input id="firstCheckBox" type="checkbox" name="number1" value="All">
<label for="firstCheckBox">All</label>
</td>
</tr>
<tr>
<td>
<input id="secondCheckBox" type="checkbox" name="number2" value="Some text">
<label for="secondCheckBox">Some text</label>
</td>
</tr>
<tr>
<td>
<input id="thirdCheckBox" type="checkbox" name="number3" value="1st to be removed">
<label for="thirdCheckBox">1st to be removed</label>
</td>
</tr>
<tr>
<td>
<input id="fourthCheckBox" type="checkbox" name="number4" value="Some other text">
<label for="fourthCheckBox">Some other text</label>
</td>
<tr>
<td>
<input id="fifthCheckBox" type="checkbox" name="number5" value="2nd to be removed">
<label for="">2nd to be removed</label>
</td>
<tr>
<td>
<input id="fifthCheckBox" type="checkbox" name="number6" value="Some other text again">
<label for="">Some other text again</label>
</td>
<tr>
<td>
<input id="sixthCheckBox" type="checkbox" name="number7" value="3rd to be removed">
<label for="">3rd to be removed</label>
</td>
</tr>
</tbody>
</table>
The JS part done so far, but the way I tried to removed the tr doesn't work
let findTableOfCheckBoxes = document.getElementsByClassName('.isTable');
for (let i = 0; i < findTableOfCheckBoxes.length; i++) {
let selectTr = document.getElementsByTagName("tr")[2];
selectTr.parentNode.removeChild(selectTr);
}
You're committing the cardinal sin of assuming your selector is finding elements. It's not, because you need isTable not .isTable when using getElementsByClassName() which, since it's about classes, assumes the . for you.
There's also a more modern, cleaner way to achieve what you need. Follows:
document.querySelectorAll('.isTable').forEach(tbl => {
let row = tbl.querySelector('tr:nth-child(3)');
row && row.remove();
});
You added "." character for the getElementsByClassName. Just remove it.
let findTableOfCheckBoxes = document.getElementsByClassName('isTable');
let findTableOfCheckBoxes = document.getElementsByClassName('isTable');
for (let i = 0; i < findTableOfCheckBoxes.length; i++) {
let selectTr = document.getElementsByTagName("tr")[2];
selectTr.parentNode.removeChild(selectTr);
}
<table class="isTable">
<tbody>
<tr>
<td>
<input id="firstCheckBox" type="checkbox" name="number1" value="All">
<label for="firstCheckBox">All</label>
</td>
</tr>
<tr>
<td>
<input id="secondCheckBox" type="checkbox" name="number2" value="Some text">
<label for="secondCheckBox">Some text</label>
</td>
</tr>
<tr>
<td>
<input id="thirdCheckBox" type="checkbox" name="number3" value="1st to be removed">
<label for="thirdCheckBox">1st to be removed</label>
</td>
</tr>
<tr>
<td>
<input id="fourthCheckBox" type="checkbox" name="number4" value="Some other text">
<label for="fourthCheckBox">Some other text</label>
</td>
<tr>
<td>
<input id="fifthCheckBox" type="checkbox" name="number5" value="2nd to be removed">
<label for="">2nd to be removed</label>
</td>
<tr>
<td>
<input id="fifthCheckBox" type="checkbox" name="number6" value="Some other text again">
<label for="">Some other text again</label>
</td>
<tr>
<td>
<input id="sixthCheckBox" type="checkbox" name="number7" value="3rd to be removed">
<label for="">3rd to be removed</label>
</td>
</tr>
</tbody>
</table>
I've got many inputs in a table. I want to validate each time i get in the page that if all the radioOpciones* have one option checked. If it's true, I will show() something.
<table>
<tr>
<th>
title
</th>
<td class="radioGroup">
<input id="radioOpciones1" value="1" name="radioOpciones1" checked="checked" type="radio">
</td>
<td class="radioGroup">
<input id="radioOpciones2" value="2" name="radioOpciones1" type="radio">
</td>
<td class="radioGroup">
<input id="radioOpciones3" value="3" name="radioOpciones1" type="radio">
</td>
<td class="radioGroup">
<input id="radioOpciones4" value="4" name="radioOpciones1" type="radio">
</td>
<td class="radioGroup">
<input id="radioOpciones5" value="5" name="radioOpciones1" type="radio">
</td>
</tr>
<tr>
<th>
title2
</th>
<td class="radioGroup">
<input id="radioOpciones6" value="1" name="radioOpciones2" checked="checked" type="radio">
</td>
<td class="radioGroup">
<input id="radioOpciones7" value="2" name="radioOpciones2" type="radio">
</td>
<td class="radioGroup">
<input id="radioOpciones8" value="3" name="radioOpciones2" type="radio">
</td>
<td class="radioGroup">
<input id="radioOpciones9" value="4" name="radioOpciones2" type="radio">
</td>
<td class="radioGroup">
<input id="radioOpciones10" value="5" name="radioOpciones2" type="radio">
</td>
</tr>
</table>
I was trying to get the length by
$('.radioGroup').length
and then compare with checked options
$('.radioGroup:has(input:checked)').length
I want to get when i click in each radio that if it's the last radio option checked possible to send a continue button.
UPDATED
Search for distinct radio input names, pass them to checkRadioGroups() function and get results.
You can use this function each time you want to check the checked state of the radio inputs.
NOTE
You can use this approach in any possible HTML structure.
function checkRadioGroups(collection) {
var obj = {};
for (var i in collection) {
var nameAttr = collection[i];
var isChecked = $('input[name="' + nameAttr + '"]:checked').length > 0;
obj[nameAttr] = isChecked;
}
return obj;
}
function getDistinctGroupNames() {
var names = [];
$('input[type="radio"]').each(function(index, elem) {
var name = $(elem).attr('name');
if (names.indexOf(name) === -1) {
names.push(name);
}
});
return names;
}
var check = checkRadioGroups(getDistinctGroupNames());
console.log(check);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>
title
</th>
<td class="radioGroup">
<input id="radioOpciones1" value="1" name="radioOpciones1" checked="checked" type="radio">
</td>
<td class="radioGroup">
<input id="radioOpciones1" value="2" name="radioOpciones1" type="radio">
</td>
<td class="radioGroup">
<input id="radioOpciones1" value="3" name="radioOpciones1" type="radio">
</td>
<td class="radioGroup">
<input id="radioOpciones1" value="4" name="radioOpciones1" type="radio">
</td>
<td class="radioGroup">
<input id="radioOpciones1" value="5" name="radioOpciones1" type="radio">
</td>
</tr>
<tr>
<th>
title2
</th>
<td class="radioGroup">
<input id="radioOpciones2" value="1" name="radioOpciones2" type="radio">
</td>
<td class="radioGroup">
<input id="radioOpciones2" value="2" name="radioOpciones2" type="radio">
</td>
<td class="radioGroup">
<input id="radioOpciones2" value="3" name="radioOpciones2" type="radio">
</td>
<td class="radioGroup">
<input id="radioOpciones2" value="4" name="radioOpciones2" type="radio">
</td>
<td class="radioGroup">
<input id="radioOpciones2" value="5" name="radioOpciones2" type="radio">
</td>
</tr>
</table>
try this code
$(function() {
var radios = $('input[type=radio][name*=radioOpciones]').filter(function() {
return $(this).is(':checked')
});
alert(radios.length);
});
hope this helps
This is how I'd address this using a <radio-group> webcomponent. The element represents the missing radio-group element which you can simply ask for the value. null means none of the radio buttons is :checked. Otherwise, the radio-group element reports the value of the :checked radiobutton:
class RadioGroup extends HTMLElement {
constructor(...args) {
const self = super(...args)
self.type = 'radio-group'
self.radioButtons = null
return self
}
get value() {
const checked = this.querySelector(':checked')
return checked ? checked.value : null
}
set value(val) {
const radios = this.radioButtons.filter(i => i.value === val)
if (radios.length) {
radios[0].checked = true
} else {
for (const radioButton of this.radioButtons) {
radioButton.checked = false
}
}
let change = createNewEvent('change', true, true)
this.dispatchEvent(change)
}
connectedCallback() {
if (this.nextSibling) { // children parsed?
this.radioButtons = [...this.querySelectorAll('input[type=radio]')]
} else { // if not, populate radioButtons only on next animation frame
window.requestAnimationFrame(() => {
this.radioButtons = [...this.querySelectorAll('input[type=radio]')]
})
}
}
}
window.customElements.define('radio-group', RadioGroup)
let radioGroups = Array.from(document.querySelectorAll('radio-group'))
check.addEventListener('click', (e) => {
console.log(radioGroups.every(radioGroup => radioGroup.value))
})
<radio-group id="sex">
<fieldset>
<legend>Sex</legend>
<input type="radio" value="female" id="female" name="sex" />
<label for="female">female</label>
<input type="radio" value="male" id="male" name="sex" />
<label for="male">male</label>
<input type="radio" value="diverse" id="diverse" name="sex" />
<label for="diverse">diverse</label>
</fieldset>
</radio-group>
<radio-group id="color">
<fieldset>
<legend>Color</legend>
<input type="radio" value="blue" id="blue" name="color" />
<label for="blue">blue</label>
<input type="radio" value="red" id="red" name="color" />
<label for="red">red</label>
<input type="radio" value="green" id="green" name="color" />
<label for="green">green</label>
</fieldset>
</radio-group>
<button id="check" type="button">Check if each radiogroup has a checked radiobutton</button>
Firstly, you need to give different id's to your inputs in same page cause of HTML rules. Because id specifies a unique id for the element. Here
And your elegant solution is here :
if($('input.classname').not(':checked').length > 0) {
...
}
OR
if($('input[name="inputname"]').not(':checked').length > 0) {
...
}
I have six columns with six checkboxes (or radio).
My intention is, that only one checkbox can be selected in the same row and the same column.
For example:
When I select the checkbox in column4 and row3', every checkbox in row3 and column4 have to be unselected immediately.
I tried it with radio buttons, but I simply can´t do it, because every single radio always to be in two different groups.
Edit:
My HTML Code:
<div style="position:absolute; left: 20px; top: 20px" class="checkcolumn2" >
<input type="checkbox" ID="column1row1">column1row1<br>
<input type="checkbox" ID="column1row2">column1row2<br>
<input type="checkbox" ID="column1row3">column1row3<br>
<input type="checkbox" ID="column1row4">column1row4<br>
<input type="checkbox" ID="column1row5">column1row5<br>
<input type="checkbox" ID="column1row6">column1row6<br>
</div>
<div style="position:absolute; left: 200px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column2row1">column2row1<br>
<input type="checkbox" ID="column2row2">column2row2<br>
<input type="checkbox" ID="column2row3">column2row3<br>
<input type="checkbox" ID="column2row4">column2row4<br>
<input type="checkbox" ID="column2row5">column2row5<br>
<input type="checkbox" ID="column2row6">column2row6<br>
</div>
<div style="position:absolute; left: 380px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column3row1">column3row1<br>
<input type="checkbox" ID="column3row2">column3row2<br>
<input type="checkbox" ID="column3row3">column3row3<br>
<input type="checkbox" ID="column3row4">column3row4<br>
<input type="checkbox" ID="column3row5">column3row5<br>
<input type="checkbox" ID="column3row6">column3row6<br>
</div>
<div style="position:absolute; left: 560px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column4row1">column4row1<br>
<input type="checkbox" ID="column4row2">column4row2<br>
<input type="checkbox" ID="column4row3">column4row3<br>
<input type="checkbox" ID="column4row4">column4row4<br>
<input type="checkbox" ID="column4row5">column4row5<br>
<input type="checkbox" ID="column4row6">column4row6<br>
</div>
<div style="position:absolute; left: 740px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column5row1">column5row1<br>
<input type="checkbox" ID="column5row2">column5row2<br>
<input type="checkbox" ID="column5row3">column5row3<br>
<input type="checkbox" ID="column5row4">column5row4<br>
<input type="checkbox" ID="column5row5">column5row5<br>
<input type="checkbox" ID="column5row6">column5row6<br>
</div>
<div style="position:absolute; left: 920px; top: 20px" class="checkcolumn2">
<input type="checkbox" ID="column6row1">column6row1<br>
<input type="checkbox" ID="column6row2">column6row2<br>
<input type="checkbox" ID="column6row3">column6row3<br>
<input type="checkbox" ID="column6row4">column6row4<br>
<input type="checkbox" ID="column6row5">column6row5<br>
<input type="checkbox" ID="column6row6">column6row6<br>
</div>
It depends on the markup. Here's a simple example:
html
<div>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
<div>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
<div>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
jquery
$('input[type="checkbox"]').on('change', function() {
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).siblings().prop('checked', false);
// uncheck checkboxes in the same column
$('div').find('input[type="checkbox"]:eq(' + $(this).index() + ')').not(this).prop('checked', false);
});
Here's a fiddle
Here's another example using classes
I'm not sure if this is the best possible solution, but I think it does what you want.
$(":radio").change(function() {
// find column
var tdColumn = $(this).closest("td");
// find row
var trRow = tdColumn.closest("tr");
// uncheck all radios in current row, except the selected radio
trRow.find(":radio").not($(this)).prop("checked",false);
// index of current column
var i = tdColumn.index();
// uncheck all radios in current column, except the selected radio
trRow.siblings("tr").each(function(key, value) { $(value).find(":radio")[i].checked = false; } );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
<td>
<input type="radio" />
</td>
</tr>
<table>
I created it by 3 columns and 5 rows BUT it works for N cols and M rows... just increase td and tr tags...
Try this...
Also you can test it live here ;)
Result
.....................................................................................................................................
jQuery:
$(document).ready(function(){
var $table = $('#MyTable');
var $rowCount = $table.find('tr').length;
var $colCount = $($table.find('tr')[0]).find('td').length;
console.log($rowCount);
console.log($colCount);
$table.find('tr').each(function(i, e){
$tr=$(e);
console.log($tr);
});
});
$(".chBox").click(function() {
console.log('clicked');
$this=$(this);
$row=$this.parent().parent();
$table=$this.closest('table');
$row.find('.chBox').each(function(i, e){
$checkbox=$(e);
$checkbox.prop('checked',false);
console.log($checkbox);
});
$this.prop('checked',true);
var col = $this.parent().parent().children().index($this.parent());
var row = $this.parent().parent().parent().children().index($this.parent().parent());
console.log(col);
console.log(row);
$table.find('tr').each(function(i, e){
$tr=$(e);
$tr.find('.chBox').each(function(k,ex){
$chBox=$(this);
if(k==col && i!=row)
$chBox.prop('checked',false);
});
});
});
HTML:
<table id="MyTable">
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
<td>
<input class='chBox' type="checkbox"/>
</td>
</tr>
</table>
Select only one checkbox/radiobutton in the same row and column with Angular 7 and JavaScript
The Idea behind this is that with radio button we have name property which makes single select either by row or column but for both row and column. I placed the row in name and handled column with javascript whenever button will click.
This is HTML CODE
<section class="editor">
<strong>Editor</strong>
<div>
<label>Add option</label>
<button (click)="addOption()">+</button>
<div *ngFor="let option of options;let i = index">
<span>{{option.title +(i+1)}}</span><button (click)="deleteOption(i)"
*ngIf="options.length>2">X</button>
</div>
</div>
</section>
<hr>
<section>
<strong>Builder</strong>
<div class="builder">
<label>Question title goes here</label><br>
<div *ngFor="let option of options;let row_index = index">
<span>{{option.title +(row_index+1)}}</span>
<span *ngFor="let rank of options;let column_index=index">
<input type="radio" name="{{row_index}}" class="{{column_index}}"
(click)="check(column_index,$event)">
</span>
</div>
</div>
</section>
And this is my .ts file code where I Implemented with Javascript
export class AppComponent {
options = [{
title: "option",
rank: 0,
}, {
title: "option",
rank: 0
}]
constructor() {
}
ngOnInit(): void { }
addOption() {
this.options.push({
title: "option",
rank: 0
})
}
deleteOption(i) {
this.options.splice(i, 1);
}
check(column_index, event) {
Array.from(document.getElementsByClassName(column_index)).map(x=>x['checked']=false);
event.target.checked=true;
}
}
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');
here is my test code to calculate a multi choice quiz.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multiple checkbox calculation</title>
<style>
div {
color: red;
font-size: 35px;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[type=checkbox]").click(function() {
var total = 0;
$("input[type=checkbox]:checked").each(
function() {
total += parseInt($(this).val());
});
$("#total").html("tatal:" + total);
});
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col" width="50px">No:</th>
<th scope="col" width="40px">A</th>
<th scope="col" width="40px">B</th>
<th scope="col" width="40px">C</th>
<th scope="col" width="40px">D</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>
<input type="checkbox" class="css-checkbox" id="squared00" name="fieldMark[correct00]" value="1">
<label for="squared00" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared01" name="fieldMark[correct01]" value="-1">
<label for="squared01" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared02" name="fieldMark[correct02]" value="-1">
<label for="squared02" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared03" name="fieldMark[correct03]" value="-1">
<label for="squared03" class="css-label"></label>
</td>
</tr>
<tr>
<th>2</th>
<td>
<input type="checkbox" class="css-checkbox" id="squared10" name="fieldMark[correct10]" value="1">
<label for="squared10" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared11" name="fieldMark[correct11]" value="-1">
<label for="squared11" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared12" name="fieldMark[correct12]" value="-1">
<label for="squared12" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared13" name="fieldMark[correct13]" value="-1">
<label for="squared13" class="css-label"></label>
</td>
</tr>
<tr>
<th>3</th>
<td>
<input type="checkbox" class="css-checkbox" id="squared20" name="fieldMark[correct20]" value="1">
<label for="squared20" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared21" name="fieldMark[correct21]" value="-1">
<label for="squared21" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared22" name="fieldMark[correct22]" value="-1">
<label for="squared22" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared23" name="fieldMark[correct23]" value="-1">
<label for="squared23" class="css-label"></label>
</td>
</tr>
<tr>
<th>4</th>
<td>
<input type="checkbox" class="css-checkbox" id="squared30" name="fieldMark[correct30]" value="1">
<label for="squared30" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared31" name="fieldMark[correct31]" value="-1">
<label for="squared31" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared32" name="fieldMark[correct32]" value="-1">
<label for="squared32" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared33" name="fieldMark[correct33]" value="-1">
<label for="squared33" class="css-label"></label>
</td>
</tr>
<tr>
<th>5</th>
<td>
<input type="checkbox" class="css-checkbox" id="squared40" name="fieldMark[correct40]" value="1">
<label for="squared40" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared41" name="fieldMark[correct41]" value="-1">
<label for="squared41" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared42" name="fieldMark[correct42]" value="-1">
<label for="squared42" class="css-label"></label>
</td>
<td>
<input type="checkbox" class="css-checkbox" id="squared43" name="fieldMark[correct43]" value="-1">
<label for="squared43" class="css-label"></label>
</td>
</tr>
</tbody>
</table>
<div id="total"></div>
</body>
</html>
this code for auto calculation for multiple choice quiz. only option "A" is correct for each 5 question other all options is incorrect. here is my requirements.
when user clicks on only option "correct" for any question number it adds point 1 to the total.
when user clicks on only option "incorrect" for any question will add point -1 to the total.
when user clicks on both option "correct" and "incorrect" for any question number it adds point -1 to the total. for example user clicks all checkbox for question 1 it should add only -1 to the total (in example above it is -2 which is = 1-1-1-1.) ie. if a user checked all the checkbox in the above example it will get total:-10. But my requirement is to show only -5. ie = -1-1-1-1-1.
thanks in advance..
I have created a fiddle for you at http://jsfiddle.net/DYduY/ It isn't the nicest solution but what I do is calculate the total per row. If it is lower than -1 e.g. -2 than I change the row value to -1. In this way the maximal negative value for a row is -1.
$(document).ready(function() {
$("input[type=checkbox]").click(function() {
var total = 0;
$("tr").each(function() {
var rowTotal = 0;
$(this).find("input[type=checkbox]:checked").each(
function() {
rowTotal += parseInt($(this).val());
});
if (rowTotal < -1) { rowTotal = -1 }
total += rowTotal;
});
$("#total").html("tatal:" + total);
});
});
Got it more improve solution. Here is the jquery code.
$(document).ready(function() {
$("input[type=checkbox]").click(function() {
var total = 0;
$("tr").each(function() {
var checked = $(this).find( "input:checked").length;
var values = $(this).find( "input[type=checkbox]").map(function() {
return parseInt($(this).val());
}).get();
var minimum = Math.min.apply( this, values );
var rowTotal = 0;
$(this).find("input[type=checkbox]:checked").each(
function() {
rowTotal += parseInt($(this).val());
});
if (checked > 1) { rowTotal = minimum }
total += rowTotal;
});
$("#total").html("tatal:" + total);
});
});