How to check if a checkbox is checked using *jquery mmenu plugin* - javascript

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>

Related

How to toggle data attribute value according to checkbox states?

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>

How to hide placeholder on a button click event?

I have an input text field with placeholder and its value as shown below:
<input type="text" name="test" placeholder="testing">
and I have two buttons, one is used to hide and another one is used to show the placeholder:
<button id="btn-hide">Hide</button>
<button id="btn-show">Show</button>
I want to hide the placeholder when I click on the button hide and show the placeholder when I click on the button show.I have googled and I come to know that it is possible to do by using css, but I still can not find any solution. Can anyone help me either using jquery or css or whatever? Thank you so much for answering my question.
If you wan't jQuery solution. Save your placeholder in a global var so you can reset it.
var placeholder = $('#txtInput').attr('placeholder');
$('#btn-hide').on('click', function() {
$('#txtInput').attr('placeholder' ,'');
});
$('#btn-show').on('click', function() {
$('#txtInput').attr('placeholder' ,placeholder);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txtInput" type="text" name="test" placeholder="testing">
<button id="btn-hide">Hide</button>
<button id="btn-show">Show</button>
you can remove and add attrbiute with jquery
$('#btn-hide').on('click', function(){
$('input[name="test"]').removeAttr("placeholder")
})
$('#btn-show').on('click', function(){
$('input[name="test"]').attr("placeholder", 'text')
})
This solution is pure css. It targets all input fields and onFocus it makes the font color transparent.
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
Maybe something like this can help you?
$("#btn-hide").click(function(){
$("input[name='test']").attr("placeholder"," ");
});
$("#btn-show").click(function(){
$("input[name='test']").attr("placeholder","testing");
});
P.S: It's not tested
Jquery :
$('#btn-hide').click(function(){
$('input').removeAttr('placeholder');
})
$('#btn-show').click(function(){
$('input').attr('placeholder','testing');
})
if you are using jquery just use this code
$("#btn-hide").click(function () {
$("[name=test]").removeAttr("placeholder");
});
$("#btn-show").click(function () {
$("[name=test]").attr("placeholder","testing");
});
You need to create a jquery/javascript function to show or hide your controls.
HTML:
<input type="text" name="test" placeholder="testing"/>
<button id="btn-hide" click="hide_text()">Hide</button>
<button id="btn-show" click="show_text()">Show</button>
jQuery:
function hide_text(){
$('input[placeholder:testing]').hide();
}
function show_text(){
$('input[placeholder:testing]').show();
}
.show and .hide are jQuery function that will set the display of the indicated control.
You actually don't need separate buttons for hide and show. You could have a single button that toggles placeholder and the button text is changed accordingly. https://jsfiddle.net/x337ey8p/2/
JS (pure)
function togglePlaceholder(btn) {
var tb = document.getElementById('test1');
if (tb.placeholder != '') {
tb.placeholder = '';
btn.innerHTML = 'Show';
}
else {
tb.placeholder = 'testing';
btn.innerHTML = 'Hide';
}
}
HTML
<input id="test1" type="text" name="test" placeholder="testing">
<button id="btn-show" onclick="togglePlaceholder(this)">Hide</button>
I am sharing a pure javascript way to achieve the same.
JS(pure)
HTML
<input id="inputId" type="text" name="test" placeholder="testing">
<button id="btn-hide" onclick ='hidePlaceholder()'>Hide</button>
<button id="btn-show" onclick ='showPlaceholder()'>Show</button>
JS
var placeholderVal;
function hidePlaceholder(){
placeholderVal = document.getElementById("inputId").placeholder;
document.getElementById("inputId").placeholder = "";
}
function showPlaceholder(){
document.getElementById("inputId").placeholder = placeholderVal;
}
This is how you can show/hide placeholder of an input using javaScript only.
Thanks!

$('form:not(.some-class)').keydown is still applying keydown event to .some-class

JQuery's ':not' selector is not preventing the intended-to-be-excluded class (which decorates an element) from firing the .keydown event. Why?
From the following code, when I press a key in the .newOwnerEntryInput field, I expect to see the alert for '1' only. But I see both alerts '1' and '2'.
Javascript:
$('.newOwnerEntryInput').keydown(function (event) {
alert('1');
});
// Prevent Enter from submitting form.
$('form:not(.newOwnerEntryInput)').keydown(function (event) {
alert('2');
});
HTML:
<li style="position: relative">
#Html.DropDownList("cftMemberID", null, String.Empty, new { #class = "actionOwnerDropDown hidden" })
<div class="newOwnerEntryDiv">
<input class="newOwnerEntryInput" />
<div class="float-right closeNewOwner">
<img src="~/Images/cancel_x.png" alt="close" />
</div>
</div>
</li>
I have tried a variety of quotes styles, with and without surrounding the excluded class with quotes, as well as adding 'input' after the class, as in $('form:not(.newOwnerEntryInput input)').keydown
Thanks!
Thanks for those who helped. I do need the form to fire for ALL types of input fields, not just those of type input. So that was out.
Here is what solved my problem:
$('form').keydown(function (event) {
if (! event.which.hasClass('.newOwnerEntryInput')) {
alert('2');
}
});
In this case, for my input of class .newOwnerEntryInput, if a key is pressed, it will NOT fire the event and push '2' out to the alert screen.
Again, thanks, it took a couple responses, all of which had a piece of the solution, for me to answer this myself. :)
Try this:
HTML:
<div>
<input class="newOwnerEntryInput" type="text"/><br />
<!-- I know you have MVC dropdown list, but I replaced it with a html textbox (for simple testing) -->
<input class="newOwnerEntryInput1" type="text"/>
</div>
JavaScript:
$('input.newOwnerEntryInput').keydown(function (e) {
alert('1');
});
$('input:not(.newOwnerEntryInput)').keydown(function (e) {
alert('2');
});
I checked with the documentation that in their example, I saw they had the element input followed by the function with the selector.
The documentation is available is here: jQuery :not()
I hope this helps!
Cheers!
Try this :
$('form input:not(.newOwnerEntryInput)').on('keydown',function (event)
{
alert('2');
});
http://jsfiddle.net/rzseLj27/

Building a list dynamically (depending on checkboxes)

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();
}
});

