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>
Related
I would like to know how to show the students who doesn't have a class and hide the rest(where td Class-name is empty) using only jquery or js.
I look in documentation but I got lost. so if you can help plz.
Ex: my table in this picture
my table is generated by django but there is the html
<div class="button-select" id="add-student">Show Student with no Class</div>
<table class="table" id="student_table">
<tbody>
<tr class="clickable_student" style="">
<td>Student
<label for="id_students_34">
<input type="checkbox" name="students" value="34" class="displaynone">
</label>
</td>
<td class="Class-name">
Class23
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student2
<label for="id_students_38">
<input type="checkbox" name="students" value="38" class="displaynone">
</label>
</td>
<td class="Class-name">
Class17
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student3
<label for="id_students_39">
<input type="checkbox" name="students" value="39" class="displaynone">
</label>
</td>
<td class="Class-name">
Class19
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student4
<label for="id_students_40">
<input type="checkbox" name="students" value="40" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student5
<label for="id_students_41">
<input type="checkbox" name="students" value="41" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student6
<label for="id_students_42">
<input type="checkbox" name="students" value="42" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student7
<label for="id_students_43">
<input type="checkbox" name="students" value="43" class="displaynone">
</label>
</td>
<td class="Class-name">
Class18
</td>
</tr>
</tbody>
</table>
thanks in advance.
you have to loop on tr then get td inside it and then hide tr of that td which is null using jquery.
here is the jquery code for checking each tr loop through
$("tr").each(function() {
var nonEmpty = $(this).find("td.Class-name").filter(function() {
return $(this).text().trim() != ""; //check the trimmed TD content - will make it ignore all white space
});
and this code is used to hide empty td which don't have class.
if (nonEmpty.length != 0) $(this).hide();
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("tr").each(function() {
var nonEmpty = $(this).find("td.Class-name").filter(function() {
return $(this).text().trim() != ""; //check the trimmed TD content - will make it ignore all white space
});
if (nonEmpty.length != 0) $(this).hide();
});
});
</script>
</head>
<body>
<div class="button-select" id="add-student">Show Student with no Class</div>
<table class="table" id="student_table">
<tbody>
<tr class="clickable_student" style="">
<td>Student
<label for="id_students_34">
<input type="checkbox" name="students" value="34" class="displaynone">
</label>
</td>
<td class="Class-name">
Class23
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student2
<label for="id_students_38">
<input type="checkbox" name="students" value="38" class="displaynone">
</label>
</td>
<td class="Class-name">
Class17
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student3
<label for="id_students_39">
<input type="checkbox" name="students" value="39" class="displaynone">
</label>
</td>
<td class="Class-name">
Class19
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student4
<label for="id_students_40">
<input type="checkbox" name="students" value="40" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student5
<label for="id_students_41">
<input type="checkbox" name="students" value="41" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student6
<label for="id_students_42">
<input type="checkbox" name="students" value="42" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student7
<label for="id_students_43">
<input type="checkbox" name="students" value="43" class="displaynone">
</label>
</td>
<td class="Class-name">
Class18
</td>
</tr>
</tbody>
</table>
</body>
</html>
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>
I am trying to use the jQuery to get the row that selected radio is in and also the selected radio button value when using django-tables2.
So, I have three columns in a table and I rendered it with django-tables2. The third columns is templatecolumn with the HTML template (buttons.html:
<form class="myForm">
<input type="radio" class="Yes" name="result" value="Yes">
<label for="Yes">Yes</label>
<input type="radio" class="No" name="result" value="No">
<label for="No">No</label><br>
</form>
I then add templatecolumn to the table ( I created my own table class by inheriting from tables.Table):
myTableCol={}
mylist = []
for i in queryResults:
mydic = {}
for j in i:
className=str(type(j)).split(".")[1]
mydic.update({className: j.name})
myTableCol.update({className: tables.Column()})
mylist.append(mydic)
myTableCol.update({'Action': tables.TemplateColumn(template_name="buttons.html", verbose_name=("Actions"), orderable=True)})
Meta = type('Meta', (object,), {'template_name':"django_tables2/bootstrap4.html", 'attrs':{"class": "paleblue"},})
myTableCol.update({'Meta':Meta})
QueryTable2=type('QueryTable', (tables.Table,), myTableCol)
The table is then rendered using {% render_table table %} that gives the html below. I am trying to get which radio button that was selected for the row.
$(document).ready(function () {
$('input').click(function() {
var $selectedButton = $('input[name=result]:checked').val();
var $row = $(this).closest("tr");
var $rowData = $row.children("td").map(function() {
return $(this).text();
}).get();
alert($selectedButton);
});});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="table-container">
<table class="paleblue">
<thead class="thead-default" >
<tr>
<th class="orderable">
UseCase
</th>
<th class="orderable">
MainFlow
</th>
<th class="orderable">
Actions
</th>
</tr>
</thead>
<tbody >
<tr scope="row" class="even">
<td >UC3_Make_Online_Payments</td>
<td >UC3_BasicFlowGroup_BF_5</td>
<td ><form class="myForm">
<input type="radio" class="Yes" name="result" value="Yes">
<label for="Yes">Yes</label>
<input type="radio" class="No" name="result" value="No">
<label for="No">No</label><br>
</form></td>
</tr>
<tr scope="row" class="odd">
<td >UC9_Create_New_Account</td>
<td >UC9_BasicFlowGroup_BF_3</td>
<td ><form class="myForm">
<input type="radio" class="Yes" name="result" value="Yes">
<label for="Yes">Yes</label>
<input type="radio" class="No" name="result" value="No">
<label for="No">No</label><br>
</form></td>
</tr>
<tr scope="row" class="even">
<td >UC5_Login</td>
<td >UC5_BasicFlowGroup_BF_3</td>
<td ><form class="myForm">
<input type="radio" class="Yes" name="result" value="Yes">
<label for="Yes">Yes</label>
<input type="radio" class="No" name="result" value="No">
<label for="No">No</label><br>
</form></td>
</tr>
</tbody>
</table>
</div>
The problem is that when a radio button is selected the value is based on the first row radio button that was selected. I am aware it would better to use form id selector instead of form class in the button.html, but I do not know how access the specific radio button from the specific table row.
How do I add a css id selector dynamically to a rendered table to the form and then use jquery to get the selected radio button?
To get the selected input, simply use
var $selectedButton = $(this).val();
instead of
var $selectedButton = $('input[name=result]:checked').val();
Fiddle
I have written a code that is working on a local server but online it is not working, Following shows the Code.
$(".super").each(function() {
var sup = "First Checkbox,Third Checkbox,Fourth Checkbox";
var array = sup.split(",");
$.each(array, function(i) {
$("input[type=checkbox][value='" + array[i] + "']").prop('checked', true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<tr>
<td width="150">
<label>First Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="First Checkbox">
</td>
<td width="180">
<label>Second Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="Second Checkbox">
</td>
<td width="150">
<label>Third Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="Third Checkbox">
</td>
<td width="130">
<label>Fourth Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="Fourth Checkbox">
</td>
</tr>
</table>
The above code shows multiple values are separated by commas and I need to get each value and enable the checkbox but It is working on local xampp but online on the server not working.
There's a few issues in your logic.
super is a reserved keyword in ECMA2015. You will need to rename that variable
The type and value attribute selectors need to be separated; ie. add the missing ]
You cannot have div elements as children of tr. Remove them.
You've repeated the same txtSup id attribute when they must be unique. Remove that attribute, you can change it to a class if needed.
$(".super").each(function() {
var sup = "First Checkbox,Third Checkbox,Fourth Checkbox";
var array = sup.split(",");
$.each(array, function(i) {
$("input[type=checkbox][value='" + array[i] + "']").prop('checked', true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<tr>
<td width="150">
<label>First Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="First Checkbox">
</td>
<td width="180">
<label>Second Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="Second Checkbox">
</td>
<td width="150">
<label>Third Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="Third Checkbox">
</td>
<td width="130">
<label>Fourth Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="Fourth Checkbox">
</td>
</tr>
</table>
Given the first two issues I don't see how your code works at all, regardless of server.
I have list if classes and sections in input type check box.
All the values classes and ids are coming dynamically. how call i select and deselect all the check box like
If i select "Class One" all its sections get selected
<table class="table table-striped table-bordered table-hover dataTable no-footer">
<thead>
<tr>
<th class="col-lg-2">#</th>
<th class="col-lg-2">Classes</th>
<th class="col-lg-2">Sections</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="#">
1 </td>
<td data-title="">
<label class="checkbox-inline"><input onclick="checkallsection(this.id)" id="One" type="checkbox" value="">One </label>
</td>
<td data-title="">
<label class="checkbox-inline"><input class="One" type="checkbox" name="secid[]" value="1">A</label>
<label class="checkbox-inline"><input class="One" type="checkbox" name="secid[]" value="2">B</label>
</td>
</tr>
<tr>
<td data-title="#">
2
</td>
<td data-title="">
<label class="checkbox-inline"><input onclick="checkallsection(this.id)" id="Two" type="checkbox" value="">Two
</label>
</td>
<td data-title="">
<label class="checkbox-inline"><input class="Two" type="checkbox" name="secid[]" value="5">A</label>
<label class="checkbox-inline"><input class="Two" type="checkbox" name="secid[]" value="6">B</label>
<label class="checkbox-inline"><input class="Two" type="checkbox" name="secid[]" value="7">C</label>
</td>
</tr>
<tr>
<td data-title="#">
3
</td>
<td data-title="">
<label class="checkbox-inline"><input onclick="checkallsection(this.id)" id="Three" type="checkbox" value="">Three
</label>
</td>
<td data-title="">
<label class="checkbox-inline"><input class="Three" type="checkbox" name="secid[]" value="8">A</label>
</td>
</tr>
<tr>
<td data-title="#">
4
</td>
<td data-title="">
<label class="checkbox-inline"><input onclick="checkallsection(this.id)" id="Four" type="checkbox" value="">Four
</label>
</td>
<td data-title="">
<label class="checkbox-inline"><input class="Four" type="checkbox" name="secid[]" value="9">A</label>
</td>
</tr>
<tr>
<td data-title="#">
5
</td>
<td data-title="">
<label class="checkbox-inline"><input onclick="checkallsection(this.id)" id="Five" type="checkbox" value="">Five
</label>
</td>
<td data-title="">
<label class="checkbox-inline"><input class="Five" type="checkbox" name="secid[]" value="10">A</label>
<label class="checkbox-inline"><input class="Five" type="checkbox" name="secid[]" value="11">B</label>
</td>
</tr>
</tbody>
</table>
Try like this: See Demo Here
HTML code:
<table class="table table-striped table-bordered table-hover dataTable no-footer">
<thead>
<tr>
<th class="col-lg-2">#</th>
<th class="col-lg-2">Classes</th>
<th class="col-lg-2">Sections</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="#">
1
</td>
<td data-title="">
<label class="checkbox-inline"><input class="cls" id="One" type="checkbox" value="">One </label>
</td>
<td data-title="">
<label class="checkbox-inline"><input class="One" type="checkbox" name="secid[]" value="1">A</label>
<label class="checkbox-inline"><input class="One" type="checkbox" name="secid[]" value="2">B</label>
</td>
</tr>
<tr>
<td data-title="#">
2
</td>
<td data-title="">
<label class="checkbox-inline"><input class="cls" id="Two" type="checkbox" value="">Two
</label>
</td>
<td data-title="">
<label class="checkbox-inline"><input class="Two" type="checkbox" name="secid[]" value="5">A</label>
<label class="checkbox-inline"><input class="Two" type="checkbox" name="secid[]" value="6">B</label>
<label class="checkbox-inline"><input class="Two" type="checkbox" name="secid[]" value="7">C</label>
</td>
</tr>
<tr>
<td data-title="#">
3
</td>
<td data-title="">
<label class="checkbox-inline"><input class="cls" id="Three" type="checkbox" value="">Three
</label>
</td>
<td data-title="">
<label class="checkbox-inline"><input class="Three" type="checkbox" name="secid[]" value="8">A</label>
</td>
</tr>
<tr>
<td data-title="#">
4
</td>
<td data-title="">
<label class="checkbox-inline"><input class="cls" id="Four" type="checkbox" value="">Four
</label>
</td>
<td data-title="">
<label class="checkbox-inline"><input class="Four" type="checkbox" name="secid[]" value="9">A</label>
</td>
</tr>
<tr>
<td data-title="#">
5
</td>
<td data-title="">
<label class="checkbox-inline"><input class="cls" id="Five" type="checkbox" value="">Five
</label>
</td>
<td data-title="">
<label class="checkbox-inline"><input class="Five" type="checkbox" name="secid[]" value="10">A</label>
<label class="checkbox-inline"><input class="Five" type="checkbox" name="secid[]" value="11">B</label>
</td>
</tr>
</tbody>
</table>
JS code:
$(document).on('click', '.cls', function() {
if($(this).parents('td').next("td").find('input').is(':checked')) {
$(this).parents('td').next("td").find('input').prop('checked', false);
} else {
$(this).parents('td').next("td").find('input').prop('checked', true);
}
});