I'm sorry, the title is awkward. Basically I'm using onclick() to show/hide different elements. When I click Radio1, it shows the element, but when I click Radio2 it doesn't hide Radio1's element, and vice versa. The only way I can think of doing it is doing a manual if statement, like so:
function RadioCheck(id) {
if (id == 'Radio1') {
document.getElementById(id).style.display = "table-row-group";
document.getElementById('Radio2').style.display = "none";
} else if (id == 'Radio2') {
document.getElementById(id).style.display = "table-row-group";
document.getElementById('Radio1').style.display = "none";
}
}
But when I have to do that for 5 radio buttons, it gets messy and gaudy. I'm not sure how to go about making it so the other elements will hide.
I've tried checking if the the radio with the corresponding is checked/unchecked, to hide/show it. But that doesn't work because obviously once you pass through another parameter, the previous one won't work
I've Googled and can't find it.
Edit: Here's the relevant HTML
Radio HTML
<tr>
<td>
<span class="label">Platform:</span>
</td>
<td>
<input type="radio" name="platform" onclick="RadioCheck('Radio1');">Radio1</input>
<input type="radio" name="platform" onclick="RadioCheck('Radio2');">Radio2</input>
<input type="radio" name="platform" onclick="RadioCheck('Radio3');">Radio3</input>
<input type="radio" name="platform" onclick="RadioCheck('Radio4');">Radio4</input>
<input type="radio" name="platform" onclick="RadioCheck('Radio5');">Radio5</input>
</td>
</tr>
Radio1 HTML:
<tr id="Radio1">
<td>
<span class="label">Limited State:</span>
</td>
<td>
<input type="radio" value="Y" id="limStatY" name="limStat">Y</input>
<input type="radio" value="N" id="limStat" name="limStat" checked="true">N</input>
</td>
</tr>
Radio2 HTML:
<tbody id="Radio2">
<tr>
<td>
Locked to Sector?
</td>
<td>
<input type="radio" name="sectorLock" >Yes</input>
<input type="radio" name="sectorLock" >No</input>
</td>
</tr>
<tr>
<td>
<span class="label">Tech Alert</span>
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
Alerts Portal
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
Reason for Call
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
What exactly is not working?
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
Describe specific web service
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
</tbody>
And I have my CSS to start the elements off hidden:
#Radio1 {
display: none;
}
#Radio2 {
display: none;
}
You can simply hide everything and then display one instead of adding logic to hide everything except the one that is about to be displayed.
function RadioCheck(id)
{
// Hide all
document.getElementById('Radio1').style.display = "none";
document.getElementById('Radio2').style.display = "none";
document.getElementById('Radio3').style.display = "none";
document.getElementById('Radio4').style.display = "none";
document.getElementById('Radio5').style.display = "none";
// Display one
document.getElementById(id).style.display = "table-row-group";
}
Here's a method that uses event listeners rather than inline onclick, also uses values for your radios to determine which TR's to show/hide. This example only has content for the first two radios but is extendable for as many as you want.
document.addEventListener('DOMContentLoaded', () => {
let radios = document.querySelectorAll('.tr-toggle-radios input[type=radio]')
let toggled = document.querySelectorAll('.tr-toggle-content')
radios.forEach(el => {
el.addEventListener('change', e => {
toggled.forEach(tog => tog.classList.add('hide'));
document.querySelector(`#${e.target.value}`).classList.remove('hide')
})
})
})
.hide {
display: none;
}
.tr-toggle-content {
display: table-row-group;
}
<table>
<tr>
<td>
<span class="label">Platform:</span>
</td>
<td class='tr-toggle-radios'>
<input type="radio" name="platform" value="Radio1">Radio1</input>
<input type="radio" name="platform" value="Radio2">Radio2</input>
<input type="radio" name="platform" value="Radio3">Radio3</input>
<input type="radio" name="platform" value="Radio4">Radio4</input>
<input type="radio" name="platform" value="Radio5">Radio5</input>
</td>
</tr>
<tr class='tr-toggle-content hide' id="Radio1">
<td>
<span class="label">Limited State:</span>
</td>
<td>
<input type="radio" value="Y" id="limStatY" name="limStat">Y</input>
<input type="radio" value="N" id="limStat" name="limStat" checked="true">N</input>
</td>
</tr>
<tbody class='tr-toggle-content hide' id="Radio2">
<tr>
<td>
Locked to Sector?
</td>
<td>
<input type="radio" name="sectorLock">Yes</input>
<input type="radio" name="sectorLock">No</input>
</td>
</tr>
<tr>
<td>
<span class="label">Tech Alert</span>
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
Alerts Portal
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
Reason for Call
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
What exactly is not working?
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
Describe specific web service
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
</tbody>
</table>
Try this: You keep an array of radio IDs and loop through them when a user interacts with a radio. Then you display the checked radio and hide all the others.
const radio = ['Radio1', 'Radio2', 'Radio3'];
function RadioCheck(id) {
radio.forEach((item) => {
if(id === item){
document.getElementById(id).style.display = "table-row-group";
}else{
document.getElementById(item).style.display = "none";
}
});
}
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 am trying to show and hide tr of table with checkbox check and uncheck. I tried the following script not working for me.
$('.checks').on('ifChecked', function(event) {
var checked = $(this).val();
if (checked == 1) {
$('.vegetables').show();
}
if (checked == 2) {
$('.fruits').show();
}
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="1">vegetables
</label>
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="2">Fruits
</label>
</div>
<table>
<tbody>
<tr class="vegetables hidden">
<td colspan="2">
<h2>Vegetablese:</h2>
</td>
</tr>
<tr class="vegetables hidden">
<td>
<label>Vegetables:</label>
<input type="text">
</td>
</tr>
<tr class="fruits hidden">
<td colspan="2">
<h2>Fruits:</h2>
</td>
</tr>
<tr class="fruits hidden">
<td>
<label>Fuits:</label>
<input type="text">
</td>
</tr>
</tbody>
</table>
Here's what you need to do:
Change ifChecked with onchange. There's no event like ifChecked.
Use toggle based on the state of the checkbox.
Check for $(this).checked to find the state. This will return true or false.
$('.checks').on('change', function(event) {
var checked = $(this).val();
if (checked == 1) {
$('.vegetables').toggle($(this).checked);
}
if (checked == 2) {
$('.fruits').toggle($(this).checked);
}
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="1" /> vegetables
</label>
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="2" /> Fruits
</label>
</div>
<table>
<tbody>
<tr class="vegetables hidden">
<td colspan="2">
<h2>Vegetablese:</h2>
</td>
</tr>
<tr class="vegetables hidden">
<td>
<label>Vegetables:</label>
<input type="text">
</td>
</tr>
<tr class="fruits hidden">
<td colspan="2">
<h2>Fruits:</h2>
</td>
</tr>
<tr class="fruits hidden">
<td>
<label>Fuits:</label>
<input type="text">
</td>
</tr>
</tbody>
</table>
Theres a couple of issues in your logic. Firstly ifChecked is not a valid event. Use change instead. Secondly the logic doesn't work to hide elements. To do that you'd need to loop through all checkboxes and determine their state in order to show/hide the content underneath.
The simplest and most extensible way to achieve what you require is to use a data attribute to specify which element should be toggled when the checkbox is updated. Then you can simply hide/show each element in the set. Try this:
let $checks = $('.checks').on('change', () => $checks.each((i, el) => $(el.dataset.target).toggle(el.checked)));
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="1" data-target=".vegetables">vegetables
</label>
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="2" data-target=".fruits">Fruits
</label>
</div>
<table>
<tbody>
<tr class="vegetables hidden">
<td colspan="2">
<h2>Vegetablese:</h2>
</td>
</tr>
<tr class="vegetables hidden">
<td>
<label>Vegetables:</label>
<input type="text">
</td>
</tr>
<tr class="fruits hidden">
<td colspan="2">
<h2>Fruits:</h2>
</td>
</tr>
<tr class="fruits hidden">
<td>
<label>Fuits:</label>
<input type="text">
</td>
</tr>
</tbody>
</table>
I'm making a form asking users about a tournament. I need to limit each placement to only having one team and vise versa. I have the latter figured out already. But I'm having trouble thinking of a way to further validate the radio buttons. The set is in a 4x4 grid and each column and row should only have one value. I can get the teams validation to work by naming the buttons the same but I can't find a way to validate the placement. I had a way to validate checkboxes but I need to use radio buttons so I can have what order users place each checked box so I can read what teams are placed in 1st and 2nd in each group.
The way the teams, placement, and button are laid out is within a table.
<form>
<table class="groupSeating" cellspacing="2">
<caption>Group Seating</caption>
<colgroup>
<col class="groups" />
<col class="teams" />
<col class="seating" span="4" />
</colgroup>
<tr>
<th rowspan="2" colspan="2"></th>
<th colspan="4">Seating</th>
</tr>
<tr>
<td>1st</td>
<td>2nd</td>
<td>3rd</td>
<td>4th</td>
</tr>
<tr>
<td rowspan="4">Group A</td>
<td>ROX Tigers</td>
<td>
<input type="radio" name="roxSeed" id="ROX1" value="ROX" />
</td>
<td>
<input type="radio" name="roxSeed" id="ROX2" value="ROX" />
</td>
<td>
<input type="radio" name="roxSeed" id="ROX3" value="ROX" />
</td>
<td>
<input type="radio" name="roxSeed" id="ROX4" value="ROX" />
</td>
</tr>
<tr>
<td>G2 Esports</td>
<td>
<input type="radio" name="g2Seed" id="G21" value="G2" />
</td>
<td>
<input type="radio" name="g2Seed" id="G22" value="G2" />
</td>
<td>
<input type="radio" name="g2Seed" id="G23" value="G2" />
</td>
<td>
<input type="radio" name="g2Seed" id="G24" value="G2" />
</td>
</tr>
<tr>
<td>Counter Logic Gaming</td>
<td>
<input type="radio" name="clgSeed" id="CLG1" value="CLG" />
</td>
<td>
<input type="radio" name="clgSeed" id="CLG2" value="CLG" />
</td>
<td>
<input type="radio" name="clgSeed" id="CLG3" value="CLG" />
</td>
<td>
<input type="radio" name="clgSeed" id="CLG4" value="CLG" />
</td>
</tr>
<tr>
<td>Albux Nox Luna</td>
<td>
<input type="radio" name="anxSeed" id="ANX1" value="ANX" />
</td>
<td>
<input type="radio" name="anxSeed" id="ANX2" value="ANX" />
</td>
<td>
<input type="radio" name="anxSeed" id="ANX3" value="ANX" />
</td>
<td>
<input type="radio" name="anxSeed" id="ANX4" value="ANX" />
</td>
</tr>
</table>
</form>
There is probably a cleaner way for my code but I'm not worried about that, it's for a school project. I tried taking bits from another js that was for checkboxes but I can't think of what to change.
var limit = 2;
$('input.singleCheckbox').on('change', function(evt) {
if ($(this).siblings(':checked').length >= limit) {
this.checked = false;
}
});
Is this what you're looking for?
https://jsfiddle.net/277uu501/2/
var reject = false;
$('input[type="radio"]')
.mouseup(function(){
var selectedValues = [];
$('input[type="radio"]:checked').each(function(){
selectedValues.push($(this).parent().index());
});
var selectedValue = $(this).parent().index();
reject = selectedValues.indexOf(selectedValue) != -1;
})
.change(function(){
if(reject) this.checked = false;
});
It seems I got the idea.
Try this JS code:
$('input').on('change', function() {
var initiator = $(this);
var value = initiator.val();
var counter = 0;
$('input:checked').each(function(i, elem) {
if (elem.value === value) {
counter++;
}
});
if (counter > 1) {
initiator.prop('checked', false);
}
});
It won't allow to check more than one radio button on the row/column
I have designed a table below using HTML. I have validated for only one row, but for the 2nd row it was not validated. Below UI have given submit that validates entire table.
Condition is that at least one checkbox should be selected from each row.
Using pure js: https://jsfiddle.net/v8mghww9/1/
function validate(form)
{
var rows = document.getElementsByTagName('tr');
var isTableValid = true;
for(var i=0;i<rows.length;i++) {
var checkboxs=rows[i].getElementsByTagName("input");
var okay=false;
for(var j=0;j<checkboxs.length;j++)
{
console.log('here' + checkboxs[j].checked);
if(checkboxs[j].checked)
{
okay=true;
break;
}
}
if(!okay && checkboxs.length > 0) {
isTableValid = false;
break;
}
}
if(isTableValid)
return true;
else
{
alert("Please select atleast one item for male patients");
return false;
}
}
Your code was fine but you weren't writing the jsfiddle the right way, this is a live snippet showing that your code works fine:
function validate(form) {
var checkboxs = document.getElementsByName("m1");
var okay = false;
for (var i = 0, l = checkboxs.length; i < l; i++) {
if (checkboxs[i].checked) {
okay = true;
break;
}
}
if (okay) return true;
else {
alert("Please select atleast one item for male patients");
return false;
}
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 0.5em;
line-height: 1.5em;
}
#color {
background-color: lightblue;
}
.adjust {
text-align: left;
}
input[type="checkbox"] {
margin-left: 47%;
}
<table border="1" width="100%">
<tr>
<th rowspan="3">OAB Patient Types</th>
<th colspan="6" id="color">Therapy of First Choice</th>
</tr>
<tr>
<th colspan="4" id="color">Muscarinic Antagonists</th>
<th style="background-color:lightblue">Beta-3 Adrenergic Agonist</th>
<th style="background-color:lightblue">Other Therapies</th>
</tr>
<tr>
<th>Detrol LA
<br>(tolterodine)</th>
<th>Enablex
<br>(darifencian)</th>
<th>Toviaz
<br>(festoridine)</th>
<th>VESIcare
<br>(solifencian)</th>
<th>Myrbetriq
<br>(merabergan)</th>
<th>Other</th>
</tr>
<tr>
<th colspan="7" id="color" class="adjust">General Patient Types</th>
</tr>
<tr>
<td>Male Patients</td>//
<form name=form1>
<td>
<input type="checkbox" name=m1>
</td>
<td>
<input type="checkbox" name=m1>
</td>
<td>
<input type="checkbox" name=m1>
</td>
<td>
<input type="checkbox" name=m1>
</td>
<td>
<input type="checkbox" name=m1>
</td>
<td>
<input type="checkbox" name=m1>
</td>//</form>
</tr>
<tr>
<td>Female Patients</td>
<form name=form2>
<td>
<input type="checkbox" name=f1>
</td>
<td>
<input type="checkbox" name=f1>
</td>
<td>
<input type="checkbox" name=f1>
</td>
<td>
<input type="checkbox" name=f1>
</td>
<td>
<input type="checkbox" name=f1>
</td>
<td>
<input type="checkbox" name=f1>
</td>
<!-- <td><input type="submit" value="submit"></td> -->
</form>
</tr>
<tr>
<th colspan="7" id="color" class="adjust">Line of Therapy</th>
</tr>
<tr>
<td>First-line (newly daignosed OAB patients on their first course of therapy)</td>
<form>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
</form>
</tr>
<tr>
<td>Second-line</td>
<form>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
</form>
</tr>
<tr>
<td>Third-line</td>
<form>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
</form>
</tr>
</table>
<br>
<br>
<center>
<input type="button" value="Submit" onclick='return validate()'>
</center>
Note:
The button Submit should be of type button and not submit.
First thing because it's not inside any form to be submitted
Second thing is that you have many forms in your page (which is strange here), so you may have a conflict in submitting which form of them wityh this submit button?
give the same name on all the checkboxes of each row and then give it a class to all which you want to validate.
function validate() {
var flag = true;
var array = [];
$(".js-validate-required-radio").each(function () {
array.push($(this).prop('name'));
});
var uniqueNames = $.unique(array);
for (var i = 0; i < uniqueNames.length; i++) {
if ($('input:checkbox[name=' + uniqueNames[i] + ']:checked').val() == undefined) {
if (flag) {
flag = false;
}
}
}
if(!flag){
alert('select atleast one radio on each row');
}
else{
alert('yeee');
}
return flag;
}
here is fiddle
I need to create a non repeated pair of values using option input types and jQuery. I'm doing in this way:
$(document).ready(function () {
var $modelBranch = {};
$("#create").on("click", function () {
var $model = $("#modeloBody").find("input[type='radio']:checked").val();
var $branch = $("#marcaBody").find("input[type='radio']:checked").val();
});
});
This is the HTML code where I'm applying the code:
<fieldset class="rpni-border">
<legend class="rpni-border">Model</legend>
<table id="contenedorModelos" style="" class="table table-condensed">
<tbody id="modeloBody">
<tr>
<td>
<input type="radio" value="1" id="selModelo1" name="selModelos">
</td>
<td>Harum.</td>
</tr>
<tr>
<td>
<input type="radio" value="4" id="selModelo4" name="selModelos">
</td>
<td>Pariatur ut.</td>
</tr>
<tr>
<td>
<input type="radio" value="6" id="selModelo6" name="selModelos">
</td>
<td>Tempore animi.</td>
</tr>
<tr>
<td>
<input type="radio" value="8" id="selModelo8" name="selModelos">
</td>
<td>Voluptatem.</td>
</tr>
</tbody>
</table>
</fieldset>
<fieldset class="rpni-border">
<legend class="rpni-border">Branch</legend>
<table id="contenedorMarcas" style="" class="table table-condensed">
<tbody id="marcaBody">
<tr>
<td>
<input type="radio" value="3" id="selMarca3" name="selMarcas">
</td>
<td>Ea in sequi.</td>
</tr>
<tr>
<td>
<input type="radio" value="7" id="selMarca7" name="selMarcas">
</td>
<td>Exercitationem.</td>
</tr>
<tr>
<td>
<input type="radio" value="11" id="selMarca11" name="selMarcas">
</td>
<td>Sit alias sit.</td>
</tr>
</tbody>
</table>
</fieldset>
<button id="create" type="button">Create</button>
<div id="ModelBranch"></div>
What I need to do is pick one option from Model, pick one option from Branch and on click event for the button create the pair and add the values for each option in key => value way to the $modelBranch vars so any time I add a new one first check if values are already added. Now, since UnderscoreJS is a nice library to work with array, objects and so on I'm planning to use it instead of use just jQuery and Javascript. So, how do I create the array with pairs like for example:
[
{
"model" => 1,
"branch" => 1
},
{
"model" => 2,
"branch" => 1
},
{
"model" => 2,
"branch" => 2
},
]
And then how I find if a pair already exists on that array so I will not add it to it again and stop code execution?
And how to add them to the array as I have think? Here is a Fiddle to play with
Have a look at
$(document).ready(function() {
var
//to check whether it is a duplicate, easier than checking by iteration
map = {},
//to store the result
array = [];
$("#create").on("click", function() {
var model = $("#modeloBody").find("input[name=selModelos]:checked").val();
var marca = $("#marcaBody").find("input[name=selMarcas]:checked").val();
//only if both options are selected
if (model && marca) {
var key = model + '-' + marca;
//only if the item is not present
if (!map[key]) {
//mark the combination as added
map[key] = true;
array.push({
model: model,
maca: marca
});
}
}
//print the result
$('#ModelBranch').html(JSON.stringify(array))
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<fieldset class="rpni-border">
<legend class="rpni-border">Model</legend>
<table id="contenedorModelos" style="" class="table table-condensed">
<tbody id="modeloBody">
<tr>
<td>
<input type="radio" value="1" id="selModelo1" name="selModelos">
</td>
<td>Harum.</td>
</tr>
<tr>
<td>
<input type="radio" value="4" id="selModelo4" name="selModelos">
</td>
<td>Pariatur ut.</td>
</tr>
<tr>
<td>
<input type="radio" value="6" id="selModelo6" name="selModelos">
</td>
<td>Tempore animi.</td>
</tr>
<tr>
<td>
<input type="radio" value="8" id="selModelo8" name="selModelos">
</td>
<td>Voluptatem.</td>
</tr>
</tbody>
</table>
</fieldset>
<fieldset class="rpni-border">
<legend class="rpni-border">Branch</legend>
<table id="contenedorMarcas" style="" class="table table-condensed">
<tbody id="marcaBody">
<tr>
<td>
<input type="radio" value="3" id="selMarca3" name="selMarcas">
</td>
<td>Ea in sequi.</td>
</tr>
<tr>
<td>
<input type="radio" value="7" id="selMarca7" name="selMarcas">
</td>
<td>Exercitationem.</td>
</tr>
<tr>
<td>
<input type="radio" value="11" id="selMarca11" name="selMarcas">
</td>
<td>Sit alias sit.</td>
</tr>
</tbody>
</table>
</fieldset>
<button id="create" type="button">Create</button>
<div id="ModelBranch"></div>