Cloning element only once and removing it - javascript

I have set up the following JSFiddle to demonstrate what I am doing. As you can see, I have various inputs. Each input has a checkbox to add an additional row. If a checkbox is checked, it should add a new input underneath the checked input.
Now what I have seems to do that without any problems - although it could probably be improved.
At the moment I am having issues with
$(this).closest(".labelAndInput").remove();
So each section (I have given them different background colours to show the sections) should only be allowed to have one additional input. At the moment, if I check the box, uncheck it, then check it again, it adds a third input.
The above problem can probably be solved with the following. If a checkbox is unchecked, it should remove the cloned div. This is where I am having issues at the moment. How can I remove the clone if the checkbox is unchecked? It should remove the div it is related too, and not a random clone.
Any information appreciated.
Thanks

Simply give your clone a class to identify it exactly. jsfiddle
$(function() {
$('input:checkbox[name="labelNewline"]').change(function() {
if ( $(this).is(':checked') ){
var clone = $(this).parent().siblings(".labelAndInput").first().clone().insertAfter($(this).parent());
clone.addClass('clone');
} else {
$(this).parent().siblings(".clone").remove();
}
});
});

Related

Remove entire table row having checkbox which was unchecked , when user click on submit button

I have table with checkall/uncheckall check box functionality and table is having and some input fields like text boxes, dropdowns. User should select at least one checkbox for processing the data in the table. That is working fine. For example table is having 3 rows and user select any one checkbox and click on submit button then remaining two table rows should be removed and not being submitted. I tried with the below one .
$("input:not(:checked)").each(function () {
$('input:not(:checked)').closest('tr').remove();
});
But this one is removing entire table. So I need only those table rows which are unchecked should be removed. Any help would be greatly appreaciated.
Assuming you don't use <th></th>, your header row also got selected because that checkbox is also unchecked. May be that will be the reason all rows got deleted. Console input:not:(:checked) it . It will give clear idea.
Edit:
Then try this, may be this will work
$('#tableid').find('tr[input:not:(:checked)]').each(function()
{
$(this).remove();
}
It seems to be working fine for me: https://jsfiddle.net/r9zgvbqu/7/
Two comments, you are using the .each() function to do something for all elements selected by "input:not:(:checked)", but in that function selecting everything again. so you are just doing the same thing multiple times. You can skip that step, and also skip the .each()-$(this) combination that has been suggested, by straightup doing:
$("input:not(:checked)").closest('tr').remove();
This removes all the you want.
EDIT: Your problem is that you are selecting all non-checked inputs, including text inputs etc. You can specify the type of input you are selection: input[type=checkbox]:not(:checked)
In general, I would avoid selecting elements by their tag name. It's better to give the relevant checkboxes a class, and you can select them by class.
Here is a fixed version of your fiddle: https://jsfiddle.net/927sdh8n/
And here is a simpler and safer version using classes: https://jsfiddle.net/qz53wfxc/

JS library show/hide element on checkbox status

I'm fairly new to JS and am trying to write my own library using this blog post, and would like a hand. (Apologies if this is too vague for an SO question)
I'm trying to write a function that shows or hides a queried element based on the status of a queried checkbox (and another for a radio button if I can't do it in one method) on a form.
So I'm looking to end up with something like this:
$(divId).checkToggle(checkBoxId);
So the div will start as hidden. When the checkbox is clicked, the div will toggle to visible. When the checkbox is unchecked, I'd like the div to hide again and any input fields inside it to be cleared (the probably will be only one input field).
I know that this function isn't really going to be very combine-able or reusable, but I would use it so often for just that one thing that I'm going to overlook it.
Okay, enough preamble. Here's what I have so far.
Could I have some suggestions on how to change/finish my checkToggle method? Thanks!
This worked for me:
$(document).ready(function(){
$('#checkbox1').change(function() {
if($(this).attr('checked')) {
$("#myDiv").slideDown(1000);
}
else
{
$('#myDiv').slideUp(1000);
}
});
});

shopping list app: using checkboxes to cross off items

i'm creating a shopping list application via javascript/jquery and i'm having trouble using checkboxes to cross off items on the list. i'm getting close though. when a box is checked, all of the items in the list become crossed off, and also the text in the main text-input at the top of the application has the strikethrough quality as well. checking one of the boxes should only strikethrough the corresponding text next to it.
here is my javascript for this particular function:
$('#shopping-list').on('change','input[type=checkbox]',function(){
var input = $(this).parent().siblings('input[type=text]');
$('input').css('textDecoration','line-through');
});
also here is a link for the current version of the application:
https://dl.dropboxusercontent.com/u/91499081/ShoppingList/shoppingList.html
Simple mistake - made it many times myself.
jsFiddle demo
You correctly identify the specific input tag that you want to underline, and you assign that tag to a variable.
But in your next jQuery line, you put the variable name as a string, which tells jQuery that you want to get all elements of that type. Since "input" is a valid type of elements, all input elements are modified.
Therefore, change:
$('input').css('textDecoration','line-through');
To:
$(input).css('textDecoration','line-through');
I would also recommend choosing a different var name. Had you used a different var name, such as "myInput", you may have found the solution yourself.
Per your comment question:
To check/uncheck the text field:
jsFiddle example
$('#shopping-list').on('change','input[type=checkbox]',function(){
var input = $(this).parent().find('input[type=text]');
if ($(this).is(':checked') ) {
$(input).css('textDecoration','line-through');
}else{
$(input).css('textDecoration','none');
}
});
I think you're looking for:
$('#shopping-list').on('change','input[type=checkbox]',function(evt){
var checkbox = $(evt.target),
textInput = checkbox.next('input[type=text]');
textInput.css('text-decoration', checkbox.is(':checked') ? 'line-through' : 'none');
});
You were going up to the parent, then selecting all the input children that were text inputs, instead of only the text right after the check box.
Checking if the checkbox is checked will allow the line through to toggle as the user keeps clicking the box.

