I have the following question:
I have a couple of checkboxes (at the moment 11) and what I want to do now is "building" a list dynamically, depending on the value of the checkboxes, so having something like this:
A user comes, ticks a checkbox and one li is appearing, when he ticks the next one, the next li is appearing, when he ticks the next one, again one li is appearing and so on (when he unticks one of them, the li should disappear again). I'm quite sure this can work with JS, but I have no idea how to realize it.
What I have is a <ul> and all the checkboxes defined with
<input type="checkbox" name="check_phone" id="check_phone"/>
<label for="check_phone"><span></span>Phone Number</label>
(Every checkbox has it's individual name)
What I think is going to be the biggest problem is creating the list-points dynamically, but I really hope somebody knows how to do this.
What I already thought about is just having 11 list-points in my list, all set to display:none and then just setting them to display:block when a checkbox is checked, but this will propably not work because I'm using a plugin to resort the list after this, and having 11 list-points, but just 2 visible or anything like that won't work.
Thanks for your help!
Here is a very quick demo, each time a checkbox is changed it creates all checked list items.
$(document).ready(function(){
$('.item').on('change', function() {
var $list = $('ul#checked').empty();
$('.item:checked').each(function(index, item) {
var itemName = $(item).prop('name');
var text = $('label[for='+itemName+']').text()
$('<li></li>')
.text(text)
.appendTo($list)
;
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="item" name="check_phone" id="check_phone"/>
<label for="check_phone"><span></span>Phone Number</label>
<ul id="checked">
</ul>
$("[name^='check_']").click(function(){
$("li."+ this.name).toggle( this.checked );
});
#check_list li{ display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" name="check_phone"/>Phone Number</label>
<label><input type="checkbox" name="check_mobile"/>Mobile Number</label>
<ul id="check_list">
<li class="check_phone">PHONE LI</li>
<li class="check_mobile">MOBILE LI</li>
</ul>
I think this will do it. You just have to set the names of the list items to be the same as their corresponding checkboxes' names.
$("input:checkbox").click(function() {
var current = $(this),
linkedListCorrespondingElement = $('#list-id > li[' + current.attr('name') + ']');
if (current.is(":checked")) {
linkedListCorrespondingElement.show();
} else {
linkedListCorrespondingElement.hide();
}
});
Related
I tried to set data-active attribute of <li> element to Y "Yes", or N "No" according to the active checkbox states either checked or unchecked respectively.
My sample code is like this:
$(document).ready(function() {
$('body').on('change','#active',function(){
li = $(this).parent();
if($(this).attr('checked')=='true') {
$(this).attr('checked','false');
li.attr('data-active','N');
} else {
li.attr('data-active','Y');
$(this).attr('checked','true');
}
console.log(li.data('active'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ol class="example">
<li data-active="N">Option2 (Active <input id="active" type="checkbox">)</li>
</ol>
From my code above, the event handler on #active matched only in else clause, regardless to whatever the checkbox state is.
Understanding that there are plenty of similar questions to mine, however I tried them but none solves my problem.
How can I do to toggle data-active to "yes" or "no" according to checkbox state? Thanks.
You should use .data and .prop instead of .attr
Hope it helps!
$(document).ready(function() {
$('body').on('change','#active',function(){
li = $(this).parent();
if ($(this).prop('checked')) {
li.data('active','Y');
} else {
li.data('active','N');
}
console.log(li.data('active'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ol class="example">
<li data-active="N">Option2 (Active <input id="active" type="checkbox">)</li>
</ol>
Hi :) a subject very explanatory I guess. I know this question was asked before, but none of the proposed solutions worked with the mmenu plugin.
Here is the link to use checkbox:
http://mmenu.frebsite.nl/documentation/addons/toggles.html
I used both ways to verify if a checkbox was checked:
HTML
//bicisenda is the input id.
<input id="bicisenda" type="checkbox" name="poi" value="Bicisenda" class="Toggle">
JS/JQuery
$('ul li ul li #bicisenda').click(function() {
var _checked = $("#bicisenda").is(":checked");
if (_checked) {
console.log("Checked");
}
});
The author'splugin suggested me to try the code below:
$('#bicisenda').change(function() {
var _checked = $("#bicisenda").is(":checked");
if (_checked) {
console.log("Checked");
}
});
His explanation was that with this add-on the input is hidden, so I see a label that is linked to the input. Summed it up, I don't click the input.
However his suggestion didn't work either.
Any ideas how to check if a checkbox (or radiobutton) is checked?, thanks so much in advance
Well after digging deeper with the plugin code, I finally get it working.
The solution was the following
HTML
<input id="bicisenda" type="checkbox" name="bic" value="Bicisenda" class="Toggle">
JQuery
I made a function that is called in the html code.
function bicis() {
var $bicisendas = $('input[name="bic"');
$bicisendas.click(function() {
if ($bicisendas.is( ':checked' ))
{
console.log("Checked");
}
});
}
I store the input jquery object in the variable $bicisendas and then I check the checked property when the click event occurs. I couldn't check for the property straightforwardly because the check button was wrapped by a label. I needed to isolate the element in that way to rid of the wrapper.
This is my reasoning but being me a js/html5 newcomer any more elaborated explanations or solution are welcome :)
$('ul li label span #bicisenda').click(function() {
if(this.checked) {
console.log("Checked");
alert("checked");
} else {
console.log("UnChecked");
alert("Un Checked");
}
});
input[type="checkbox"] {visibility: hidden;position: absolute}
label {padding: 20px;cursor: pointer;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li>
<label><span> <!--img src="imagenes/bird1.png" /--><a href="#pi/Bicesendas">Bicisendas
<input id="bicisenda" type="checkbox" name="poi" value="Bicisenda" class="Toggle"></a>
</span>
</label>
</li>
</ul>
Background
HTML Page having navigation on left and body on right. In Navigation, five tabs are there. ul is being used and several li elements exists in each vertical tab. Each vertical tab has search box to filter the data.
1) HTML Code
<h3>First</h3>
<div>
<input type="text" id="Searchtab1" />
<ul id="Firstul">
<li>Germany</li>
<li>France</li>
<li>Sydney</li>
</ul>
</div>
Script code
$("#Searchtab1").on("keyup click input", function () {
if (this.value.length > 0) {
$("#Firstul li").hide().filter(function () {
return $(this).text().toLowerCase().lastIndexOf($("#Searchtab1").val().toLowerCase(),0)== 0;
}).show();
}
else {
$("#Firstul li").show();
}
Similarly there are five vertical navigation tab has similar code. Now the problem is there is one requirement to have one global search box on top of these searches i.e. One search box on top of HTML which will filter all navigation tabs. User can further filter on individual tabs. Basic filter is working fine when i search again on individual navigation it lists all elements again. Basically the global search takes precedence followed by local search, it should be able to handle case when user changes anything on Globalsearch/local search, it should change by considering the both search options(global first)
This is what i have tried
FiddleLink
Can someone suggest how to correct this.
Try this:
Add class (alluls) for all ul elems (or use some jquery selector to select them) and:
$("#Searchtab1").on("keyup input", function () {
if (this.value.length > 0) {
$(".alluls").each(function(){
$(this).children().hide().filter(function () {
return $(this).text().toLowerCase().lastIndexOf($("#Searchtab1").val().toLowerCase(),0)== 0;
}).show();
});
}
else {
$(".alluls li").show();
}
Edit: removed click event
http://jsfiddle.net/EchoSin/p5jxB/6/
Have you tried something like this JSFIDDLE?
Link: https://jsfiddle.net/umaar/t82gZ/
HTML
<form id="live-search" action="" class="styled" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" value="" />
<span id="filter-count"></span>
</fieldset>
</form>
<nav>
<ul>
<li>Jim James</li>
<li>Hello Bye</li>
<li>Wassup Food</li>
<li>Contact Us</li>
<li>Bleep bloop</li>
<li>jQuery HTML</li>
<li>CSS HTML AJAX</li>
<li>HTML5 Net Set</li>
<li>Node Easy</li>
<li>Listing Bloop</li>
<li>Contact HTML5</li>
<li>CSS3 Ajax</li>
<li>ET</li>
</ul>
</nav>}
JavaScript
$(document).ready(function(){
$("#filter").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;
// Loop through the comment list
$("nav ul li").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
// Update the count
var numberItems = count;
$("#filter-count").text("Number of Comments = "+count);
});
});
Granted this isn't your exact answer, made for just you! But I created that fiddle and maybe it can help you! If you want a different fiddle see the above answer! (EchoSin's)
$("#Searchtab1").on("keyup input", function () {
if (this.value.length > 0) {
$(".alluls").each(function(){
$(this).children().hide().filter(function () {
return $(this).text().toLowerCase().lastIndexOf($("#Searchtab1").val().toLowerCase(),0)== 0;
}).show();
});
}
else {
$(".alluls li").show();
}
https://jsfiddle.net/EchoSin/p5jxB/6/
May be I'm not clear with my title, looks messy, so here is my code. Making a plugin in WordPress.
<script type="text/javascript">
$(document).ready(function() {
$("input[name$='radio_btn']").click(function() {
var test = $(this).val();
$("div.togglediv").hide();
$("#togglediv" + test).show();
});
});
</script>
I have two radio buttons in a form to input data:
<label><input type="radio" name="radio_btn" checked="checked" value="2"><strong>Paste a Code</strong></input></label>
, or
<label><input type="radio" name="radio_btn" value="3"><strong>Put an Image</strong></input></label>
And here are my two divs:
<div id="togglediv2" class="togglediv">div 1</div>
<div id="togglediv3" class="togglediv" style="display: none;">div 2</div>
Scenario: I'm using the same form for Inserting Data and Editing data as well. When inserting, I can toggle between the two divs, where the first one is checked by default. If I click on the other, then the divs are toggling nicely, I can use any one of them at a single time. So the inserting thing is fine.
Now, when I'm going to edit my data, I'm getting the data using $_GET[] and db query, and passing them to their fields accordingly and they are doing well too. But just the matter of toggling here, when data for <div id="togglediv2"> is isset showing, data for <div id="togglediv3"> is isset is also showing, but if not toggled by click the field is not visible you know. :(
I tried in a basic way swapping the HTML checked="checked" from one to another, I failed, because the jQuery isn't matching them.
So, I need to change the jQuery in a way so that, the toggling works when I'm inputting, as well as when editing my data. What are the changes I can do to change my jQuery to achieve this into my desired way?
You have 2 options:
1) Show/hide divs in your php
2) Pass value of "test" to javascript and add
$("#togglediv" + test).click();
In fact there is a 3th option, which I prefere. Create a .hidden css class and add in your php (to a togglediv which is hidden obvieusly) when you render the page. Then instead of hide()/show() use addClass('hidden') and removeClass('hidden'). I'm not sure if this will be slower/faster but I think it makes it more readable.
CSS
.hidden { display: none; }
JS
<script type="text/javascript">
$(document).ready(function() {
$("input[name$='radio_btn']").bind('change', function() {
var test = $(this).val();
$("div.togglediv").removeClass('hidden');
$("#togglediv" + test).addClass('hidden');
});
});
</script>
Give this a try (it worked for me).
It does not show the DIVs when initially loaded, they will show when a radio button is selected.
I added the jQuery library link I used, just in case.
<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div.togglediv").addClass('hidden');
$("input[name$='radio_btn']").click(function() {
var test = $(this).val();
$("div.togglediv").hide();
$("#togglediv" + test).show();
});
});
</script>
<style>
.hidden { display: none; }
</style>
</head>
<body>
<label><input type="radio" name="radio_btn" value="2"><strong>Paste a Code</strong></input></label>
, or
<label><input type="radio" name="radio_btn" value="3"><strong>Put an Image</strong></input></label>
<div id="togglediv2" class="togglediv">div 1</div>
<div id="togglediv3" class="togglediv">div 2</div>
</body>
</html>
I would use two hidden inputs that I would toggle the same ways as the divs to know which form is being submited, hiding the div in which the data is entered will still set the variables inside the div for php.
So I would have
$("input[name$='radio_btn']").click(function() {
var test = $(this).val();
$("div.togglediv").hide();
$("input.togglevalue").attr('disabled', 'disabled');
$("input#toggleinput" + test).removeAttr('disabled');
$("#togglediv" + test).show();
});
Then in php I would have these two inputs in each of the divs
<div id="togglediv2">
// The current div content
<input type="hidden" name="togglediv2" value="1" class="togglevalue" id="toggleinput2" />
</div>
and
<div id="togglediv3">
// The current div content
<input type="hidden" name="togglediv3" value="1" class="togglevalue" id="toggleinput3" />
</div>
Then in php I would check for these inputs if they are set so you have:
<?php
if (isset($_GET['togglediv2'])){
// Do actions for Paste a Code
} elseif (isset($_GET['togglediv3'])){
// Do actions for Put an Image
}
?>
I'm making an ingredients application where users insert ingredients
My application looks like this:
As you can see, the first ingredients span doesn't have a X at the end, because you must have at least one ingredient, but the rest of the ingredient spans do. I'm also using the Jquery Sortable Plugin so if you click near the outside of any of the ingredient spans, you can change the order of the ingredients. This works fine, except if you move the first ingredient span, then that span doesn't have an X at the end, even if you move it to the last spot.
So what I'm trying to do is make the first ingredient span always have no X at the end, even if switched order with another ingredient span. I tried this:
$('ingredientsCOUNT > span:first').hide(deleteButton);
but it didn't work? Any other suggestions? All help is greatly appreciated, and here's my code:
HTML (the php can just be ignored!)
<div class='formelementcontainer funky'>
<label for="ingredient">Ingredients</label>
<div id='ingredientsCOUNT' class='sortable'>
<span>
<input type="text" class='small' name="ingredient" id="ingredient" placeholder='QTY'/>
<select name='measurements'>
<option value='' name='' checked='checked'>--</option>
<?foreach ($measurements as $m):?>
<option value='<?=$m->id;?>'><?=$m->measurement;?></option>
<?endforeach;?>
</select>
<input type="text" name="ingredient" id="ingredient" placeholder='Ingredient'/>
</span>
</div>
<div class="clear"></div>
<div class='addSPAN tabover'>
<a class='float-right' id='btnAddIngredients' href='#'>Add Ingredient</a>
</div>
</div>
jQuery
(function($) {
$(document).ready(function () {
$('#btnAddIngredients').click(function () {
var num = $('#ingredientsCOUNT span').length;
var newNum = new Number(num + 1);
var deleteButton = $("<a class='float-right' style='margin:10px 2px;' href='#'><img src='<? echo base_url()."public/img/delete.png";?>' height='11' width='11' /></a>");
deleteButton.click(deleteThis);
$('#ingredientsCOUNT > span:first')
.clone()
.attr('name', 'ingredient' + newNum)
.append(deleteButton)
.appendTo('#ingredientsCOUNT')
.fadeIn();
$('ingredientsCOUNT > span:first').hide(deleteButton); //THIS IS MY SOLUTION THAT DIDN'T WORK
});
function deleteThis() {
var span = $(this).closest('span')
span.fadeOut('slow', function() { span.remove(); });
}
$( ".sortable" ).sortable(); //jQuery Sortable initialized
});
})(jQuery);
How about hiding it with CSS? The following assumes you added a class delete-button to your delete links:
#ingredientsCOUNT > span:first-child .delete-button { display: none; }
With that CSS, you can reorder the list, add or remove items, and the first delete button will never show.
Since :first-child is quirky in oldIE ( https://developer.mozilla.org/en-US/docs/CSS/:first-child#Internet_Explorer_notes ), it's possible to use the Sortable API like this:
$(".sortable").sortable({
update: function (event, ui) {
var rows = $("#ingredientsCOUNT").children("span");
rows.removeClass("first-child");
rows.first().addClass("first-child");
}
});
(there's probably a better way to utilize the event and/or ui parameters)
This way, you wouldn't have to determine which row to add a delete button to; you would always include a delete button in every row in your HTML. Then, when a sorting is done, the jQuery in the stop event (EDIT: update event) will hide the first row's delete button and show the rest (via classes).
Of course, you would need this CSS:
#ingredientsCOUNT > span.first-child a.delete-button {
display: none;
}
And to add a delete-button class to your delete buttons <a>
EDIT:
I changed the Sortable method from stop to update so that it only runs the code when the sorting arrangement has actually changed, after the sorting is done.