I have some tables which will show depending on radio button. If radio button value is 'YES' then show the table if 'No' then hide. I got the solution how to do that. Now I want to know If someone fill-up the table data and clicks the 'No' button (which will hide the table), is there any way to clear the filed inside the table. So, when again click on the YES button visitor will see a fresh table.
Here is my code:
$(document).ready(function() {
$('.form-check-inline input[type="radio"]').on('change', function() {
$(this).closest('.form-group').next('table').toggle(this.checked && this.value === 'Yes');
});
});
.show-dc-table {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Do you have allergies?</label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="allergy" value="Yes">
<label class="form-check-label">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="allergy" value="No">
<label class="form-check-label">No</label>
</div>
</div>
</div>
<table class="table table-striped show-dc-table">
<thead>
<tr>
<th scope="col">Alergic Reactions to</th>
<th scope="col">Yes</th>
<th scope="col">No</th>
<th scope="col">Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aspirin, Ibuprofen, Codeine</td>
<td><input type="radio" name="a1" /></td>
<td><input type="radio" name="a2" /></td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Do you have a cough?</label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="cough" value="Yes">
<label class="form-check-label">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="cough" value="No">
<label class="form-check-label">No</label>
</div>
</div>
</div>
<table class="table table-striped show-dc-table">
<thead>
<tr>
<th scope="col">Alergic Reactions to</th>
<th scope="col">Yes</th>
<th scope="col">No</th>
<th scope="col">Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum</td>
<td><input type="radio" name="a1" /></td>
<td><input type="radio" name="a2" /></td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>
If you mean by clearing out the table to remove all rows, then you can use table.html(''); where table is assigned $(this).closest('.form-group').next('table'). If you mean to just clear out the input fields, the easiest way to do that is to enclose your fields in a <form> and to do a form reset.
See (and run) the code snippet below:
$(document).ready(function() {
$('.form-check-inline input[type="radio"]').on('change', function() {
let table = $(this).closest('.form-group').next('table');
if (this.value === 'No') {
$('#f').trigger('reset');
table.hide();
}
else {
table.show();
}
});
});
.show-dc-table {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="f">
<div class="form-group row">
<label class="col-sm-2 col-form-label">Do you have allergies?</label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="allergy" value="Yes">
<label class="form-check-label">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="allergy" value="No">
<label class="form-check-label">No</label>
</div>
</div>
</div>
<table class="table table-striped show-dc-table">
<thead>
<tr>
<th scope="col">Alergic Reactions to</th>
<th scope="col">Yes</th>
<th scope="col">No</th>
<th scope="col">Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aspirin, Ibuprofen, Codeine</td>
<td><input type="radio" name="a1" /></td>
<td><input type="radio" name="a2" /></td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>
</form>
Related
I have a table which span on multiple pages. I have a checkbox on each row of the table.
The poblem is that when only Ids of the row I select in the current page I am at are passed to my controller.
Below is my javascript
<script type="text/javascript">
var checkboxes = $("input[type='checkbox']");
var ids = [];
checkboxes.on('click', function(event) {
if($(this).prop('checked')){
ids.push(this.value);
console.log(this.value);
} else {
}
});
$('#Button').click(function () {
var form = $("#Form");
var url = form.attr("action");
$.post(url, {ids: ids}, function (data) {
$("#msg").html(data);
console.log("...");
console.log(ids);
});
})
</script>
Below is my table
<div class="table-responsive table-striped" id="ajax">
<form th:action="#{/SubmitAJAX}" th:object="${project}" id="Form"
method="POST">
<table id="example"
class="table table-hover table-striped tm-table-striped-even mt-3">
<thead>
<tr class="tm-bg-gray">
<th scope="col" class="text-center">Applicant Name</th>
<th scope="col" class="text-center">Applicant Id No</th>
<th scope="col">To be sent</th>
</tr>
</thead>
<tbody>
<th:block th:if="${units!=null && project!=null}">
<th:block th:each="p : ${units}">
<tr>
<td class="text-center" th:text="${p.applicantFullName}+ ' ' + ${p.applicantSurname}"></td>
<td class="text-center" th:text="${p.applicantIdNumber}"></td>
<td class="text-center" >
<td style="text-align:center; vertical-align:middle;">
<div class="custom-control custom-checkbox" th:if="${hasInspectionRequestBeCreatedToday==false and p.constructionStatus!='UNIT COMPLETED'}">
<input type="checkbox" class="custom-control-input tab1_chk" th:id="${p.unitId}" name="units" th:value="${p.unitId}">
<label class="custom-control-label" th:for="${p.unitId}"></label>
</div>
<div class="custom-control custom-checkbox" th:unless="${hasToday==false and p.constructionStatus!='COMPLETED'}">
<input type="checkbox" class="custom-control-input tab1_chk" th:id="${p.unitId}" name="units" th:value="${p.unitId}" disabled>
<label class="custom-control-label" th:for="${p.unitId}"></label>
</div>
</td>
</tr>
</th:block>
</th:block>
</tbody>
</table>
<div style="text-align:center">
<input type="button" id="Button" disabled class="btn btn-primary tab1_btn" value="Submit Button" />
</div>
</form>
</div>
This is my controller
#RequestMapping(method = RequestMethod.POST, value = "/submitAJAX")
public String submitRequest(Model model,
#RequestParam(value="ids") int [] ids,
HttpServletRequest request) {
.........
Current Problem :
Your current jquery code pushes the checked checkboxes in array but , there is no code for checking if the checkbox which was previously added inside array is checked/unchecked while sending that to controller.
Solution :
Instead of pushing id value in array on click of the checkbox you can verify the checked checkboxes while submitting the form via ajax. i.e :
var ids = $('input[type=checkbox][name=units]:checked').map(function() {
return this.value;
}).get();
Then, passed above array to your ajax call using JSON.stringify or whatever way you prefer.
Demo Code :
$('#Button').click(function() {
var form = $("#Form");
var url = form.attr("action");
var ids = $('input[type=checkbox][name=units]:checked').map(function() {
return this.value;
}).get();
console.log(JSON.stringify(ids))
//your ajax call ...
})
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.3/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<form th:action="#{/SubmitAJAX}" th:object="${project}" id="Form" method="POST">
<table id="example" class="table table-hover table-striped tm-table-striped-even mt-3">
<thead>
<tr class="tm-bg-gray">
<th scope="col" class="text-center">Applicant Name</th>
<th scope="col" class="text-center">Applicant Id No</th>
<th scope="col">To be sent</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">XYZ</td>
<td class="text-center" th:text="${p.applicantIdNumber}">123</td>
<td class="text-center">
<td style="text-align:center; vertical-align:middle;">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input tab1_chk" id="1" name="units" value="1">
<label class="custom-control-label" for="1"></label>
</div>
</td>
</tr>
<tr>
<td class="text-center">Something..</td>
<td class="text-center" th:text="${p.applicantIdNumber}">123</td>
<td class="text-center">
<td style="text-align:center; vertical-align:middle;">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input tab1_chk" id="2" name="units" value="2">
<label class="custom-control-label" for="2"></label>
</div>
</td>
</tr>
<tr>
<td class="text-center">Something 3</td>
<td class="text-center" th:text="${p.applicantIdNumber}">12</td>
<td class="text-center">
<td style="text-align:center; vertical-align:middle;">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input tab1_chk" id="3" name="units" value="3">
<label class="custom-control-label" for="3"></label>
</div>
</td>
</tr>
</tbody>
</table>
<div style="text-align:center">
<input type="button" id="Button" class="btn btn-primary tab1_btn" value="Submit Button" />
</div>
</form>
i am working with html table, when i check the checkbox i want to compare td values in a every tr, this condition is working fine for 1st tr from 2nd tr the condition is not working.
HTML Code -
<form role="form" name="conForm" id="conForm">
<span id="error" class="text-danger"></span>
<div class="table-responsive">
<table id="myPTable" class="table table-xss table-hover table-bordered">
<thead>
<tr>
<th><input class="checkall" type="checkbox" name="productcheckbox"> All</</th>
<th class="control-label paddingtop">SI No</th>
<th class="control-label paddingtop">Products</th>
<th class="control-label paddingtop">Pending Qty</th>
<th class="control-label paddingtop">Quantity</th>
<th class="control-label paddingtop">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
<td>1</td>
<td>HMIS HMIS HMIS HMIS</td>
<td class="availableQty">10</td>
<td><input type="number" name="select[]" class="enterQty" value="10" style="width:50px;"></td>
<td>3000</td>
</tr>
<tr>
<td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
<td>2</td>
<td>ERP</td>
<td class="availableQty">1</td>
<td><input type="number" name="select[]" class="enterQty" value="1" style="width:50px;" ></td>
<td>9000</td>
</tr>
<tr>
<td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
<td>3</td>
<td>Inventory</td>
<td class="availableQty">10</td>
<td><input type="number" name="select[]" class="enterQty" value="10" style="width:50px;"></td>
<td>13000</td>
</tr>
<tr><td><button class="btn-info">Save</button></td></tr>
</tbody>
</table>
</form>
Here is the jquery code -
$(".btn-info").on("click",function(){
var check = $('.checkproduct');
if(check.is(':checked')){
var pending="";
$('#myPTable tr').each(function() {
pending += $(this).find(".availableQty").html();
console.log(pending);
});
var enterqty ="";
$('#myPTable tr').each(function() {
enterqty += $(this).find(".enterQty").val();
console.log(enterqty);
});
if(enterqty > pending){
$("#error").html("<p>Quantity must be less than or equal to Pending Qty</p>");
}else if(enterqty== 0){
$("#error").html("<p>you have checked the product please enter quantity</p>");
}
else{
var checked = $('.checkproduct:checked').size();
}
the jquery what i wrote is working for only first row, but it need to be work for every work which will be checked.now only you guys can help me, thanks in advance.
I've reformed your code a bit, but i believe this is what you want.
$(".btn-info").on("click", function() {
var pending =0;
var enterqty=0;
$('#myPTable .checkproduct:checked').each(function() {
pending += (+$(this).closest('tr').find(".availableQty").text());
enterqty += (+$(this).closest('tr').find(".enterQty").val());
});
if (enterqty > pending) {
$("#error").html("<p>Quantity must be less than or equal to Pending Qty</p>");
} else if (enterqty == 0) {
$("#error").html("<p>you have checked the product please enter quantity</p>");
} else {
//var checked = $('.checkproduct:checked').size();
}
});
Demo
$(".btn-info").on("click", function() {
var pending =0;
var enterqty=0;
$('#myPTable .checkproduct:checked').each(function() {
pending += (+$(this).closest('tr').find(".availableQty").text());
enterqty += (+$(this).closest('tr').find(".enterQty").val());
});
if (enterqty > pending) {
$("#error").html("<p>Quantity must be less than or equal to Pending Qty</p>");
} else if (enterqty == 0) {
$("#error").html("<p>you have checked the product please enter quantity</p>");
} else {
//var checked = $('.checkproduct:checked').size();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="form" name="conForm" id="conForm">
<span id="error" class="text-danger"></span>
<div class="table-responsive">
<table id="myPTable" class="table table-xss table-hover table-bordered">
<thead>
<tr>
<th><input class="checkall" type="checkbox" name="productcheckbox"> All</</th>
<th class="control-label paddingtop">SI No</th>
<th class="control-label paddingtop">Products</th>
<th class="control-label paddingtop">Pending Qty</th>
<th class="control-label paddingtop">Quantity</th>
<th class="control-label paddingtop">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
<td>1</td>
<td>HMIS HMIS HMIS HMIS</td>
<td class="availableQty">10</td>
<td><input type="number" name="select[]" class="enterQty" value="10" style="width:50px;"></td>
<td>3000</td>
</tr>
<tr>
<td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
<td>2</td>
<td>ERP</td>
<td class="availableQty">1</td>
<td><input type="number" name="select[]" class="enterQty" value="1" style="width:50px;"></td>
<td>9000</td>
</tr>
<tr>
<td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
<td>3</td>
<td>Inventory</td>
<td class="availableQty">10</td>
<td><input type="number" name="select[]" class="enterQty" value="12" style="width:50px;"></td>
<td>13000</td>
</tr>
<tr>
<td><button type="button" class="btn-info">Save</button></td>
</tr>
</tbody>
</table>
I made my own multiple choice grid:
<div style="overflow-x:auto;">
<table class="w-100">
<tr>
<td class="border"></td>
<td class="border">Yes</td>
<td class="border">No</td>
</tr>
<tr>
<td class="border">Is red your favorite color?</td>
<td class="border">
<div class="custom-control custom-radio"><input type="radio" id="option1" name="row1" value="???" class="custom-control-input">
<label class="custom-control-label" for="option1"></label></div>
</td>
<td class="border">
<div class="custom-control custom-radio"><input type="radio" id="option2" name="row1" value="???" class="custom-control-input">
<label class="custom-control-label" for="option2"></label></div>
</td>
</tr>
</table>
</div>
This is in a form and I am running into an issue where I dont know what to set the value so that I can determine which option was pressed and in which row. I am using Django as my backend. Does this make sense. Thanks!!
You can do it like this: Set the values of the radio inputs to yes and no, get the value using val() and the row number via the name of the radio input.
$(".custom-control-input").on("change", function() {
let val = $(this).val();
let row = $(this).attr("name");
console.log("value for " + row + ": " + val);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="overflow-x:auto;">
<table class="w-100">
<tr>
<td class="border"></td>
<td class="border">Yes</td>
<td class="border">No</td>
</tr>
<tr>
<td class="border">Is red your favorite color?</td>
<td class="border">
<div class="custom-control custom-radio"><input type="radio" id="option1" name="row1" value="yes" class="custom-control-input">
<label class="custom-control-label" for="option1"></label></div>
</td>
<td class="border">
<div class="custom-control custom-radio"><input type="radio" id="option2" name="row1" value="no" class="custom-control-input">
<label class="custom-control-label" for="option2"></label></div>
</td>
</tr>
</table>
</div>
How to assign a <input type="text" value=""> to a <input type="checkbox" value="">, without hardcoding a numerical value to the checkbox? Then calculating the value total based on what is checked?
For example, I have a form that is asking for the name of an item and its cost. Then when I click submit it adds the data into a table. I want to be able to check the checkbox and have it call on the value from the cost I entered. Is it possible to do something like <input type="checkbox" value="cost"> rather than assigning <input type="checkbox" value="10">?
The form is purely for visualization only. My actual code can post data and is more detailed with modals and what not.
$(document).on("change", ".check", function() {
var checked = $('.check:checked'),
sum = checked.get().reduce(function(prev, item) {
return prev + parseFloat(item.getAttribute('value'));
}, 0);
$('.addTotal').text(sum.toFixed(2));
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<form action="">
<div class="form-group">
<label for="name">Item name: </label>
<input class="form-control" type="text" name="itemname" placeholder="Item Name" />
</div>
<div class="form-group">
<label for="name">Cost: </label>
<input class="form-control" name="cost" placeholder="Cost (insert number only)" />
</div>
<button type="submit">Submit</button>
<button type="submit">Edit</button>
</form>
<br>
<br>
<table class="table table-hover table-sm bookstable">
<thead>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check" name="" value="cost" /></td>
<!-- <td><input type="checkbox" class="check" name="" value="10"/></td> -->
<td>Item1</td>
<td>$10</td>
</tr>
<tr>
<td><input type="checkbox" class="check" name="" value="" /></td>
<!-- <td><input type="checkbox" class="check" name="" value="30"/></td> -->
<td>Item2</td>
<td>$30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<div>Total $: <span class="addTotal"></span></div>
</td>
</tr>
</tfoot>
</table>
You can do this using jQuery's .parent() method.
jQuery Documentation
Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector. The .parent() method is similar to the .parents() method.
Running Code
var total = 0;
$(document).on("change", ".check", function() {
var cost = parseFloat($(this).parent().parent().find(".cost").text().replace("$", ""));
if ($(this).is(":checked")) {
total += cost;
} else {
total += -cost;
}
$(".addTotal").text(total);
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<form action="">
<div class="form-group">
<label for="name">Item name: </label>
<input class="form-control" type="text" name="itemname" placeholder="Item Name" />
</div>
<div class="form-group">
<label for="name">Cost: </label>
<input class="form-control" name="cost" placeholder="Cost (insert number only)" />
</div>
<button type="submit">Submit</button>
<button type="submit">Edit</button>
</form>
<br>
<br>
<table class="table table-hover table-sm bookstable">
<thead>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check" name="" value="cost" /></td>
<!-- <td><input type="checkbox" class="check" name="" value="10"/></td> -->
<td>Item1</td>
<td class="cost">$10</td>
</tr>
<tr>
<td><input type="checkbox" class="check" name="" value="" /></td>
<!-- <td><input type="checkbox" class="check" name="" value="30"/></td> -->
<td>Item2</td>
<td class="cost">$30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<div>Total $: <span class="addTotal"></span></div>
</td>
</tr>
</tfoot>
</table>
I created an HTML table from JSON with Javascript. Now I have added three checkboxes to filter the data table by party (Democrat, Republican, and Independent).
My JS code got an error "$ is not defined"/ "on.()is not a function".
I don't understand.
//Get a list of checkboxes
var options = new Array();
$('.checkbox input').each(function(){
options.push($(this).attr('value'));
});
function updateUI() {
$("#senate-data tbody tr").each(function () {
var option = $(this).find(".Party").text();
var optionSelected = isIncluded(option, options);
$(this).toggle(optionSelected);
});
}
// x is included if lst is empty or contains x
function isIncluded(x, lst) {
return lst.length === 0 || lst.indexOf(x) != -1;
}
$("input[name='option']").on("change",updateUI);
<div class="checkbox">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" name="option" value="R">
<label class="form-check-label" for="inlineCheckbox1">Republican</label>
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" name="option" value="D">
<label class="form-check-label" for="inlineCheckbox2">Democrat</label>
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" name="option" value="I">
<label class="form-check-label" for="inlineCheckbox3">Independent</label>
</div>
<div id="senate-data">
<table>
<tbody>
<tr>
<th>Name</th>
<th>Party</th>
<th>State</th>
<th>Seniority</th>
<th>Perentage of votes</th>
</tr>
</tbody>
<tr>
<td>Alex</td>
<td class="Party">D</td>
<td>TN</td>
<td>11</td>
<td>80%</td>
</tr>
<tr>
<td>Ammy</td>
<td class="Party">R</td>
<td>NY</td>
<td>2</td>
<td>30%</td>
</tr>
<tr>
<td>Jammy</td>
<td class="Party">R</td>
<td>XX</td>
<td>XX</td>
<td>XX</td>
</tr>
</table>
This code worked just fine.
I changed this part:
var options = new Array();
$('.checkbox input').each(function(){
options.push($(this).attr('value'));
});
into:
var options = $("input[name='option']:checked")
.map(function () { return $(this).val(); })
.get();
//I've created a `tbody` and given it a class name `.dataTable`
$("#senate-data .dataTable tr").each(function () {
var option = $(this).find(".Party").text();
var optionSelected = isIncluded(option,options);
$(this).toggle(optionSelected);
});
}
function isIncluded(x,lst) {
return lst.length === 0 || lst.indexOf(x) != -1;;
}
$("input[name='option']").on("change",updateUI);
<div class="checkbox">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" name="option" value="R">
<label class="form-check-label" for="inlineCheckbox1">Republican</label>
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" name="option" value="D">
<label class="form-check-label" for="inlineCheckbox2">Democrat</label>
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" name="option" value="I">
<label class="form-check-label" for="inlineCheckbox3">Independent</label>
</div>
<div id="senate-data">
<table>
<tbody>
<tr>
<th>Name</th>
<th>Party</th>
<th>State</th>
<th>Seniority</th>
<th>Perentage of votes</th>
</tr>
</tbody>
<tbody class=dataTable>
<tr>
<td>Alex</td>
<td class="Party">D</td>
<td>TN</td>
<td>11</td>
<td>80%</td>
</tr>
<tr>
<td>Ammy</td>
<td class="Party">R</td>
<td>NY</td>
<td>2</td>
<td>30%</td>
</tr>
<tr>
<td>Jammy</td>
<td class="Party">R</td>
<td>XX</td>
<td>XX</td>
<td>XX</td>
</tr>
</tbody>
</table>