<div id="select1" data="select">
<span>Select Option</span>
</div>
<div toggle="select1" style="display: none">
<table>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Bike" />
option 1
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Car" />
option 2
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="dog" />
option 3
</td>
</tr>
</table>
</div>
<div id="select2" data="select">
<span>Select Option</span>
</div>
<div toggle="select2" style="display: none">
<table>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Bike" />
option 1
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Car" />
option 2
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="dog" />
option 3
</td>
</tr>
</table>
</div>
Jquery
<script type="text/javascript">
$(document).ready(function () {
$('[data="select"]').click(function () {
var selectdiv = $(this);
$('[toggle="' + selectdiv.attr('id') + '"]').toggle(); ;
})
})
</script>
i have done it open the div above event . how to set in that event to close the opened div . also need to close div while click out of div or any action apart from div
if i opened one div need to close another one how to done it ?
actual output
I think you can hide all elements with the attribute toggle except the one that has to be opened.
$(document).ready(function () {
$('[data="select"]').click(function () {
var selectdiv = $(this);
var el = $('[toggle="' + selectdiv.attr('id') + '"]').toggle(); ;
$('[toggle]').not(el).hide()
})
})
Demo: Fiddle
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 want to make a logic that if a child checkbox is checked, it checks the parent checkbox too. The input can parent, child and both:
<input type="checkbox" name="checkbox[$counter]" class="parent" />
<input type="checkbox" name="checkbox[$counter]" class="child" />
<input type="checkbox" name="checkbox[$counter]" class="parent child" />
This structure:
1
2
3
4
5
6
7
will be look like this:
<table class="table">
<tr>
<td>
<input type="checkbox" name="checkbox[1]" class="parent" />
</td>
<td>
.
.
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[2]" class="child" />
</td>
<td>
.
.
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[3]" class="child" />
</td>
<td>
.
.
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[4]" class="parent" />
</td>
<td>
.
.
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[5]" class="child parent" />
</td>
<td>
.
.
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[6]" class="child" />
</td>
<td>
.
.
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[7]" class="child" />
</td>
<td>
.
.
</tr>
</table>
I want if I check 3, it checks 1 and if I check 6 it checks 5 and 4, too.
Also the checkboxes are in separate table rows, becouse I want to show some information structured in table next to the checkbox.
Can you show me a script what does it? I tried this, but it's not working:
$(document).ready(function() {
$('input.child').change(function() {
if ($(this).is(':checked')) {
$(this).closest('input.parent:checkbox').attr('checked', true);
}
});
});
The checkboxes are not parent-child relationship, thus the method .closest() will not work as it traverse's up starting from itself.
I would recommend you to assign classes with TR element and also attach event handler with them, traversing DOM will be easy.
<tr class="parent">...</tr>
<tr class="child">...</tr>
You could use combination of .prevAll() and .first() to get the targeted TR, then use .find() to get the checkbox.
Additionally, If you want to fire the change event trigger() method can be used.
$(document).ready(function() {
$('.child').on('change', ':checkbox', function() {
if ($(this).is(':checked')) {
var currentRow = $(this).closest('tr');
var targetedRow = currentRow.prevAll('.parent').first();
var targetedCheckbox = targetedRow.find(':checkbox');
targetedCheckbox.prop('checked', true).trigger('change');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr class="parent">
<td>
<input type="checkbox" name="checkbox[1]" />
</td>
</tr>
<tr class="child">
<td>
<input type="checkbox" name="checkbox[2]" />
</td>
</tr>
<tr class="child">
<td>
<input type="checkbox" name="checkbox[3]" />
</td>
</tr>
<tr class="parent">
<td>
<input type="checkbox" name="checkbox[4]" />
</td>
</tr>
<tr class="child parent">
<td>
<input type="checkbox" name="checkbox[5]" />
</td>
</tr>
<tr class="child">
<td>
<input type="checkbox" name="checkbox[6]" />
</td>
</tr>
<tr class="child">
<td>
<input type="checkbox" name="checkbox[7]" />
</td>
</tr>
</table>
Try below script,
$(document).on('change', 'input[type=checkbox]', function(e) {
$(this).siblings('ul').find("input[type='checkbox']").prop('checked', this.checked);
$(this).parentsUntil('input[type=checkbox]').children("input[type='checkbox']").prop('checked', this.checked);
e.stopPropagation();
});
With your current html structure you need make a link between childs and parents, for example with data attribute, now it works with any html structure, table, ul li or without these.
$(document).ready(function() {
$('input.child').on('change', function() {
var data = $(this).data('name');
if (this.checked) {
$('input.parent:checkbox[data-name="' + data + '"]').prop('checked', true);
$('input.parent:checkbox[data-parent="' + data + '"]').prop('checked', true);
} else {
$('input.parent:checkbox[data-name="' + data + '"]').prop('checked', false);
$('input.parent:checkbox[data-parent="' + data + '"]').prop('checked', false);
}
});
});
/* Optional, This is what I added for better look */
$('.child').each(function() {
$(this).parent().css({
paddingLeft: 20,
backgroundColor: '#c0c0c0'
});
});
$('.parent').each(function() {
$(this).parent().css({
backgroundColor: 'black'
});
});
td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr>
<td>
<input type="checkbox" name="checkbox[1]" class="parent" data-name="chck-1" />
</td>
<td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[2]" class="child" data-name="chck-1" />
</td>
<td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[3]" class="child" data-name="chck-1" />
</td>
<td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[4]" class="parent" data-name="chck-2" />
</td>
<td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[5]" class="child parent" data-name="chck-2" data-parent="chck-3" />
</td>
<td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[6]" class="child" data-name="chck-3" />
</td>
<td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox[7]" class="child" data-name="chck-3" />
</td>
<td>
</tr>
</table>
I am having below form with helpIcon for every form element with description.
How we can show help when we are hover on help icon and mouseout using jquery?
I am quit new for jquery. so please can someone give simple implementation?
<table>
<tbody>
<tr><td>
Name:
</td>
<td>
<input type="text" name="name" class="dipika">
</td>
<td>
<img src="help.png" id="imgNamehelp">
</td>
<td><div id="divNamehelp" style="display: none;"> This is Full Name</div></td>
</tr>
<tr><td>
Color:
</td>
<td>
<input type="radio" value="red" name="Color" class="dipika"> Red
<input type="radio" value="yellow" name="Color" class="dipika"> Yellow
</td>
<td>
<img src="help.png" id="imgColorhelp">
</td>
<td><div id="divColorhelp" style="display: none;"> This is color choice</div></td>
</tr>
<tr><td>
Hobbies:
</td>
<td>
<input type="checkbox" value="cricket" name="cricket" class="dipika"> Cricket
<input type="checkbox" value="kabdi" name="kabdi" class="dipika"> Kabadi
</td>
<td>
<img src="help.png" id="imgHobbieshelp">
</td>
<td><div id="divHobbieshelp" style="display: none;"> This is Hobbies choice</div></td>
</tr>
<tr><td>
Address:
</td>
<td>
<textarea class="dipika"></textarea>
</td>
<td>
<img src="help.png" id="imgAddresshelp">
</td>
<td><div id="divAddresshelp" style="display: none;"> This is Hobbies choice</div></td>
</tr>
</tbody>
</table>
Can anybody help with this issue? Thanks in advance.
$(document).ready(function(){
$('img[src="help.png"]').mouseover(function(){
$('#'+getDivId(this)).fadeIn(500);
}).mouseout(function(){
$('#'+getDivId(this)).fadeOut(500);
});
function getDivId(helpId){
var helpId = $(helpId).attr('id');
return helpId.replace('img','div');
}
});
$(document).ready(function(){
$('img[src="help.png"]').hover(function(){
$('#'+getDivId(this)).fadeIn(500);
},function(){
$('#'+getDivId(this)).fadeOut(500);
});
function getDivId(helpId){
var helpId = $(helpId).attr('id');
return helpId.replace('img','div');
}
});
I want to show/Hide the div on the basis of selection of checkbox values from the list.
Here is what I tried:-
function valueChanged() {
if ($('#ddlStatus_1').is(":checked"))
$("#divExpense").hide();
else
$("#divExpense").show();
}
and the html is
<div style="overflow-y: scroll; width: 320px; height: 100px;">
<table id="Table1" name="Status" onchange="valueChanged()">
<tr>
<td>
<input id="ddlStatus_0" type="checkbox" name="ddlStatus$0" value="20" /><label for="ddlStatus_0">Agreement</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_1" type="checkbox" name="ddlStatus$1" value="30" /><label for="ddlStatus_1">Registration
/ Conveyance Deed</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_2" type="checkbox" name="ddlStatus$2" value="40" /><label for="ddlStatus_2">7/12
Transfer on Name</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_3" type="checkbox" name="ddlStatus$3" value="50" /><label for="ddlStatus_3">Sold</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_4" type="checkbox" name="ddlStatus$4" value="60" /><label for="ddlStatus_4">Cancelled</label>
</td>
</tr>
</table>
</div>
<br />
<div id="div1">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Expense Information :
</td>
</tr>
</table>
</div>
<div id="divPayment">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Payment Information :
</td>
</tr>
</table>
</div>
But it is not working for me.
Add the change event to #ddlStatus_1 instead of table like following.
$('#ddlStatus_1').change(function() {
$("#divExpense").toggle(!this.checked);
})
Here is a running version of the code in my comment. You do not want to add the change to the table tag. If you need all checkboxes in the form to toggle something, then add a class to them and use data-attributes to see what to toggle
Note I changed div1 to divExpense
$(function() {
$('#ddlStatus_1').on("click", function() {
$("#divExpense").toggle(!this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<div style="overflow-y: scroll; width: 320px; height: 100px;">
<table id="Table1" name="Status">
<tr>
<td>
<input id="ddlStatus_0" type="checkbox" name="ddlStatus$0" value="20" />
<label for="ddlStatus_0">Agreement</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_1" type="checkbox" name="ddlStatus$1" value="30" />
<label for="ddlStatus_1">Registration / Conveyance Deed</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_2" type="checkbox" name="ddlStatus$2" value="40" />
<label for="ddlStatus_2">7/12 Transfer on Name</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_3" type="checkbox" name="ddlStatus$3" value="50" />
<label for="ddlStatus_3">Sold</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_4" type="checkbox" name="ddlStatus$4" value="60" />
<label for="ddlStatus_4">Cancelled</label>
</td>
</tr>
</table>
</div>
<br />
<div id="divExpense">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Expense Information :
</td>
</tr>
</table>
</div>
<div id="divPayment">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Payment Information :
</td>
</tr>
</table>
</div>
<div id=ControlId>
<span>Select Option</span>
</div>
</div>
<div id=ControlId + "_child" style="display: none" >
<table>
<tr>
<td valign="top" style="width: 165px" ><input type="checkbox" name="vehicle" value="Bike" /> option 1</td>
</tr>
<tr>
<td valign="top" style="width: 165px" ><input type="checkbox" name="vehicle" value="Car" /> option 2</td>
</tr>
<tr>
<td valign="top" style="width: 165px" ><input type="checkbox" name="vehicle" value="dog" /> option 3</td>
</tr>
</table>
</div>
i have added above more than one time in td's like following image
how to achieve id for main div in click event , actually my issue was if i click first div , finally added only opened
$("#" + ControlId).click(function () {
$("#" + ControlId + "_child").fadeIn("slow");
$("#" + ControlId + "_child").toggle();
});
this is my actual event code
try this
html
<div id="select1" data="select">
<span>Select Option</span>
</div>
<div toggle="select1" style="display: none">
<table>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Bike" />
option 1
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Car" />
option 2
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="dog" />
option 3
</td>
</tr>
</table>
</div>
<div id="select2" data="select">
<span>Select Option</span>
</div>
<div toggle="select2" style="display: none">
<table>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Bike" />
option 1
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Car" />
option 2
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="dog" />
option 3
</td>
</tr>
</table>
</div>
javascript
<script type="text/javascript">
$(document).ready(function () {
$('[data="select"]').click(function () {
var selectdiv = $(this);
$('[toggle]:not([toggle="' + selectdiv.attr('id') + '"])').hide();
$('[toggle="' + selectdiv.attr('id') + '"]').toggle(); ;
})
})
</script>
Why not
$("#" + ControlId).click(function () {
$("#" + this.id + "_child").fadeIn("slow");
$("#" + this.id + "_child").toggle();
});
instead of id give class for div
<div id="ControlId" class="ControlId">
<span>Select Option</span>
</div>
</div>
$(function()
{
$(".ControlId").click(function()
{
var div=$(this);
//hide or toggle child divs
});
});