We Keep Coding

JS library show/hide element on checkbox status

I'm fairly new to JS and am trying to write my own library using this blog post, and would like a hand. (Apologies if this is too vague for an SO question)
I'm trying to write a function that shows or hides a queried element based on the status of a queried checkbox (and another for a radio button if I can't do it in one method) on a form.
So I'm looking to end up with something like this:
$(divId).checkToggle(checkBoxId);
So the div will start as hidden. When the checkbox is clicked, the div will toggle to visible. When the checkbox is unchecked, I'd like the div to hide again and any input fields inside it to be cleared (the probably will be only one input field).
I know that this function isn't really going to be very combine-able or reusable, but I would use it so often for just that one thing that I'm going to overlook it.
Okay, enough preamble. Here's what I have so far.
Could I have some suggestions on how to change/finish my checkToggle method? Thanks!

This worked for me:
$(document).ready(function(){
$('#checkbox1').change(function() {
if($(this).attr('checked')) {
$("#myDiv").slideDown(1000);
}
else
{
$('#myDiv').slideUp(1000);
}
});
});

Javascript to check a unique checkbox on form selection

I am a front-end designer and developer with limited JS and jQuery experience. I always know I could learn more, but time has never allowed for that (I could also be using this as an excuse. ; ) Nonetheless, I have an issue on a website I'm currently developing that I need some JS/jQuery help on.
https://dl.dropboxusercontent.com/u/63777185/screenshot.png
This image represents subproducts on a product page. When a user opens the selection box and selects an option, it doesn't automatically check the checkbox. I was able to find something here on StackOverflow that worked with minor tweaks, but the problem comes when there is more than one product. The script that I was using selected all the checkboxes instead of the unique one that I needed.
Another problem is that this code is dynamically generated, so I don't control the output. So, I thought the best way to tackle this was to do addClass to the elements I needed, with an integer to make it unique (since they need to be unique). From there, I didn't know how to get the two pieces of code to work together. This is horribly wrong and you're free to laugh, but this is what I have:
<script>
$(function(){
$('select').each(function(i,j) {
$(this).addClass('selection'+i);
});
$('input').each(function(i,j) {
$(this).addClass('check'+i);
});
$('.selection'+i).change(function() {
var selected = $('select option:selected');
if (selected.val() == "null") {
$('.check'+i).prop('checked', false);
}
else {
$('.check'+i).prop('checked', true);
}
});
});
</script>
Any help is greatly appreciated! : )

hide/show form fields based on dropdown choice with class tag

I have a problem with the show/hide function on an app form. The app form is live here -> http://www.specialfinance.co.uk/introducers/submit-an-enquiry/secured-loans.html
Currently the form works as a multipage form (within javascript) which is fine, it's doing the job nicely, but what I can't figure out based on any of the Q&A guides I've looked thru on here (I've gone thru many google searches) is how to integrate a further show/hide script to hide the applicant 2 column if the dropdown at the top has a value of 1.
The column is a table with all the inputs in separate rows, so I was thinking that the easiest way would be to link to a class and then hide the class, but I have no idea how to do this.
I'm getting there with my knowledge of javascript, but this one seems to be a hurdle I can't get over.

You can use the .change() (jQuery) with the dropdown list to see what the value is, then based off that, hide and show what you need.
$("#idOfDropDown").change(function() {
if ($(this).val() == 1) {
//Show or Hide what you need .show()
}
else {
//Show or Hide .hide()
});
Heres a demo: http://jsfiddle.net/Szt59/1/ using a class.

Here is a quick and dirty example. It's easy to see how you can extend it.
$("#drop").change(function(){
if( $(this).val() === "2" ) {
$(".rest").slideDown("fast");
} else {
$(".rest").slideUp("fast");
}
});
Click to see demo
Edited.

how to pass arguments into an event handler to make it unique?

please run this jsfiddle as an example.
http://jsfiddle.net/AFzqt/11/
in my example, i have a link saying same as above, if you fill out the first box it will copy the value in the second box. look at the code, and look at the display. theres a reiteration of the code just to have the boxes appear twice. well... in my real use of this, i ideally want there to be about 40 of these buttons.
is there a way to do this without copying the code 40 times?
i am new to jquery, usually in another language i would just pass in arguments, but with this syntax I don't see how i can do that? how can i handle this?
feel free to dabble around on my jsfiddle, and hopefully link a new revision, with the goal of reducing the handling of those 2 'same as above' buttons into just one function with the entry id's as parameters

If you add the changeButton class to each of the buttons it will be easier to select each of them to bind the event handler:
Same as Above
Then we can select each of the elements like so:
$(".changeButton").on("click", function(e) {
//select the previous jQuery Mobile select widgets, we will use just the previous two
var $allPrev = $(this).prevAll('.ui-select').find('select');
//change the value of the immediate previous select widget to the value of the one preceding it
$($allPrev[0]).val($($allPrev[1]).val()).selectmenu("refresh");
e.preventDefault();
});
Here is a demo: http://jsfiddle.net/AFzqt/12/
This code will work for umpteen buttons since it works by using intuitive knowledge of the HTML structure (each link uses the previous two select widgets, no matter where on the page the link resides).

What about something like this?
function bind_click(button_id, target_id, origin_id) {
$(button_id).on("click", function(e) {
$(target_id).val($(origin_id).val());
$(target_id).selectmenu("refresh");
e.preventDefault();
});
}
$(function() {
bind_click("#changeButton2", "#entry_20", "#entry_18");
bind_click("#another", "#entry", "#entry2");
// More binding declarations
});

follow url before hiding anchor-tag

I have an autocomplete search form, more or less like the one used on facebook, where I start typing and a list of names shows up.
I made links of each of these names so you can open their profile page.
I also have a function on the search form's input field 'onblur', where I hide the autocomplete div with all the names. So that when I click outside it, it doesn't stay visible. The only problem now is that when I click one of the names, the pages doesn't redirect to the profile page of the anchor tag, even though the cursor does change on hover.
Anybody any idea?

This is because your hide event removes the list before the element can actually be clicked. There are couple of solutions.
First you could use a setTimeout to hide
setTimeout( function() { /* hide list */ }, 500);
In answer to your comment, no, you can't reorder events. So you will have to find a work around. There are a number of methods, but since you are using jQuery I would do it this way.
//you probably have something like this currently
$('element').blur( function() { $('results').hide(); });
//change it to something like this
$('element').blur( function() { $('results').fadeOut(300); });