How to write text below checked textbox? - javascript

Here is my HTML and jQuery code. The code is working good but the problem is when I click on one checkbox, the text "FINISHED" becomes visible below all the checkboxes instead of that one only.
My html code is:
$('.label__checkbox').click(function() {
if ($(".label__checkbox").is(':checked')) {
$(".finish").css("display", "block");
} else {
$(".finish").css("display", "none");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
<label class="label">
<input class="label__checkbox" type="checkbox" />
<span class="label__text">
<span class="label__check">
<i class="fa fa-check icon"></i>
</span>
</span>
</label>
<span class="finish">FINISHED</span>
</div>
<div class="center">
<label class="label">
<input class="label__checkbox" type="checkbox" />
<span class="label__text">
<span class="label__check">
<i class="fa fa-check icon"></i>
</span>
</span>
</label>
<span class="finish">FINISHED</span>
</div>
<div class="center">
<label class="label">
<input class="label__checkbox" type="checkbox" />
<span class="label__text">
<span class="label__check">
<i class="fa fa-check icon"></i>
</span>
</span>
</label>
<span class="finish">FINISHED</span>
</div>
<div class="center">
<label class="label">
<input class="label__checkbox" type="checkbox" />
<span class="label__text">
<span class="label__check">
<i class="fa fa-check icon"></i>
</span>
</span>
</label>
<span class="finish">FINISHED</span>
</div>

You can use DOM traversal method to target them in the current element context i.e. this
.closest() can be use to traverse up to label then use .next() to target the <span>
$('.label__checkbox').change(function() {
var finish = $(this).closest('.label').next(".finish");
//var finish = $(this).closest('.center').find(".finish");
if ($(this).is(':checked')) {
finish.css("display", "block");
} else {
finish.css("display", "none");
}
}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
<label class="label">
<input class="label__checkbox" type="checkbox" />
<span class="label__text">
<span class="label__check">
<i class="fa fa-check icon"></i>
</span>
</span>
</label>
<span class="finish">FINISHED</span>
</div>
<div class="center">
<label class="label">
<input class="label__checkbox" type="checkbox" />
<span class="label__text">
<span class="label__check">
<i class="fa fa-check icon"></i>
</span>
</span>
</label>
<span class="finish">FINISHED</span>
</div>

Related

Adding class to parent element where sub-child element input value is empty?

When clicking on button #btn-modal-clear I would like to select and add a class to the li where it's sub-child input is empty (value=""). How do I do this?
html:
<li>...<li>
<li>
<a class="myCheckboxLink" tabindex="0">
<span class="myCheckboxSpan">
<i class="fa fa-check fa-check-checkbox" aria-hidden="true"></i>
</span>
<label class="radio">
<input value="" type="radio">Name
</label>
</a>
</li>
<li>...<li>
js:
$('#btn-modal-clear').on('click', function() {
$('.select-name').multiselect('select', ['']);
$('.select-name').multiselect('updateButtonText');
... .addClass("active");
});
So result should be:
html:
<li>...<li>
<li class="active">
<a class="myCheckboxLink" tabindex="0">
<span class="myCheckboxSpan">
<i class="fa fa-check fa-check-checkbox" aria-hidden="true"></i>
</span>
<label class="radio">
<input value="" type="radio">Name
</label>
</a>
</li>
<li>...<li>
Fiddle: https://jsfiddle.net/ewm9pbqv/
You can use .filter() with .addClass() in this case:
$('li').filter(function() {
return $(this).find('input:radio').val() == "";
}).addClass('active');
Try this
$('li input[value=""]').closest("li").addClass('active');

Iterate in jquery to get values of input text

I have three rows of which I want to get the values of all the text by looping them all, so I tried something like this.
var collection = $(".vendorDaterow");
collection.each(function() {});
But while debugging i didn't find the value in any of the property.
Below is my html
<tr>
<td>
<div class="row noPadding vendorForm">
<div class="vendorDaterow">
<div class="vendorName" id="dvVendorNameData">
<label>SP Vender Name</label><span><input type="text" name="nmVendorData" id="txtVendorName" /></span>
</div>
<div class="vendorFromDate">
<label>From Date</label><span class="datepicker"><input type="text" name="spFromDate" id="spFromDate" class="dateClass" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
</div>
<div class="vendorToDate">
<label>To Date</label><span class="datepicker"><input type="text" name="spToDate" id="spToDate" class="dateClass1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
</div>
</div>
<div class="add">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
<i class="max"><label>(Maximum 5 Vendors)</label></i>
</div>
</td>
</tr>
What should I do to get the values of the input text of all the element
This is walking down the tree method. You can make it shorter but it is self-explanetory.
var collection = $(".vendorDaterow");
collection[0].childNodes.forEach((element)=>{
if (element.tagName == 'DIV'){
//console.log(element.childNodes)
element.childNodes.forEach((element) => {
if(element.tagName == 'SPAN') {
//console.log(element.childNodes);
element.childNodes.forEach((element) => {
if(element.tagName == 'INPUT'){
console.log(element.value)
}
})
}
});
}
})
It iterates and finds the proper elements, assuming that the structure will remain the same. You can remove comment tags to get the flow.
Attempt no2.
function recursiveEach($element){
$element.children().each(function () {
var $currentElement = $(this);
// This is our input so we do something with it
if($currentElement[0].tagName == 'INPUT') {
console.log(" the values are: " + $currentElement[0].value)
}
//////////// Loop her children
recursiveEach($currentElement);
});
}
//////////// Parent div
recursiveEach($(".vendorDaterow"));
The syntax is more bit jquery-esk, but it has nice recursive form of iteration.
The following snippet prints only the input value when it changes. We use the selector $(".vendorDaterow") and the delegation event on the input that have changed.
$(".vendorDaterow").on('change', 'input', function(){
var text = $(this).val();
console.log(text);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
<div class="row noPadding vendorForm">
<div class="vendorDaterow">
<div class="vendorName" id="dvVendorNameData">
<label>SP Vender Name</label><span><input type="text" name="nmVendorData" id="txtVendorName" /></span>
</div>
<div class="vendorFromDate">
<label>From Date</label><span class="datepicker"><input type="text" name="spFromDate" id="spFromDate" class="dateClass" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
</div>
<div class="vendorToDate">
<label>To Date</label><span class="datepicker"><input type="text" name="spToDate" id="spToDate" class="dateClass1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
</div>
</div>
<div class="add">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
<i class="max"><label>(Maximum 5 Vendors)</label></i>
</div>
</td>
</tr>
The snippet below prints all the input values after a change. After a change in an input, each() will loop over all the input elements inside the class vendorDaterow and get their values.
var save;
$(".vendorDaterow input").on("change",function(){
save = []
$(".vendorDaterow input").each(function(){
var text = $(this).val();
if(text){
save.push(text);
}
})
console.log(save);
})
//console.log($(".vendorDaterow").html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<div class="row noPadding vendorForm">
<div class="vendorDaterow">
<div class="vendorName" id="dvVendorNameData">
<label>SP Vender Name</label><span><input type="text" name="nmVendorData" id="txtVendorName" /></span>
</div>
<div class="vendorFromDate">
<label>From Date</label><span class="datepicker"><input type="text" name="spFromDate" id="spFromDate" class="dateClass" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
</div>
<div class="vendorToDate">
<label>To Date</label><span class="datepicker"><input type="text" name="spToDate" id="spToDate" class="dateClass1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
</div>
</div>
<div class="add">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
<i class="max"><label>(Maximum 5 Vendors)</label></i>
</div>
</td>

Generate tr on click of Image button jquery

I have a scenario where I want to duplicate the existing <tr> whenever I click on + button which is: <i class="fa fa-plus" aria-hidden="true"></i>
Below is my <tr>. how to generate this using jquery or javascript
<tr>
<td>
<div class="row noPadding vendorForm">
<div class="vendorDaterow">
<div class="vendorName">
<label>SP Vender Name</label><span>Shri Kamalkanth Co.</span>
</div>
<div class="vendorFromDate">
<label>From Date</label><span class="datepicker"><input type="text" id="spFromDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
</div>
<div class="vendorToDate">
<label>To Date</label><span class="datepicker"><input type="text" id="spToDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
</div>
</div>
<div class="add">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
<i class="max">(Maximum 5 Vendors)</i>
</div>
</td>
</tr>
You can use this
(function () {
var toAddCloneCount = 2;
$('.add').on('click', function() {
var $tr = $(this).closest('tr');
var $tr2 = $tr.clone(true, true);
$tr2.find(".vendorName").children('label').remove();
$tr2.find(".add").children().remove();
$tr2.find(".vendorFromDate").children('label').remove();
$tr2.find(".vendorToDate").children('label').remove();
$tr2.find('#txtVendorName').prop('id', 'txtVendorName' + toAddCloneCount);
$tr2.find('#spFromDate1').prop('id', 'spFromDate' + toAddCloneCount);
$tr2.find('#spToDate1').prop('id', 'spToDate' + toAddCloneCount++);
$tr2.insertAfter($tr);
});
})();
.vendorName,.vendorFromDate,.vendorToDate{
width:33%;float:left;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div class="row noPadding vendorForm">
<div class="vendorDaterow">
<div class="vendorName">
<label>SP Vender Name</label><span>#*Shri Kamalkanth Co.*#<input type="text" name="nmVendorData" id="txtVendorName" /></span>
</div>
<div class="vendorFromDate">
<label>From Date</label><span class="datepicker"><input type="text" id="spFromDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
</div>
<div class="vendorToDate">
<label>To Date</label><span class="datepicker"><input type="text" id="spToDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
</div>
</div>
<div class="add">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
<i class="max">(Maximum 5 Vendors)</i>
</div>
</td>
</tr>
</table>
You'd first clone() the parent <tr/> by finding it through closest() and insert it as a sibling via insertAfter(). Make sure to also pass true as arguments so that all descendants are passed along with their events and data.
$('.add').on('click', function() {
var $tr = $(this).closest('tr');
$tr.clone(true, true).insertAfter($tr)
});
Use clone() and after():
$(document).ready(function(){
$("i.fa-plus").click(function(){
var val = $("tr:last").clone()
$("tr:last").after(val)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div class="row noPadding vendorForm">
<div class="vendorDaterow">
<div class="vendorName">
<label>SP Vender Name</label><span>Shri Kamalkanth Co.</span>
</div>
<div class="vendorFromDate">
<label>From Date</label><span class="datepicker"><input type="text" id="spFromDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
</div>
<div class="vendorToDate">
<label>To Date</label><span class="datepicker"><input type="text" id="spToDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
</div>
</div>
</div>
</td>
</tr>
</table>
<div class="add">
<i class="fa fa-plus" aria-hidden="true">+</i>
</div>
<i class="max">(Maximum 5 Vendors)</i>
You need the template of the <tr> somehow. Use some kind of templating engine or the lazy way: copy it on page load. (to not have existing input when copying the <tr>)
var $template = $('yourTrSelector').clone();
And then paste it on button click.
$('yourButtonSelector').on('click', function(){
$('yourTableSelector').append($template.copy());
});

Change Nearest Class when checkbox is selected

I want to use jquery/javascript to change the class of the <span class="thm-card-status">Active</span> when the item is checked/unchecked. There will be a lot of <div class="thm-card"></div> containers so it should only be changed for that specific card.
<div class="thm-card">
<div class="thm-card-media">
<img id="editableimage1" src="https://thehomemag.com/Images/HomeSlider/8.jpg" alt="#" class="img-responsive">
<div class="thm-card-overlay">
<form class="thm-form">
<div class="form-group"><!--Default Checkbox Item-->
<label for="__FOR__">
<input type="checkbox" class="square thm-checkbox-status" id="__ID__" type="checkbox" value="true">
<span class="thm-form-label-side">Active</span>
</label>
<i class="fa fa-question-circle"></i>
</div>
</form><!--Form-->
</div>
<span class="thm-card-status">Active</span>
</div>
<div class="thm-card-content">
<div class="thm-card-details">
<h4>THM Slider Main</h4>
</div>
<div class="thm-card-control">
<div class="thm-card-links">
View
Edit
<span class="thm-card-info"><i class="fa fa-star-o"></i></span>
<span class="thm-card-info"><i class="fa fa-trash"></i></span>
</div>
</div>
</div>
</div>
EDIT:
I've tried:
$('.thm-checkbox-status').change(function() {
if($(this).is(':checked')) {
$('.thm-card-status').attr('checked', '').closest('.thm-card-status').addClass('thm-card-status-active');
} else {
$('.open_sub_ja').closest('div').removeClass('someclass');
}
});
And
$("thm-checkbox-status:checkbox").on('change', function(){
$(this).closest('.thm-card-status').attr('class', 'thm-card-status-active');;
});
Here's a working example. I made the thm-card-status-active green, so that you can see it work.
$(function() {
$('input.thm-checkbox-status').change(function() {
if($(this).prop("checked") == true){
$(this).closest('div.thm-card').find('span.thm-card-status').addClass('thm-card-status-active');
} else {
$(this).closest('div.thm-card').find('span.thm-card-status').removeClass('thm-card-status-active');
}
});
});
.thm-card-status-active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thm-card">
<div class="thm-card-media">
<img id="editableimage1" src="https://thehomemag.com/Images/HomeSlider/8.jpg" alt="#" class="img-responsive">
<div class="thm-card-overlay">
<form class="thm-form">
<div class="form-group"><!--Default Checkbox Item-->
<label for="__FOR__">
<input type="checkbox" class="square thm-checkbox-status" id="__ID__" type="checkbox" value="true">
<span class="thm-form-label-side">Active</span>
</label>
<i class="fa fa-question-circle"></i>
</div>
</form><!--Form-->
</div>
<span class="thm-card-status">Active</span>
</div>
<div class="thm-card-content">
<div class="thm-card-details">
<h4>THM Slider Main</h4>
</div>
<div class="thm-card-control">
<div class="thm-card-links">
View
Edit
<span class="thm-card-info"><i class="fa fa-star-o"></i></span>
<span class="thm-card-info"><i class="fa fa-trash"></i></span>
</div>
</div>
</div>
</div>
$('.thm-checkbox-status').change(function(){
$(this).closest('.thm-card-overlay').next().addClass('something');
});

On click and visibility for 2 DIV

With this code I want setVisibility 2 DIV, for the moment there is only 1 DIV = "Note-question-sub", i want add an other div :
<label for="note2" title="Passable">
<a role="button" class="btn btn-note btn-xs" onclick="setVisibility('Note-question-sub', 'block');">
<i class="fa fa-plus rouge" aria-hidden="true"></i>
<span class="sr-only">Passable</span>
</a>
<input type="radio" value="2" name="note" id="note2" />
</label>
This is my JS code:
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
Thank you so much in advance
You can call setVisibility twice
<label for="note2" title="Passable">
<a role="button" class="btn btn-note btn-xs" onclick="setVisibility('Note-question-sub', 'block'); setVisibility('YOUR_SECOND_DIV', 'block'); "><!--YOUR_SECOND_DIV is your second div-->
<i class="fa fa-plus rouge" aria-hidden="true"></i>
<span class="sr-only">Passable</span>
</a>
<input type="radio" value="2" name="note" id="note2" />
</label>

Categories