I have a switch toggle which has following code, following one of the StackOverflow questions I did similarly
Here's How to add the text "ON" and "OFF" to toggle button
<label class="switch">
<input type="checkbox" id="togBtn" value="false" name="disableYXLogo">
<div class="slider round"></div>
</label>
and in css i am disabling input checkbox
.switch input {display:none;}
then how would I get the true/false value of that switch toggle button.
I tried this but it doesn't work for me
$("#togBtn").on('change', function() {
if ($(this).is(':checked')) {
$(this).attr('value', 'true');
}
else {
$(this).attr('value', 'false');
}});
How would I get the check/uncheck or true/false value in js for my toggle switch button
The jquery if condition will give you that:
var switchStatus = false;
$("#togBtn").on('change', function() {
if ($(this).is(':checked')) {
switchStatus = $(this).is(':checked');
alert(switchStatus);// To verify
}
else {
switchStatus = $(this).is(':checked');
alert(switchStatus);// To verify
}
});
You can achieve this easily by JavaScript:
var isChecked = this.checked;
console.log(isChecked);
or if your input has an id='switchValue'
var isChecked=document.getElementById("switchValue").checked;
console.log(isChecked);
This will return true if a switch is on and false if a switch is off.
$("#togBtn").on('change', function() {
if ($(this).is(':checked')) {
$(this).attr('value', 'true');
alert($(this).val());
}
else {
$(this).attr('value', 'false');
alert($(this).val());
}
});
if want to access table row
$('body').on('change', '#statusSwitch', function () {
if ($(this).is(':checked')) {
****Your logic*****
}
else {
***Your logic***
}
});
$("#togBtn").on('change', function() {
if ($(this).attr('checked')) {
$(this).val('true');
}
else {
$(this).val('false');
}});
OR
$("#togBtn").on('change', function() {
togBtn= $(this);
togBtn.val(togBtn.prop('checked'));
}
Related
I need to have 2 checkbox work as radiobutton, but I can't use radiobutton cause I want to make uncheck available
<script type="text/javascript">
$(document).ready(function() {
$(".gps-garmin").click(function() {
selectedBox = this.id;
$(".gps-garmin").each(function() {
if ( this.id == selectedBox )
{
this.checked = true;
}
else
{
this.checked = false;
};
});
});
});
<td><input type="checkbox" id="garmin" value="garmin" class="gps-garmin"></td>
<td><input type="checkbox" id="gps" value="gps" class="gps-garmin"></td>
Actually my checkbox are working exactly like radio button, I found this code here, but I need to make uncheck possible
Try this:
$(".gps-garmin").click(function() {
var check = $(this).prop('checked');
$(".gps-garmin").prop('checked',false);
$(this).prop('checked', (check) ? true : false);
});
As mentioned in How-to-uncheck-a-radiobutton, you should be able to clear a radio-button by using plain js or jQuery
For example in case of using plain js (copied from the linked answer):
this.checked = false;
Is this You trying:
$(".gps-garmin").click(function() {
if($(this).prop("checked") == true){
$(".gps-garmin").prop('checked',false);
$(this).prop('checked',true);
}
else if($(this).prop("checked") == false){
$(".gps-garmin").prop('checked',false);
}
});
I have two menus in one form and a "select all" checkbox in each one. However, clicking one affect the two menus.
<div id="drop-wrapper">
<input type="checkbox" name="select-all-cat" id="select-all-cat" /><label for="cities-label" class="categories-label">Select all</label><br>
And here is the second one :
<div class="test-label">
<input type="checkbox" name="select-all" id="select-all"><label class="categories-label">Select all</label><br>
And the javascript :
// Select all
$('#select-all').click(function(event) {
if(this.checked) {
$(':checkbox').each(function() {
this.checked = true;
});
}
else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});
// Select all categories
$('#select-all-cat').click(function(event) {
if(this.checked) {
$(':checkbox').each(function() {
this.checked = true;
});
}
else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});
How can I separate the two lists, which are in the same form?
Add a context to the selectors matching each checkbox container. Assuming the group of checkboxes you want to act on are contained within the same div as each select all checkbox:
$('#select-all').click(function(event) {
if(this.checked) {
$(':checkbox', '.test-label').prop('checked', true);
...
$('#select-all-cat').click(function(event) {
if(this.checked) {
$(':checkbox', '#drop-wrapper').prop('checked', true);
...
Add class filter to all your $(':checkbox')
// Select all
$('#select-all').click(function(event) {
if(this.checked) {
$('input:checkbox[class=select-all]').each(function() {
this.checked = true;
});
}
else {
$('input:checkbox[class=select-all]').each(function() {
this.checked = false;
});
}
});
// Select all categories
$('#select-all-cat').click(function(event) {
if(this.checked) {
$('input:checkbox[class=select-all-cat]').each(function() {
this.checked = true;
});
}
else {
$('input:checkbox[class=select-all-cat]').each(function() {
this.checked = false;
});
}
});
I have a script that does not allow submit until the form value is changed from the initial page-render.
Everything works, except for the radio buttons. When I try to check or uncheck them, they have no effect on the button.
Anyone see what is wrong? (I want to do a check to see if one or more of the checkboxes has changed from the initial page-render)
$(document).ready(function () {
var button = $('#submit-data');
$('input, select, checkbox').each(function () {
$(this).data('val', $(this).val());
});
$('input, select, checkbox').bind('keyup change blur', function () {
var changed = false;
$('input, select, checkbox').each(function () {
if ($(this).val() != $(this).data('val')) {
changed = true;
}
});
$('#submit-data').prop('disabled', !changed);
});
});
Edit:
Checkbox html:
<input checked="checked" id="contactemail" name="contactemail" type="checkbox" />
<input id="contactsms" name="contactsms" type="checkbox" />
<input checked="checked" id="contactphone" name="contactphone" type="checkbox" />
Edit 2:
New code from answer from Marikkani Chelladurai. It is almost working, but it only works if the checkbox is not checked initially, and then checked by the user. Link to JSFiddle
$(document).ready(function() {
var button = $('#submit-data');
$('input, select').each(function () {
$(this).data('val', $(this).val());
});
$('input[type=radio], input[type=checkbox]').each(function (e) {
$(this).data('val', $(this).attr('checked'));
}); //For radio buttons
$('input, select').bind('keyup change blur', function (e) {
var changed = false;
if (e.target.type == "radio" || e.target.type == "checkbox" ) {
if($(this).data('val') != $(this).attr('checked')){
changed = true;
}
} else {
if ($(this).val() != $(this).data('val')) {
changed = true;
}
}
$('#submit-data').prop('disabled', !changed);
});
});
Link to JSFiddle
You can handle radio buttons and checkboxes by a different way as follows
$('input, select').not('[type=checkbox]').each(function () {
$(this).data('val', $(this).val());
});
$('input[type=radio], input[type=checkbox]').each(function (e) {
$(this).data('val', $(this).is(':checked'));
}); //For radio buttons
$('input, select').bind('keyup change', function (e) {
var changed = false;
if (e.target.type == "radio" || e.target.type == "checkbox" ) {
console.log($(this).is(':checked'));
console.log($(this).data('val'));
if($(this).data('val') != $(this).is(':checked')){
changed = true;
}
} else {
if ($(this).val() != $(this).data('val')) {
changed = true;
}
}
As the comments say, radio buttons use the checked property. Pass in event to your each and check the target.type:
$('input, select, checkbox').each(function (e) {
if (e.target.type == "radio") {
//check radio
} else {
if ($(this).val() != $(this).data('val')) {
changed = true;
}
}
});
I am designing a html page.
I want to show a confirmation msg on changing a drop down element using jquery or javascript.
Please help to do this.
I have code which will ask confirmation. On selecting cancel it will not select previous item of Drop down.
$("#dropdownId").change(function(e)
{
if($(this).val() == "40")
{
if(confirm("Are you sure"))
return true;
else
return false;
}
});
Thanks
You should be able to store the previous value on the click event and set it back on the change event:
var setLastSelected = function(element) {
$(element).data('lastSelected', $(element).find("option:selected"));
};
$("select").each(function () {
setLastSelected(this);
});
$("select").change(function(){
if(confirm("Are you sure")) {
setLastSelected(this);
return true;
}
else {
$(this).data('lastSelected').attr("selected", true);
return false;
}
});
See: http://jsfiddle.net/w9JYX/14/
Update: I updated the code to work more generically on a set of dropdown controls and also removed the click handler.
Here's a bit tighter solution along the same lines without having to create global variables or other functions:
$('#dropdownId')
.on('focus', function () {
$(this).data("prev", $(this).val());
})
.change(function () {
if (confirm('Are you sure?')) {
//normal case where the dropdown changes
$(this).data("prev", $(this).val());
} else {
//if the user doesn't confirm reset the dropdown back to what it was
$(this).val($(this).data("prev"));
}
});
var previous_option = $('#dropdownId option:selected');
$("#dropdownId").change(function(e){
var $this = $(this),
selected = $this.find('option:selected');
if($this.val() == "40"){
if(confirm("Are you sure")){
previous_option = selected;
return true;
} else{
selected.removeAttr('selected');
previous_option.attr('selected', 'selected');
}
} else{
previous_option = selected;
}
});
Usage for ASP.NET page:
$("#<%= dropdownId.ClientID %>")
.on('focus', function () {
$(this).data("prev", $(this).val());
})
.change(function () {
if (confirm('Are you sure?')) {
$(this).data("prev", $(this).val());
} else {
$(this).val($(this).data("prev"));
}
});
I'm following a tutorial where you make a checkbox that enables a disabled button and when you uncheck the box, the button becomes disabled again. The problem is that when I uncheck the box, it seems like the checkbox still in an "on" state because the button is not disabled. The code works in Chrome but not in Firefox 3.6.
Here is my code:
<p><input type="checkbox" id="agree" >I agree</p>
<input id="continue" type="button" value="continue" disabled='true'>
<script>
$('#agree').change(function(){
var state = $(this).attr('value');
if(state == 'on'){
$('#continue').removeAttr('disabled');
}else if(state == ''){
$('#continue').attr('disabled', 'false');
}
});
</script>
a checkbox's check value doesn't change with .val() you should be using .is('checked') like so:
$('#agree').change(function() {
var state = $(this).is(':checked'); //state = true/false depending on state
if (state) { //if true
$('#continue').removeAttr('disabled'); //remove disabled
} else { //else (false)
$('#continue').attr('disabled', 'disabled'); //add disabled (you shouldn't set it to 'false' as it WILL be disabled and it'll confuse you.
}
});
Here's an Example to see my points.
Try :
$(function() {
$('#agree').click(function() {
if ($(this).is(':checked')) $('#continue').attr('disabled', false);
else $('#continue').attr('disabled', true);
});
});
LINK : http://jsfiddle.net/Mmm4h/
Try this:
$('#agree').change(function() {
if($("#agree").is(":checked"))
$('#continue').removeAttr('disabled');
else
$('#continue').attr('disabled', false);
});
http://jsfiddle.net/TGQZs/1/