checkbox combined with javascript - javascript

I want to make a filter which works with a checkbox. When the checkbox is checked it should show some elements and when its not it should hide it.
This is the code I've got so far but I cant get it to work properly. Anyone who can help me out?
The html what got to hide/show
<li class="verwijder" class="kleding"><img class="aanbieding" src="images/jack.png"><span id="timer"></span></li>
The checkbox
<input id="checkboxeten" type="checkbox" name="filter" value="eten"><br>
Javascript
$(document).ready(function(){
if (document.getElementById("checkboxeten").checked = true) {
$( ".kleding" ).show();
} else {
$( ".kleding" ).hide();
}
});

You'll need an event handler for that
$('#checkboxeten').on('change', function() {
$(".kleding").toggle(this.checked);
});
And you can't have more that one class attribute
<li class="verwijder kleding">

You need to compare using == not =.
Should be:
if (document.getElementById("checkboxeten").checked == true) {
Or:
if (document.getElementById("checkboxeten").checked) {
= is used for assignment. == is used for comparison.
Also you will need an onchange event handler for your checkbox. You should fire this logic not only on page load but also when the checkbox is changed I assume. Or on a button click or some kind of event.

Replace <li class="verwijder" class="kleding"> with <li class="verwijder kleding">
Using my updated jquery code.
Here is working example (http://jsfiddle.net/yqkLpn6s/2/) FIDDLE

Related

Too many unwanted result when calling jquery .change() function

I have a bootstrap toggle button in HTML like that:
<input id="warnbtn" type="checkbox" checked data-toggle="toggle" data-onstyle="success" data-offstyle="danger" >
and I try to catch the event of this with this script:
$(function() {
$('#warnbtn').change(function() {
var state = $(this).prop('checked')
if(state){
console.log("On");
}else{
console.log("Off");
}
})
})
My toggle is not smooth like the one in Bootstrap Toggle website
And the result I get with the .change function have lot of unwanted result like the picture here
It sounds like you are loading the same script numerous times. Every time you run that same block it adds a new change event listener and each will fire when the event occurs
You should find out why and try to prevent it
For a short term workaround you can call off() first to remove any previous event listeners that were called
Try:
$('#warnbtn').off('change').change(function() {
var state = $(this).prop('checked')
if(state){
console.log("On");
}else{
console.log("Off");
}
})
Thank u for answer my question :( I think I will replace the toggle button with another solution

Change checkbox value doesnt fire the change event in Jquery

I have a checkbox and I marked it as checked, however it doesnt fire the on change function. The note doesn't appear.
My code:
$('#checkbox1').prop("checked", true);
$('#checkbox1').change(function(){
if ($(this).is(':checked'))
$('#s-note').show();
else
$('#s-note').hide();
});
Do you expect the onchange to fire without user interaction?
Your issue is you set the checked state before you set the handler so if this would have trigged change, you would have not caught it. Your real issue here is setting the property with JavaScript does not fire the change event. So you need to trigger the change event manually.
$('#checkbox1')
.prop("checked", true) // set it to checked
.on("change", function() { // bind change event
$('#s-note').toggle($(this).is(':checked')); // toggle visibility
}).trigger("change"); //trigger that you need the change to run
If you are setting the note to be hidden by default and doing it with an id based selector, like this:
#s-note { display:none; }
Then your code won't be able to show it because it also uses an id based selector and that won't be more specific than the selector already in effect.
Instead, you'll have to default the note to hidden using a selector that is less specific than the id selector you will use to show/hide it later. That would be a class.
Also, it's critical that you set up the event handler before you trigger the event, so that when the event happens, there is already an event handler registered.
Now, for your needs, you don't really need the change event, click will do just fine. And, lastly, to ensure that you properly trigger the event, use JQuery's .trigger() method to set things in motion.
// Make sure you set up the callback first
$('#checkbox1').on("click", function(){
if ($(this).is(":checked"))
$('#s-note').show();
else
$('#s-note').hide();
});
// Then just trigger the event
$('#checkbox1').trigger("click");
.hide { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1">Test
<div id="s-note" class="hide">Special</div>
I hope this code snippet will help you
Approach 1
$('#idcheckbox').on('change', function() {
if($(this).is(':checked')) {
alert('checked');
} else {
alert('default ');
}
});
Approach 2
$('input[type=checkbox]').on('change', function() {
if($(this).is(':checked')) {
alert('checked');
} else {
alert('default ');
}
});
I ran your code in .net mvc and it runs fine.
This is the checkbox same id it hide or shows div element.
<input type="checkbox" id="checkbox1" value=" " />
<div id="s-note" style="display: none">
<label>Showing</label>
</div>
What are you trying to display?

Click on dynamically generated radio button

i am trying to alert some text when a dynamically generated radio button is checked .. here is the link from fiddle ..
http://jsfiddle.net/z7cu3q0y/
function createRadioButtons(n)
{
$("#radioContainer").empty();
for(var i=0;i<n;i++)
{
radioButtons = "<p><input type='radio' class='"+n+"' name='"+n+"'>"+(i+1)+"</p>";
$("#radioContainer").append(radioButtons);
}
}
$("#dropDown").on("change",function()
{
createRadioButtons(parseInt($(this).val()));
});
$("#radioContainer input").on("change",function()
{
alert("checked");
});
when i click on radio button i am not getting alert .. can any one of you please help me in taking a look ?
Thanks in advance,
Ashwin
Your code $("#radioContainer input").on("change",function(){})
will directly attach the event handler to the matching elements that are currently present in DOM.
To work with dynamically generated elements added in the future, You need to delegate your event handler to a common parent element:
$("#radioContainer").on("change","input",function(){
alert("checked");
});
The above will attach the handler to #radioContainer, Whenever the corresponding event (change in this case)is triggered (Usually propagated from the children), it checks whether the event target matches the specified selector (input in this case) and invokes the handler accordingly.
Updated Fiddle
You need to use .on() for dynamically generated elements like below. Here .on() will bind change event to all radio buttons which are inside radioContainer
$("#radioContainer").on("change","input[type=radio]",function()
{
alert("checked");
});
Demo
Try using the below code
$(document).on("change","#radioContainer input",function(){
alert("checked");
});
Updated fiddle
You need to put the input defined as click area and radiocontainer as working area.
DEMO: http://jsfiddle.net/don/z7cu3q0y/3/
Just remove input before .on and put inside of the function.
jQuery:
function createRadioButtons(n)
{
$("#radioContainer").empty();
for(var i=0;i<n;i++)
{
radioButtons = "<p><input type='radio' class='"+n+"' name='"+n+"'>"+(i+1)+"</p>";
$("#radioContainer").append(radioButtons);
}
}
$("#dropDown").on("change",function()
{
createRadioButtons(parseInt($(this).val()));
});
$("#radioContainer").on("change", 'input', function()
{
alert("checked");
});

jQuery: Trigger even when checkbox gets checked

I am making a web app. In one part, I have a checklist dynamically generated with javascript.
I want to have a jQuery function executed when the checklist is checked.
Here is the code that dynamically generated the checklist:
var checkbox = document.createElement("input");
checkbox.setAttribute("type","checkbox");
checkbox.setAttribute("class", "tickbox");
document.getElementById("sortable").appendChild(checkbox);
Here is the output HTML file on execution, that shows that the checkbox was actually created:
<input type="checkbox" class="tickbox">
I want to have a function executed when the box is checked. I have tried:
1.
$('.tickbox').change(function () {
alert("Here");
if ($(this).attr("checked")) {
alert("Yeah");
}
2.
if($(.tickbox).is(':checked')){
alert("Yeah!!!");
3.
$('.tickbox').each(function(){
if($(this).is(':checked')){
alert("Yeah!!!");
}
})
But nothing worked. What's wrong? What should I do?
Note: A lot of other javaScript and jQuery, including many other function calls are working completely fine.
You said you have dynamically added checkbox so in order to add event handler to that DOM you has to use .on().
Example.
$(document).on('change','.tickbox',function(){
if($(this).is(':checked')){
alert("Yeah!!!");
}
})
Try this....
var checkbox = document.createElement("input");
checkbox.setAttribute("type","checkbox");
checkbox.setAttribute("class", "tickbox");
document.getElementById("sortable").appendChild(checkbox);
$(".tickbox").click(function(){
if ($(this).is(':checked')) {
alert("checked");
}
});
Example: http://jsfiddle.net/7xY8Y/
for dynamically generated element you need to use on():
$(document).on("change",'.tickbox',function () {
if ($(this).attr("checked")) {
alert("Yeah");
}
});
because your tickbox created dynamically then you need to bind event on document for class name tickbox for change event.

checkbox jquery or javascript oncheck?

I do not know the correct terminology for this, but I want the same effect as onclick but for a check box with jquery or javascript.
onclick version:
Link
I want the same effect as above but for a checkbox. The end result will be that the page should reload with an updated php query, but that part I can do. I just don't know what the onclick is for checkboxes.
checkbox:
<input type="checkbox" name="change" value="one" />changes php query
You should listen to the change event, as the checkbox can be selected or deselect with the keyboard too:
$('input[type="checkbox"][name="change"]').change(function() {
if(this.checked) {
// do something when checked
}
});
Similarly with plain JavaScript:
// checkbox is a reference to the element
checkbox.onchange = function() {
if(this.checked) {
// do something when checked
}
};
And last, although you really should not use inline event handlers, but if you have to:
<input ... onchange="handler.call(this)" />
where handler is like the handlers shown above.
Further reading:
jQuery documentation
MDN JavaScript Guide
quriksmode.org Introduction to Events
$('#input_id').click(function() {
// do what you want here...
});
$('input:checked').click(function() {
//do something
});
See http://api.jquery.com/checked-selector/ and http://api.jquery.com/checkbox-selector/

Categories