I am trying to dynamically check and uncheck a box with jquery .
The ideal situation would be that if edit project file was clicked this would show the field to upload a new image (edit_project_image) was active ie not removed via either a click again on (edit_project_image) or a click on (remove_edit_image). Also if there is a strikethough, which would me that the class remove_project_image would be added then the checkbox would also be checked.
The idea is if any of the above is true the the current active image needs to be removed.
Here is my jquery right now:
//show hide the file box to edit images
$('.edit_project_file').live('click',function() {
$(this).parent().next().toggle();
$(this).parent().removeClass("remove_project_image");
return false;
});
//allow the user to remove the file box if they don't wish to edit an image
$('.remove_edit_image').live('click',function() {
$(this).parent().hide();
$(this).parent().removeClass("remove_project_image");
return false;
});
//add strikethough when the user decides to delete an image
$('.remove_project_file').live('click',function() {
$(this).parent().toggleClass("remove_project_image");
$(this).parent().next().hide();
return false;
});
Here is the Html Markup:
<ul class="imgPreview">
<li>
manager_pimg3_7_1281126121.jpg
<img src="images/edit.gif"/>
<img src="images/delete.gif"/>
</li>
<li class="edit_project_image">
<input name="upload_project_images[]" type="file" />
<img src="images/delete.gif" />
</li>
<li>
<input name="edit_image[]" type="checkbox" value="manager_pimg3_7_1281126121.jpg" class="edit_image_checkbox"/>
</li>
</ul>
I believe the best situation would set a var that if true will set the value of the checkbox to true.
Things i've tried include:
$('.remove_project_file').live('click',function() {
$(this).parent().toggleClass("remove_project_image");
$(this).parent().next().hide();
if ($(this).parent().next(".edit_image_checkbox").is(":not(:checked)")){
$('.edit_image_checkbox').attr('checked',true);
}
return false;
});
The this works in the sense that it checks all (the above is in a php loop) the checkboxes with the class of .edit_image_checkbox instead of just the one next to the class of the remove_project_file that was clicked. Also there is no uncheck when the link is checked again for this i tried else {$('.edit_image_checkbox').attr('checked',true);} this just confuses it as it says if it's not checked then check it but then if it's checked uncheck it.
Another idea i had was to use a variable and set it to true or false and if true the box is checked. I tried this like:
var file_checkbox_checked = false;
if(file_checkbox_checked == true){
$('.edit_image_checkbox').attr('checked',true);
}
else{
$('.edit_image_checkbox').attr('checked',false);
}
Then added file_checkbox_checked = true; to each of the functions that should check the checkbox. This seemed to do nothing. I could set var file_checkbox_checked = true; and that would check all the checkboxes another problem with this is there is no way to uncheck it.
I am still in the learning, brainstorming part of this part of the project so if you have any ideas they would be great.
I understand your requirement correctly [when does programmers not :) ], when user clicks edit or remove image you add or remove remove_project_image class to the li containing edit/remove link. Now if the class remove_project_image is added to the li you want to check the checkbox otherwise clear it. The following snippet does this.
$('.remove_project_file').live('click',function() {
$(this).parent().toggleClass("remove_project_image");
//TO KNOW IF STRIKE-THROUGH IS APPLIED TO IT OR NOT
var r = $(this).parent().hasClass("remove_project_image");
$(this).parent().next().hide();
//WE NEED TO GET THE LI CONTAINING CHECK BOX, ONE NEXT TO HIDDEN ONE
var t = $(this).parent().next().next();
//GET CHECKBOX
var c=$(".edit_image_checkbox", t);
$(c).attr('checked',r);
return false;
});
Related
I have a button, which on every click gives the dropdown element.
Now i need to add the check box above the dropdown - which i have done, but this checkbox element should appear only for the first time.
The problem is , on every click, i get both dropdown associated with checkbox like below.
I need checkbox only for the 1st time button click- along with dropdown.
SO for the 2nd time button click, i tried to hide the checkbox, but the previous checkbox is getting hidden.
public function getPreferenceKeysAction() {
....
<div style="margin:2px 0px 15px 0px;">
<input id = "mydd" type="checkbox" name="vehicle1" value="RegisteredUsers"> Registered Users</input><br>
<input id = "mydd" type="checkbox" name="vehicle1" value="RegisteredUsers"> Opted Users</input><br>
}
in JS
$(add_button).click(function(e){ //on add input button click
if($("#mydd").length){
alert("The element you're testing is present.");
$("#mydd").hide();
}
else{
alert("NOt present.");
}
});
Why not add a class to the element or a data attribute.
With jQuery both are easy to achive.
If you want to use a class just change data method to hasClass and addClass
just do a
$btn = $(this);
// Check if the element has data attribute used
if ( $btn.data('used') != 'true' ) {
// Add data attribute used to element
$btn.data('used', 'true')
// Do whats needed for the first time it's clicked.
} else {
// The element has been used already
}
Change you id="mydd" to class="mydd", you should use id with a unique value, doing that you can hide the elements skipping 2 of them, like this.
$('.mydd').slice(2).hide();
If you want to hide the div wrapping your checkbox, add .parent()
$('.mydd').parent().slice(1).hide();
I have 10 different checkboxes, each with their unique ID - in sequential order like: cbox1, cbox2, etc.. Each checkbox has an associated "tinybox" div which contains an image, and each image has an ID also in sequential order, like tinypic1, tinypic2, etc.. I'm trying to write a jQuery script so that when a user clicks on any of the checkboxes, it will then either .show() or .hide() that associated tinypic.
For example, let's say a user clicks on the third checkbox, which has id="cbox3", the script should identify this is cbox THREE and therefore show or hide "tinypic3". Each checkbox has a unique ID, but has the same Class (called cboxes).
This jQuery script successfully uses the class to run when any cbox is clicked, but how do I get it to show/hide the associated TINYPIC instead of show/hiding the cbox itself?
<script type="text/javascript">
$(document).ready(function() {
$('.cboxes').click(function() {
if ($(this).prop('checked')) {
$(this).next().show(); // This should show the associated tinypic with the same number as the cbox that was clicked.
}
else {
$(this).next().hide(); // This should hide the associated tinypic with the same number as the cbox that was clicked.
}
});
});
</script>
I've tried substituting $(this).next().show(); for $("[id^='tinypic']").show(); or $('input:checkbox[id^="tinypic_"]') but it won't work. I'm obviously not understanding the logic somehow.
Any help is huge! Thanks a lot :)
Here's a sample checkbox for cbox2:
<li>
<input id="cbox2" type="checkbox" name="cbox2" class="cboxes" />
<label for="cbox2">Show</label>
<div class="tinybox">
<img src="http://www.example.com/img/temp.jpg" alt="tinypic2" id="tinypic2" style="display:none;">
</div>
</li>
Here is a working code jsfiddle
$(document).ready(function() {
$('.cboxes').change(function() {
var image = $(this).siblings(".tinybox").find("img");
if ($(this).prop('checked')) {
image.show(); // This should show the associated tinypic with the same number as the cbox that was clicked.
}
else {
image.hide(); // This should hide the associated tinypic with the same number as the cbox that was clicked.
}
});
});
So first we should use change event instead of click to handle not only clicks but any changes.
Secondly we should not operate only next item but find sibling by class if html changes we don't need to change the JS code.
And at the end when we find this element we should search within it for image to show it or hide based on checkbox checked state, here we can even improve my code
here is an updated version of jsfillde
$(document).ready(function() {
$('.cboxes').change(function() {
var image = $(this).siblings(".tinybox").find("img");
image.toggle($(this).prop('checked'));
});
});
JSfiddle link : http://jsfiddle.net/evjkvur1/
$(this).next() //refers to the label and not the image,
Try giving
$(this).closest("li").find("img");
This example will allow you to place the tinybox divs anywhere you want on the page, and show/hide them as appropriate.
We use a separator character (the "_") to make it easy to split-off the numeric identifier from the rest of the ID. Alternately, if you cannot refactor your ID tags, you can use the slice() method, thus:
$('input[type=checkbox]').click(function(){
var i = this.id.slice(-2).replace( /\D+/g, '');
alert(i);
});
Instead of using .show() / .hide(), which you probably know well, I used the .animate() method to change the opacity, for two reasons: (1) to demonstrate how it works, and (2) just to keep the DIVs in position (since the element isn't removed from the flow, it is only rendered invisible)
jsFiddle Demo
HTML:
CB 1: <input type="checkbox" id="cb_1" /><br>
CB 2: <input type="checkbox" id="cb_2" /><br>
<div id="tinypic_1"><img src="http://placekitten.com/50/51" /></div>
<div id="tinypic_2"><img src="http://placekitten.com/48/50" /></div>
javascript/jQuery:
$('input[type=checkbox]').click(function(){
var i = this.id.split('_')[1]; //split into array at the _ & choose 2nd element
var vis = ( $(this).prop('checked') ) ? 1 : 0; //1=checked, 0=not
$('#tinypic_'+i+' img').animate({
'opacity' : vis
},800);
});
CSS:
div{display:inline-block;margin:10px;}
img{opacity:0;}
I'm using the Foundation 4 framework and I added a custom form into my page.
HTML:
<label for="checkbox2">
<input type="checkbox" id="checkbox2" style="display: none;">
<span class="custom checkbox"></span> <p> CHECKBOX TEST</p>
</label>
JS:
if($('#checkbox2').is(":checked")){
isnewsletter = 1;
} else {
isnewsletter = 0;
}
and even this
newsletter = $('#checkbox2').val(),
isn't working.
How can I check, if my checkbox is checked?
$('#checkbox2').change(function(){
if($(this).is(":checked")){
console.log(1);
} else {
console.log(0);
}
});
First checking works fine. If you add checked="checked" to your checkbox isnewsletter will be 1.
P.S. You don't mention any other way how you tick checkbox in your program. Your checkbox is not displayed on the page, so you cannot tick it manually.
The question isn't quite clear whether OP wants to check if checkbox is :checked on change, at any random moment during interaction on a page, or on validation using the Foundation 4 Abide library. I've run into issues with the custom form and toggling hidden fields, as well as validating hidden fields, and the custom form doesn't help. However, I've worked around it, but those are different questions.
The "custom" form does by default hide the input and create a span after it that gets the class "checked", and the property on the hidden checkbox doesn't visually appear in Chrome's developer toolbar (I haven't checked FireBug to see if that property appears). However, if you write a code based check of the property of the checkbox, it will return 'true':
$("#checkbox2").change(function() {
console.log($(this).is(":checked"));
console.log($(this).prop('checked'));
// set up if using either method above, your choice.
if( $(this).prop('checked')) {
// do stuff
}
});
Or you can check the span.checkbox.custom directly after the input for the class "checked":
$("#checkbox2").change(function() {
console.log($(this).next().hasClass("checked"));
// set up if statement using that logic above:
if($(this).next().hasClass("checked") ) {
// do stuff
}
});
Use the same logic to check whether the checkbox is checked at any point, just don't bother with the .change() function. These will return true if the box is checked:
$("#checkbox2").next().hasClass("checked");
$("#checkbox2").is(":checked");
$("#checkbox2").prop("checked");
Foundation 4 didn't have validation built into Abide, you'd have to add it in.
This requires adjusting Abide.
I answered that question here.
I just started with JavaScript and have a small question. On my website I have three div-elements:
<div id="id_1" class="class_1" onclick="itemSelected('id_1')"></div>
<div id="id_2" class="class_2" onclick="itemSelected('id_2')"></div>
<div id="id_3" class="class_3" onclick="itemSelected('id_3')"></div>
I added the following script to highlight the one that the user has clicked:
var selected = false;
function itemSelected(element) {
if (selected == false) {
document.getElementById(element).style.backgroundColor = "#f5b03d";
selected = true;
}
else {
document.getElementById(element).style.backgroundColor = "#99d4e5";
selected = false;
}
}
So far, this works and the user clicks an item and it gets highlighted in another color. If he clicks it again, it gets his default background color. But as soon as the user clicks one of the other items, it gets highlighted too. What I want is a single-choice functionality: As soon as the user clicks one item, the other too appear in their default background-color. Can someone help me with this problem?
Thanks in advance!
Add a shared class to each element.
When the user clicks an element use that shared class to set the default background color to all three elements.
Then use the element's unique ID to set the highlighted background color to the element that has been clicked.
<div id="id_1" class="class_0" onclick="itemSelected('id_1')"></div>
<div id="id_2" class="class_0" onclick="itemSelected('id_2')"></div>
<div id="id_3" class="class_0" onclick="itemSelected('id_3')"></div>
function itemSelected(element) {
$('div.class_0').css({'background-color':'#99d4e5'});
document.getElementById(element).style.backgroundColor = "#f5b03d";
}
Change the html as above and use this jquery
You can do this without using javascript, created a fiddle for this:
http://jsfiddle.net/6PUwz/
What I have done is, making the divs focusable by setting tabindex="-1" and doing the selection by the use of the css-pseudo-class :focused.
Check if this fits you requirements.
I'm looking for a jQuery script or idea on how to create a similar window to the one facebook uses when you invite friends to an event.
So basically a dialog window that has a list of people inside and when you select your friends it changes the background color and checks the checkbox of that friend so when they submit the form I can collect the data.
Thanks,
How about something like this? Oversimplified, but this should get the point across...
Markup:
<div class="member">
<span class="member_name">Mike</span>
<input type="checkbox" class="member_checkbox" />
<input type="hidden" value="002" class="member_id" />
</div>
Member Select javascript:
// .member-selected would set a new background color
$(".member").click(function() {
$(this).addClass("member-selected");
// Find the checkbox
var checkbox = $(this).find('.member_checkbox');
// If the checkbox is checked, uncheck it, and
// if it's not, then check it
if( $(checkbox).attr("checked") != true) {
$(checkbox).attr("checked", true);
} else {
$(checkbox).attr("checked" false);
}
});
Form submission javascript:
// Create an array to hold ID numbers to submit
var add_members = [];
$(".member").each(function() {
if( $(this).find('.member_checkbox').is(":checked") ) {
add_members.push( $(this).find('.member_id').val() );
}
});
You would end up with an array of member IDs that you could then post using AJAX.
** EDIT **
In the click function (see above) there should be additional lines that check or uncheck the checkbox based on its current state.
EDIT: I made a JSBIN out of Mike's suggestion. May help you solve your problem. When a checkbox is clicked its class is alerted then changed (member-selected is added or removed, I'm using toggleClass()) and then its class is alerted again. Check it out: jsbin.com/uxuxu3/4/edit
I don't know how facebook's 'invite friends to an event' window looks these days, but I believe you will find Facebox a similar modal. Check Facebox and other, perhaps even better options, at 19 jQuery Modal Boxes to improve your UI.