jQuery searchable checkbox list and tristate checkbox

I'm building a simple asp page on which I have list of peoples with checkbox on left of every name.
I've managed to create a simple jQuery script that allows hiding and showing rows of table based on input:
http://jsfiddle.net/Tq97v/ (first part)
As You can see I can enter part of name and then specific row are hidden.
Using red "x" I can uncheck all checkboxes.
What I'm trying to do now is to change that static red "x" into tristate checkbox.
Don't have idea how to even start.
Do I must add change listener to every checkbox in my list?
Second thing - how to create multiple instances of the same "plugin" on site.
Right now I'm identifying input by it, but it would be nice to call function with that input as param, and it would fine table after that input and create necessary logic.
This way I could call function multiple times on page to have more than one list.
I'm not asking for whole solution (of course it is always welcome :) ) but what I need is idea how to accomplish this in efficient way and as optimized as possible, because sometimes my list has 500+ elements.
P.S. don't look at HTML code, it is ASP generated.
I found this plugin: https://github.com/bcollins/jquery.tristate, but I have no idea how to use it with my list.
UPDATE:
I've managed to turn my code into functions, but right now I must call 3 functions for every list.
Here is my updated code: http://jsfiddle.net/65MEV/4/
How can I change it to one function? Will it be better?
This is my updated code. Still thinking about way of doing that Indeterminate Checkbox instead of my remove image.
UPDATE2
I build working code :)
http://jsfiddle.net/65MEV/9/
But I would like to improve it as much as possible.
Any suggestions are welcome!
A tristate checkbox is like the Three-Portal Device: an illusion.
What you actually want is to make the checkbox indeterminate (by setting the property of the same name to true). To implement this, you will need a change (or click) handler on each checkbox, then you'll need to check if all of them are in the same state, and if not then you set the indeterminate property. It's a hassle, really, because you rarely see indeterminate checkboxes and so most users don't know what to do with them. To be avoided, if possible.
To create multiple instances of the same plugin access elements relatively to an other element.
For example: in your case instead of keeping the item in a jQuery object var $tableRows = $('table.myList tr'); access them in the event.
$('#user_name').keyup(function () {
var sValue = $.trim($('input#user_name').val());
if(lastInput==sValue) return;
var $tableRows = $(this).next().next().find("table.myList tr");
if (sValue == '') {
$tableRows.show();
} else {
$tableRows.each(function () {
var oLabel = $(this).find('label');
if (oLabel.length > 0) {
if (oLabel.text().toLowerCase().indexOf(sValue.toLowerCase()) >= 0) {
$(this).show();
} else {
$(this).hide();
}
}
});
lastInput=sValue;
}
});
and you only have your actual list.
And for the tree state checkbox you don t need a plugin just add a button or link and every click check it status you can keep the status by jQuery data and change the element image according to this data.

How do I combine check all script and filtering?

I am new to JavaScript and jQuery, but have used HTML and CSS before. In any case, I appreciate the help. I have implemented the script discussed here http://net.tutsplus.com/tutorials/javascript-ajax/using-jquery-to-manipulate-and-filter-data/ for filtering data and the one discussed here http://www.dustindiaz.com/check-one-check-all-javascript/ for a check one to check all script. The problem is, when I filter the list of items and then use the check all box, it is checking even the JS items that are hidden from the user due to filtering. Does this make sense?
I have been trying to figure out how to edit the check all script so that only items with the "visible" class (as added to visible checkboxes with the filtering script) are checked with the checkAll button. The original script had:
var checks = document.getElementsByName('del[]');
I was trying to do something like this (it wasn't working, of course):
var visiblechecks = $('input:del[]:checked.visible');
among other things.
Thank you! Also, if you have a recommended resource, I would appreciate it.
var visiblechecks = $('input[name="del[]"]:checked:visible');
Your selector just needs a bit of refinement. Try:
$(".myCheckAllSelector").change(function () {
$("input[name='del[]']:visible").attr("checked", $(this).is(":checked"));
});
This should set the checked attribute of all currently visible checkboxes with the name del[] to the checked status of the check all box. You simply need to update the check all selector appropriately to target your master checkbox element.
You don't necessarily "need" to add a visible class as there is a :visible filter you can use to make that determination for you. However, just change your selector from input to input.visible if you still wish to use the class and remove the :visible filter..

Categories