JS Switch Checkbox Button clickes two times in one click - javascript

I have a switch button(0/1 Button). I click one time but return both 0 and 1 together. I need return 0 OR 1
<label class="switch s-outline s-outline-success">
<input type="checkbox" name="product-images-check" class="checkbox_check">
<span class="slider round"></span>
</label>
Jquery - JS
$("label").on("click", function() {
if($(this).children("input").is(":checked")) {
console.log("Checkbox is checked.");
}
else if($(this).children("input").is(":not(:checked)")) {
console.log("Checkbox is unchecked.");
}
console.log("CLICKED");
})

Attach the event listener to the checkbox instead of the label.
$("label > input[type=checkbox]").on("click", function() {
if ($(this).is(":checked")) {
console.log("Checkbox is checked.");
} else {
console.log("Checkbox is unchecked.");
}
console.log("CLICKED");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch s-outline s-outline-success">
<input type="checkbox" name="product-images-check" class="checkbox_check">
<span class="slider round">Click me</span>
</label>

Simply remove the condition inside else if and make it else block.
$("label").on("click", function() {
if($(this).children("input").is(":checked")) {
console.log("Checkbox is checked.");
}
else {
console.log("Checkbox is unchecked.");
}
console.log("CLICKED");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch s-outline s-outline-success">
<input type="checkbox" name="product-images-check" class="checkbox_check">
<span class="slider round"></span>
</label>

Related

select dropdown does not enable in edit page when the checkbox get auto selected in edit page

<script type="text/javascript">
$(document).ready(function() {
$(".ship_to_checkbox").change(function() {
var ch = this.checked;
if (this.checked) {
$("#mj").prop('disabled', false);
} else {
$('#mj').prop('disabled', true);
}
});
});
});
</script>
here is my checkbox code
<section>
<input type="checkbox" class="ship_to_checkbox"
name="ship_to_checkbox"
value="Yes" {if $ship_check_result['ship_check']=="Yes"} checked="checked" : ""{/if}>
<label style="font-weight: 400;">Ship to</label>
</section>

Validating checkboxes with Javascript

I'd like to amend my script so if ANY of the 2 checkboxes are selected, it says 'Woo hoo!'. Where am I going wrong?
HTML:
0:<input type="checkbox" name="remove_0" id="remove_0">
<br>
1:<input type="checkbox" name="remove_1" id="remove_1">
<br><br>
<button id="submitTCP">
Hit me!
</button>
Javascript:
$("#submitTCP").click(function(event){
event.preventDefault();
if ($('input:checkbox', this).is(':checked')) {
alert('Woo hoo!');
} else {
alert('Please select something!');
return false;
}
})
JSFiddle:
https://jsfiddle.net/6qh0c8fm/
your this is parent submit button not checkbox
$("#submitTCP").click(function(event){
event.preventDefault();
if ($('input:checkbox').is(':checked')) {
alert('checkboxes checked');
} else {
alert('Please select something!');
return false;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
0:<input type="checkbox" name="remove_0" id="remove_0">
<br>
1:<input type="checkbox" name="remove_1" id="remove_1">
<br><br>
<button id="submitTCP">
Hit me!
</button>
There is no peramanent function to check either checkbox is checked but it can be done using click and getting it's checked property.
$('#cb').click(function () {
if (this.checked == true) {
console.log('checked');
}
else {
console.log('un-checked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="cb"/>

jQuery show hide div in multiple checkbox using icheck plugin

I design my checkbox with icheck plugin and worked with one and multiple checkbox(Check all) like this :
HTML :
<div>Using Check all function</div>
<div id="action" class="action-class" style="display:none">SHOW ME</div>
<div id="selectCheckBox">
<input type="checkbox" class="all" />Select All
<input type="checkbox" class="check" />Check Box 1
<input type="checkbox" class="check" />Check Box 2
<input type="checkbox" class="check" />Check Box 3
<input type="checkbox" class="check" />Check Box 4
</div>
JS:
$(function () {
var checkAll = $('input.all');
var checkboxes = $('input.check');
$('input').iCheck();
checkAll.on('ifChecked ifUnchecked', function(event) {
if (event.type == 'ifChecked') {
checkboxes.iCheck('check');
} else {
checkboxes.iCheck('uncheck');
}
});
checkboxes.on('ifChanged', function(event){
if(checkboxes.filter(':checked').length == checkboxes.length) {
checkAll.prop('checked', 'checked');
} else {
checkAll.removeProp('checked');
}
checkAll.iCheck('update');
});
});
I have <div id="action" class="action-class" style="display:none">SHOW ME</div> and display:none.
Now, I need to show div if checked any checkbox(all and one) input.
how do can I show this!?
DEMO JSFIDDLE
Can do something like this that toggles the div based on whether or not any boxes are checked
function toggleDiv(){
var showDiv=checkboxes.filter(':checked').length;
$('#action').toggle(showDiv); /* if boolean argument, toggle will hide/show based on boolean */
}
checkboxes.on('ifChanged', function(event){
if(checkboxes.filter(':checked').length == checkboxes.length) {
checkAll.prop('checked', 'checked');
} else {
checkAll.removeProp('checked');
}
checkAll.iCheck('update');
toggleDiv();
});
DEMO
checkboxes.on('ifChanged', function(event){
if(checkboxes.filter(':checked').length == checkboxes.length) {
checkAll.prop('checked', 'checked');
} else {
checkAll.removeProp('checked');
}
checkAll.iCheck('update');
//Add this -----------------------------------
if(checkboxes.filter(':checked').length > 0) {
$("#action").show();
}
else{
$("#action").hide();
}
});
Demo : jsfiddle

Show/hide div on radio button and change form action

<form action ="one.php" method="post">
<input type="radio" name="cardType" id="one" class="css-checkbox" value="db">
<input type="radio" name="cardType" id="two" class="css-checkbox" value="cc">
<div id="a">Hi</div>
<div id="b">Hellow</div>
</form>
I have a form in which there are two radio buttons and two divs.If I selected radio button with id=one then div with id="a" shud be shown and other div will be hidden and form action will be one.php. and if I select radio button with id="two",div with id="b" will be shown and form action changes to "two.php"..How can this be done using jquery or javascript.Any help.
<form id="myForm" action ="one.php" method="post">
<input type="radio" name="cardType" id="one" class="css-checkbox" value="db" checked>
<input type="radio" name="cardType" id="two" class="css-checkbox" value="cc">
<div id="a">Hi</div>
<div id="b">Hellow</div>
</form>
css:
#b{
display:none;
}
Script
$(document).ready(function () {
$(".css-checkbox").click(function () {
if ($(this).attr('id') == "one") {
$('#a').show();
$('#b').hide();
$("#myForm").attr('action','one.php');
} else {
$('#a').hide();
$('#b').show();
$("#myForm").attr('action','two.php');
}
});
});
FIDDLE
try this
$('input[type=radio].css-checkbox').click(function(){
if (this.id=="one"){
$('div#a').show();
$('div#b').hide();
$('form').attr('action','one.php');
}
else {
$('div#a').hide();
$('div#b').show();
$('form').attr('action','two.php');
}
});
DEMO HERE
Try this
$(document).ready(function () {
$('div').hide()
$(".css-checkbox").click(function () {
if ($(this).attr('id') == "one") {
$('#a').fadeIn().siblings('div').fadeOut()
$("form").attr('action','one.php');
} else {
$('#b').fadeIn().siblings('div').fadeOut()
$("form").attr('action','two.php');
}
});
});
DEMO
Try this: jsfiddle
jQuery("[name='cardType']").click(function(){
var divs = $(this).parent().find(">div");
divs.hide();
if(this.id === 'one'){
$("#a").show();
}else{
$("#b").show();
}
});
$(function () {
$('input[name=cardType]').click(function () {
var id_checked = $('input[name=cardType]:radio:checked').attr('id');
if (id_checked == 'one') {
$('#a').show();
$('#b').hide();
} else if (id_checked == 'two') {
$('#a').hide();
$('#b').show();
}
$('form').attr('action', id_checked + '.php');
});
});

When I will click on a href link it will check all checkbox after related this link

I have a links named All and none. When I click on All, I want it to check all checkboxes related with it and change it's link text to none.
When I click again I want it to uncheck all of the checkboxes.
I have some code which I can use to check all boxes with a checkbox. But now I want to check all boxes with a link. Please see, here is this demo code (also on jsfiddle):
<script type="text/javascript">
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
$(document).ready(function () {
$("input[type=checkbox]").click(updateCount);
updateCount();
function updateCount () {
var count = $("input[type=checkbox].case:checked").length;
$("#count").text(count);
$("#status").toggle(count > 0);
};
});
</script>enter code here
</head>
<body>
<H2>why counting wrong in crome, Ie </H2>
select all
<input type="checkbox" id="selectall"/>
<input type="checkbox" class="case" name="case" value="1"/>
<input type="checkbox" class="case" name="case" value="2"/>
<input type="checkbox" class="case" name="case" value="3"/>
<input type="checkbox" class="case" name="case" value="4"/>
<input type="checkbox" class="case" name="case" value="5"/>
<div id="status">
<p id="count">0</p>
</div>
</body>
http://jsfiddle.net/kdEmH/24/
Try to get it this way, i just guessed a link <a> with an id of #allNone and put the .prop() function to check and uncheck the checkboxes:
$('#allNone').on('click', function (e) {
e.preventDefault();
(this.text == 'Check All') ?
$(this).text('Check None').nextAll('.case').prop('checked', true) :
$(this).text('Check All').nextAll('.case').prop('checked', false);
});
Demo
In your HTML part, add a link like :
Click me to toggle all checkboxes
In your Javascript part, add :
$("a#select_all_link").click(function(){
if($('.case:checked').length > 0)
$('.case').attr('checked', false);
else
$('.case').attr('checked', true);
});
Please see working example here
Edit : Names now changed wrt checkboxes state (checked or not)
Try this: Demo :
Add a <A> tag to html code:
<a id="selectall" href="#">select all</a>
Add this function to java-script code:
$(function(){
var state=true;
$("#selectall").click(function () {
$('.case').attr('checked', state);
state=!state;
var obj = document.getElementById("selectall");
if(state)
{
obj.innerText="select all";
}
else
{
obj.innerText="clear all";
}
});
Complete Code
$(function(){
var state=true;
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', state);
state=!state;
var obj = document.getElementById("selectall");
if(state)
{
obj.innerText="select all";
}
else
{
obj.innerText="clear all";
}
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
$(document).ready(function () {
$("input[type=checkbox]").click(updateCount);
updateCount();
function updateCount () {
var count = $("input[type=checkbox].case:checked").length;
$("#count").text(count);
$("#status").toggle(count > 0);
};
});
Might not be what you're looking for, but it's a quick way of doing the toggle thing:
$('a').click(function() {
var $cbs = $('.case');
$cbs.prop('checked', !$cbs.prop('checked'));
return false;
});
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
All
<input type="checkbox" class="case" value="1"/>
<input type="checkbox" class="case" value="2"/>
<input type="checkbox" class="case" value="3"/>
<input type="checkbox" class="case" value="4"/>
<input type="checkbox" class="case" value="5"/>
<div id="status">
<p id="count">0</p>
</div>
</body>
<script type="text/javascript">
$("document").ready(function() {
$("#link").click(function(){
$a = $(this);
var action = $a.data('action');
if(action == "all"){
$('.case').attr("checked","true");
$a.text("None").data("action","none");
}
if(action == "none"){
$('.case').removeAttr("checked");
$a.text("All").data("action","all");
}
updatecount();
return false;
})
$(".case").click(function(){
if($(".case").length == $(".case:checked").length){
$("#link").text("None").data("action","none");
}else{
$("#link").text("All").data("action","all");
}
updatecount();
})
})
var updatecount = function(){
$("#count").text($(".case:checked").length);
}
</script>
</html>

Categories

Resources