jQueryCheckboxes being locked to checked state

I have two forms in different tabs, each crossover field has it's value duplicating to the other form onchange/keyup.
When my checkboxes change there is also a background image change to highlight the selection, for some reason I cannot figure out why but when the checkboxes are turned on they will not turn off again.
jsfiddle link > http://jsfiddle.net/UMwkV/
html
<fieldset class="fieldset-form left">
<label>Flammable</label>
<div class="clear"></div>
<div class="flammable"></div>
<input type="checkbox" id="flammable" class="flamcheck" name="flammable" value="1" style="width:12px; height:12px; margin:0 auto; display:block; margin-top:5;">
</fieldset>
<fieldset class="fieldset-form left">
<label>Flammable</label>
<div class="clear"></div>
<div class="flammable"></div>
<input type="checkbox" id="flammable" class="flamcheck" name="flammable" value="1" style="width:12px; height:12px; margin:0 auto; display:block; margin-top:5;">
</fieldset>
jQuery
$("input[name=flammable]").change(function() {
if ($('.flamcheck').is(":checked")) {
$('.flammable').css("backgroundColor", "url(images/flame-on.png)");
$('.flamcheck').prop("checked", true);
}
if (!$('.flamcheck').is(":checked")) {
$('.flammable').css("backgroundImage", "url(images/flammable.png)");
$('.flamcheck').prop("checked", false);
}
})​
If anyone could point out the obvious thing I'm missing it would be greatly appreciated.
use
$(this).is(":checked")
instead
http://jsfiddle.net/UMwkV/6/
$.is() returns true when at least one element matches the selector. Once when both boxes are checked, when you click on one box again, the other checkbox still will be checked, so is() will always return true when you run it on both checkboxes.
AFAIK .is(':checked') runs against the DOM as it was rendered over the wire, not the current live DOM.
So the solution is to use .prop('checked') instead
http://jsfiddle.net/UMwkV/1/
Version 2 allows for independant checking:
http://jsfiddle.net/UMwkV/2/
Version 3 causes mutual updating, and both checkboxes are clickable:
http://jsfiddle.net/UMwkV/8/
I figured out the issue.This code will just work fine
$(".flamcheck").change(function() {
if ($(this).prop("checked") == true ) {
$('.flammable').css("backgroundColor", "url(images/flame-on.png)");
$('.flamcheck').prop("checked", true);
}
if ($(this).prop("checked") == false) {
$('.flammable').css("backgroundImage", "url(images/flammable.png)");
$('.flamcheck').prop("checked", false);
}
});
Check this- http://jsfiddle.net/UMwkV/10/
check this working demo
your code has a syntax error i have corrected it please check the fiddle

Categories