I write a script that can hide or show my classes by some considered radio buttons, but it does not work at runtime and does not change dynamically, any ideas?
My script:
$(document).ready(function() {
if (document.getElementById('addContent').checked) {
$(".contentForm").show();
$(".searchContentForm").hide();
}
else if (document.getElementById('editContent').checked ||
document.getElementById('deleteContent').checked) {
$(".searchContentForm").show();
$(".contentForm").hide();
}
else {
$(".searchContentForm").hide();
$(".contentForm").hide();
}
});
JsFiddle Demo:
http://jsfiddle.net/BpMed/
Simplified code:
$(".searchContentForm").hide();
$(".contentForm").hide();
$('input[name=tContent]').click(function() {
if ($('#addContent').is(':checked')) {
$(".contentForm").show();
$(".searchContentForm").hide();
}
else if ($('#editContent').is(':checked') ||
$('#deleteContent').is(':checked')) {
$(".searchContentForm").show();
$(".contentForm").hide();
}
});
Refer LIVE DEMO
Please try this:
function forDynamic()
{
if (document.getElementById('addContent').checked) {
$(".contentForm").show();
$(".searchContentForm").hide();
}
else if (document.getElementById('editContent').checked ||
document.getElementById('deleteContent').checked) {
$(".searchContentForm").show();
$(".contentForm").hide();
}
else {
$(".searchContentForm").hide();
$(".contentForm").hide();
}
}
Add above code in your javascript. and each update time, you just make a call forDynamic();
For one, why are you using document.getElementById while using jquery?
You also need to wrap your if block in side of a function that is looking for those radios to be clicked. See this jsfiddle. I added a class of changeup to each checkbox, you of course can add whatever you'd like.
$(".changeUp").click(function() {
if ($('#addContent').is(':checked')) {
$(".contentForm").show();
$(".searchContentForm").hide();
}
else if ($('#editContent').is(':checked')) {
$(".searchContentForm").show();
$(".contentForm").hide();
}
else if ($('#deleteContent').is(':checked')) {
$(".searchContentForm").show();
$(".contentForm").hide();
}
else {
$(".searchContentForm").hide();
$(".contentForm").hide();
}
});
It's hard to say with so little context, but it looks like this function is only being executed on document.ready - the initial page load. You need to bind (http://api.jquery.com/bind/) your function to the change event of those checkboxes if you want something more dynamic.
very basic example of something similar:
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange
I know you already accepted an answer, but you can use toggle and pass in a condition - so true=show and false=hide - this pretty much gets rid of your duplication inside an if/else statement just to show/hide elements.
$(".searchContentForm").hide();
$(".contentForm").hide();
$('input[name=contentMng]').change(function() {
var adc = $('#addContent').is(':checked');
var edc = $('#editContent').is(':checked') || $('#deleteContent').is(':checked');
$(".contentForm").toggle(adc);
$(".searchContentForm").toggle(edc);
});
http://jsfiddle.net/HLmru/
Related
I want to use matchmedia.addlistener to check windows size, my button event looks like this
$('button').click(function(){
if(this.attr('aria-expanded') === 'false'){
$this.attr('aria-expanded', true).next().fadeOut();
}else{
$this.attr('aria-expanded', false).next().fadeIn();
}
});
if I use matchmedia, I will need to do it this way
minWidth768 = window.matchMedia('(min-width: 768px)');
if(minWidth768.matches){
$('button').click(function(){
if(this.attr('aria-expanded') === 'false'){
$this.attr('aria-expanded', true).next().slideUp();
}else{
$this.attr('aria-expanded', false).next().slideDown();
}
});
}else{
$('button').click(function(){
if(this.attr('aria-expanded') === 'false'){
$this.attr('aria-expanded', true).next().fadeOut();
}else{
$this.attr('aria-expanded', false).next().fadeIn();
}
});
}
If i want to add an addListener, so I need to repeat my code again.
minWidth768.addListener(function(media) {
if(media.matches){
//repeat;
}else{
//repeat;
}
});
Is there a way I could make my code shorter, and make code looks nice and easy to maintain?
You can make a function and then call that function wherever you need.
Eg.
function matchMedia(){
//do stuff here
}
//now call where you want
if(true){
matchMedia();
}
But note: if you want to call the function inside the function parameter then you no need to use parenthesis like below is an example:
setTimeout(matchMedia, 400);// don't do matchMedia()
I'm using ASP.NET MVC 4 to develop a web app. I have a page which contains a submit button which should be enabled only if one of my two checkboxes (or both of them) is (are) enabled. The thing is, I'm trying to add an "or" operator in the following script but it does not give me what I want. So, here's my script :
The jQuery sample
And this is the part I'd like to improve :
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
the_terms.click(function() {
if ($(this).is(":checked")){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
});
And I can't find a way to tell my document "Okay, if one of these 2 checkboxes (or both of them) is (are) checked, we can press on the button. If not, don't allow it".
Any idea guys?
It can be done with:
Fiddle
$('.checkbox').change(function(){
$('#submitBtn').prop('disabled', !$('.checkbox:checked').length > 0)
});
Note:
This find the checkboxes by class name checkbox so it will work with two checkboxes, whereas your original code is looking at a single checkbox via its ID.
Use the change event not click.
Simply use
$(".checkbox").click(function() {
$("#submitBtn").prop("disabled", !$('.checkbox:checked').length);
});
DEMO
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
$('.checkbox').change(function(){
$("#submitBtn").prop("disabled", !(the_terms.is(":checked") || the_terms2.is(":checked")));
});
});
// Make a function to be called on onload or on click
function checkTerm() {
jQuery('input[type="submit"]').attr('disabled',!jQuery('input.term:checked').length > 0 ) ;
}
// Call the function on load
$(document).ready(checkTerm) ;
// And call it on check change
jQuery(document).on('change','input.term',checkTerm) ;
Try below modified script , please check if it works as you want.
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
if(the_terms.is(":checked") || the_terms2.is(":checked"))
{
$("#submitBtn").removeAttr("disabled");
}
else
{
$("#submitBtn").attr("disabled", "disabled");
}
the_terms.click(function() {
if ($(this).is(":checked") || the_terms2.is(":checked")){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
the_terms2.click(function() {
if ($(this).is(":checked") || the_terms.is(":checked") ){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
});
I've tried searching the site, but am really struggling to find what I want... Basically I have some jQuery code that checks the state of three IDs, they are tied to three checkboxes;
$('#submitButton').click(function(){
if($("#cb1,#cb2,#cb3").is(':checked'))
return true;
else
return false;
});
How would I restructure this jQuery statement to make it so that all three checkboxes have to be CHECKED? At the moment, either one can be checked for the action to be performed
I'm betting there is a really simple solution to all of this, but I have been lpooking at it for so long, I just can't see it. Could someone with a fresh pair of eyes and a less addled brain please steer me in the right direction?
You need to use:
$('#submitButton').click(function(){
if ($('#cb1').is(':checked') && $('#cb1').is(':checked') && $('#cb3').is(':checked')) {
return true;
} else {
return false;
}
});
Use
if($("#cb1").is(':checked') && $("#cb2").is(':checked') && $("#cb3").is(':checked'))
$("#cb1,#cb2,#cb3").is(':checked') will return result for the 1st element only
Try:
$('#submitButton').click(function(){
if($("#cb1:checked,#cb2:checked,#cb3:checked").length === 3)
return true;
else
return false;
});
You can use:
if ($('#cb1:checked,#cb2:checked,#cb3:checked').length == 3) {
//all three are checked.do something
}
or
if ($('#cb1:checked,#cb2:checked,#cb3:checked').length == $('#cb1,#cb2,#cb3').length) {
//all three are checked.do something
}
You could try:
$('#submitButton').click(function(){
if($('#cb1')[0].checked && $('#cb2')[0].checked && $('#cb3')[0].checked)return true;
return false;
});
You can just add a class to your checkboxes and use like so:
$('#submitButton').click(function(){
if($(".myCheckbox:checked").length == 3) {
console.log('true');
}
else {
console.log('false');
}
});
Here is the JSFiddle Example:
http://jsfiddle.net/cLH8s/1/
i have something being done when a radio is checked, however, now i want to make the same thing happen on page load, hopefully without duplicating the bulk of the code.
the reason i'm adding it for page load is because i'm creating an edit/update page. the first page is for saving form data to mysql database, and second page grabs values from database and displays the form as it was saved and a person can make changes and save it back to the database.
so i have this for the click. it's more than this for the other radio values, but don't want to paste too much. this is just example:
$("input[name='typeofmailerradio']").click(function() {
if(this.value == 'Postcards') {
$('#typeofpostcardmaileroptions').show("fast");
}
else {
$('#typeofpostcardmaileroptions').hide("fast");
}
//more if/else's for more radio values here
});
so i did a test and put all of this into the page code:
$("input[name='typeofmailerradio']:checked").val(function() {
if(this.value == 'Postcards') {
$('#typeofpostcardmaileroptions').show("fast");
}
else {
$('#typeofpostcardmaileroptions').hide("fast");
}
//more if/else's for more radio values here
});
first, that's what i meant by duplicating the bulk of code, and second it didn't really work. it worked for page load, but the section of code for clicking didn't want to work anymore.
what i want to do is an "or" or something. something like this, but don't know how to go about it:
$("input[name='typeofmailerradio']").click(function() || $("input[name='typeofmailerradio']:checked").val(function() {
if(this.value == 'Postcards') {
$('#typeofpostcardmaileroptions').show("fast");
}
else {
$('#typeofpostcardmaileroptions').hide("fast");
}
//more if/else's for more radio values here
});
by the way, what the proposed solution i wrote doesn't work at all. doesn't work on load and doesn't work when clicking.
doesn't work:
$("input[name='typeofmailerradio'],input[name='typeofmailerradio']:checked").click(function() {
if(this.value == 'Postcards') {
$('#typeofpostcardmaileroptions').show("fast");
}
else {
$('#typeofpostcardmaileroptions').hide("fast");
}
//more if/else's for more radio values here
});
doesn't work:
$("input[name='typeofmailerradio'],input[name='typeofmailerradio']:checked").val(function() {
if(this.value == 'Postcards') {
$('#typeofpostcardmaileroptions').show("fast");
}
else {
$('#typeofpostcardmaileroptions').hide("fast");
}
//more if/else's for more radio values here
});
this is what i did to make it work...
$(document).ready(function() {
function typeOfMailer() {
if($('#typeofmailerradio1').is(':checked')) {
$('#typeofpostcardmaileroptions').show("fast");
$('#snapapartoption').hide("fast");
$('#typeofspecialtymaileroptions').hide("fast");
$('#typeofmaileroptions').hide("fast");
}
else if($('#typeofmailerradio2').is(':checked')) {
$('#typeofpostcardmaileroptions').hide("fast");
$('#snapapartoption').show("fast");
$('#typeofspecialtymaileroptions').hide("fast");
$('#typeofmaileroptions').hide("fast");
}
else if($('#typeofmailerradio3').is(':checked')) {
$('#typeofpostcardmaileroptions').hide("fast");
$('#snapapartoption').hide("fast");
$('#typeofspecialtymaileroptions').show("fast");
$('#typeofmaileroptions').hide("fast");
}
else {
$('#typeofpostcardmaileroptions').hide("fast");
$('#snapapartoption').hide("fast");
$('#typeofspecialtymaileroptions').hide("fast");
$('#typeofmaileroptions').show("fast");
}
}
$("input[name='typeofmailerradio']").click(function() {
typeOfMailer();
});
typeOfMailer();
});
You can use multiple selectors:
$('input[name=foo],input[name=bar]:checked').whatever();
^---separate them with a comma
Try something like...
$(document).ready( function() {
function do_stuff() {
if(this.value == 'Postcards') {
$('#typeofpostcardmaileroptions').show("fast");
}
else {
$('#typeofpostcardmaileroptions').hide("fast");
}
//more if/else's for more radio values here
}
$("input[name='typeofmailerradio']").click(function() {
do_stuff();
});
do_stuff();
}
You can't really "reuse" anonymous functions. So define them.
I am trying to add an else statement to this piece of javascript so that if a div-1 is clicked once it shows div-2 and if div-1 is clicked again it hides div-2.
Does anyone know how I could do this?
$(function() {
$('.div-1').click(function() {
$('.div-2').show();
return false;
});
});
Try toggle() instead:
$('.div-1').click(function() {
$('.div-2').toggle();
return false;
});
You can add a dummy class and check for it's exixtence.
$(function() {
$('.div-1').click(function() {
var $this = $(this),
$div2 = $('.div-2');
if($this.hasClass('open')) {
$this.removeClass(open');
$div2.hide();
} else {
$this.addClass(open');
$div2.show();
}
return false;
});
});
I totally agree with Jason P's answer that you should be using toggle instead, but in case you actually needed to use an if statement, you can do this:
$('.div-1').click(function() {
if ($('.div-2').is(':visible')) {
$('.div-2').hide();
} else {
$('.div-2').show();
}
return false;
});
jsFiddle