We Keep Coding

Change text of button if it has a display of none?

I have a list of of checkboxes that are being used a search fields for a database. When someone clicks a checkbox it will show a button with the text from the label of that checkbox. However, I need that button to be have empty text when it is not visible (in the case of someone clicking the checkbox to hide the button).
Here's my code:
$(document).ready(function() {
$('#locationAll').click(function() {
var value = $('#locationAll').parent().text();
$('#location-all-button').html(value + " ×").toggle('fast');
});
});
$(document).ready(function() {
$('.search-popup').click(function() {
$(this).hide('fast');
});
if ($('.search-popup').css('display') == 'none') {
$(this).text("");
};
});
button {
background-color: lightgray;
border-radius: 20px;
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox" value="all" id="locationAll" />All
</label>
<br>
<br>
<button class="search-popup btn" id="location-all-button"></button>
For some reason I can't make the button stay hidden before the checkbox on the example here but that isn't a problem in my full code. if you need more info let me know I might have missed something.

Ok so I changed a few things. I made this work for any checkbox that follows the naming scheme I made really quickly. The scheme is the id of the button = the "button-"+id. Also I hiding all buttons with a class right form the start to set their default state.
$(document).ready(function()
{
\\change to allow all checkboxes to trigger
$('input[type=checkbox]').click(function()
{
\\change the id so it match a button when add "button-" to the start
\\this allows me to target the matching button with any chechbox
$('#button-'+$(this).attr('id')).toggle('fast');
});
$('.search-popup').click(function()
{
$(this).hide('fast');
\\ sets the check box to false so it not checked when you close it
$("#"+$(this).text().replace("  ×","")).attr('checked', false);
});
\\hides all buttons right form the start
$('button.search-popup').each(function()
{
$(this).hide();
});
});
<label>
<input type="checkbox" value="all" id="All" />All
</label>
<br>
<br>
<button class="search-popup btn" id="button-All">All  ×</button>
now if you want to create and remove buttons when a checkbox has changed state you can add an if state meant in that checks to see if the button with the matching id exists or not,!$(tag).size().

Select multiple html elements by clicking on one element in Jquery

I have two images on my html page and I have one button named MOVE to move them left separately. To move them I have a Jquery function with selected class.
I have two input fields each of them belongs to the particular image. My button has a click counter function so I need to get a count by clicking on the same button to both images separately into those two input fields.
I think when I select image 1, It's also should be selected input 1, and then the counter will count image 1's counts of moves and when I select image 2, It's also should be selected input 2, and then the counter will count image 2's counts of moves.
I don't know how to select multiple elements by clicking on one element. please help
My Jquery function
$(document).ready(function() {
$(".plan1").click(function() { //medium move
// unselect others
$(".plan1").removeClass("selected");
// reselect this one
$(this).addClass("selected");
});
$("#b1").click(function() {
// animate selected
$(".plan1.selected").animate({left:'+=20px'});
$('#f1.selected').val(function(i, val) { return +val+1 });
});
});
HTML
<img src="imagesource" class="plan1" />
<img src="imagesource" class="plan1" />
<input type="text" id="f1" />
<input type="text" id="f2" />
<button id="b1">MOVE</button>

This might get you started.
jsFiddle Demo
$('#f1, #f2').val('0');
$(".plan1").click(function() {
$(".plan1").removeClass("selected");
$(this).addClass("selected");
});
$("#b1").click(function() {
if ( $(".plan1.selected").length == 0 ) {
alert("Pick a pic");
return false;
}
var inpID = $(".plan1.selected").attr('id').slice(-1);
var cnt = $('#f'+inpID).val();
cnt++;
$('#f'+inpID).val(cnt);
$(".plan1.selected, #f"+inpID).animate({'left' : '+=50px' });
$(".plan1.selected").removeClass("selected");
});
* {position:relative;} /* Critical! Allows elements to move */
img, input{display:block;max-width:80px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="pic1" src="http://lorempixel.com/80/80" class="plan1" />
<img id="pic2" src="http://lorempixel.com/80/80/animals" class="plan1" />
<input type="text" id="f1" />
<input type="text" id="f2" />
<button id="b1">MOVE</button>
Notes:
(1) In CSS, you must first make the elements position:relative because the default (position:static) cannot be styled with left or right
(2) In CSS, also must make the inline elements img and input into block elements, because inline elements cannot be animated left/right

Jquery check boxes

I want to do the following:
I have three checkboxes:
Hide Box1
Hide Box2
Hide Box3
I want to use Jquery to:
When Box1 checked, hide box 2 and 3, if unchecked make box 2 and 3 visible. Also where do I place the code?
Thanks in advance

Here is a complete example using the markup you gave in the comment. I also took the liberty to give the checkbox's labels which means when you click the text it will toggle the checkbox (more accessible and usable).
See on JSFiddle
HTML
<form>
<div class="toggle-checkbox">
<input type="checkbox" name="checkMeOut" id="box1" />
<label for="box1">Hide Box1</label>
</div>
<div class="toggle-checkbox">
<input type="checkbox" name="checkMeOut" id="box2" />
<label for="box2">Hide Box2</label>
</div>
<div class="toggle-checkbox">
<input type="checkbox" name="checkbox3" id="box3" />
<label for="box3">Hide Box3</label>
</div>
</form>
jQuery
$('.toggle-checkbox input[type=checkbox]').click(function () {
if ($(this).is(':checked')) {
$('.toggle-checkbox').not($(this).closest('.toggle-checkbox')).hide();
} else {
$('.toggle-checkbox').show();
}
});
To include jQuery in your page, place the following within your <head> tag.
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

You could do this in between tags
$('.one').click(function () {
if ($(this).is(':checked')) {
$('input[type=checkbox]').not(this).hide();
} else {
$('input[type=checkbox]').not(this).show();
}
});
http://jsfiddle.net/davidchase03/MYASr/

Assuming your checkboxes have the ids "box1", "box2" and "box3":
$(document).ready(function(){
$("#box1").change(function(){
$("#box2, #box3").toggle();
}
}
I haven't tested this, but anytime hide box 1 is checked or unchecked, it will toggle the visibility of the other two boxes.
The optimal place for your code would be inside of a script element located just before your closing body tag, so something like
<body>
Your page stuff here
<script>
Code from above here
</script>
</body>

How to use jQuery overlay to get radio buttons to the popup window?

I am following this tutorial and designed and alert window(including online demo),
http://jquerytools.org/demos/overlay/modal-dialog.html
I could modify the source code and added radio buttons to the alert message.Source code is given bellow(you don't have to go through the whole code.Just see the place where I have added radio buttons and place where I access the value of the radio button),
<!DOCTYPE html>
<html>
<!--
This is a jQuery Tools standalone demo. Feel free to copy/paste.
http://flowplayer.org/tools/demos/
Do *not* reference CSS files and images from flowplayer.org when in
production Enjoy!
-->
<head>
<title>jQuery Tools standalone demo</title>
<!-- include the Tools -->
<script src="jquery.tools.min.js"></script>
<!-- standalone page styling (can be removed) -->
<link rel="shortcut icon" href="/media/img/favicon.ico">
<link rel="stylesheet" type="text/css"
href="/media/css/standalone.css"/>
<style>
.modal {
background-color:#fff;
display:none;
width:350px;
height:250px;
padding:15px;
text-align:left;
border:2px solid #333;
opacity:0.8;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-moz-box-shadow: 0 0 50px #ccc;
-webkit-box-shadow: 0 0 50px #ccc;
}
.modal h2 {
background:url(/media/img/global/info.png) 0 50% no-repeat;
margin:0px;
padding:10px 0 10px 45px;
border-bottom:1px solid #333;
font-size:20px;
}
</style>
</head>
<body><!-- the triggers -->
<p>
<button class="modalInput" rel="#yesno">Yes or no?</button>
<button class="modalInput" rel="#prompt">User input</button>
</p>
<!-- yes/no dialog -->
<div class="modal" id="yesno">
<h2>This is a modal dialog</h2>
<p>
You can only interact with elements that are inside this dialog.
To close it click a button or use the ESC key.
</p>
<!-- yes/no buttons -->
<p>
<button class="close"> Yes </button>
<button class="close"> No </button>
</p>
</div>
<!-- user input dialog -->
<div class="modal" id="prompt">
<h2>This is a modal dialog</h2>
<p>
You can only interact.
</p>
<!-- input form. you can press enter too -->
<form>
//Added radio buttons
<input type="radio" name="sex" value="male" id="male"> Male<br />
<input type="radio" name="sex" value="female" id="female"> Female<br />
<button type="submit">Submit</button>
</form>
<br />
</div>
<script>
$(document).ready(function() {
var triggers = $(".modalInput").overlay({
// some mask tweaks suitable for modal dialogs
mask: {
color: '#ebecff',
loadSpeed: 200,
opacity: 0.9
},
closeOnClick: false
});
var buttons = $("#yesno button").click(function(e) {
// get user input
var yes = buttons.index(this) === 0;
// do something with the answer
triggers.eq(0).html("You clicked " + (yes ? "yes" : "no"));
});
$("#prompt form").submit(function(e) {
// close the overlay
triggers.eq(1).overlay().close();
// get user input
var input = $("input", this).val(); // this input value always return 'male' as the output
// do something with the answer
triggers.eq(1).html(input);
// do not submit the form
return e.preventDefault();
});
});
</script>
</body>
</html>
This demo has two alert windows. I am talking about the alert message which has the text input.In my example I have remove text input and added two radio buttons.
But when I click the 'submit' button It always return me 'male' as the output
Can anyone please help me to solve this problem? I need to get the output of the radin buttons to variable 'input'

Use this to pop up the box. In the HTML keep the radio button.
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="web_dialog_title">Email this Article</td>
<td class="web_dialog_title align_right">
Close
</td>
</tr>
<TR><TD>
Use radio button.
</TD></TR>
</table>
<script type="text/javascript">
$(document).ready(function ()
{
$("#btnShowSimple").click(function (e)
{
ShowDialog(false);
e.preventDefault();
});
$("#btnClose").click(function (e)
{
HideDialog();
e.preventDefault();
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
HideDialog(); }
});
});
function ShowDialog(modal)
{
$("#overlay").show();
$("#dialog").fadeIn(300);
if (modal)
{
$("#overlay").unbind("click");
}
else
{
$("#overlay").click(function (e)
{
HideDialog();
});
}
}
function HideDialog()
{
$("#overlay").hide();
$("#dialog").fadeOut(300);
}

you changed text type input with radio type input . so you must change
var input = $("input", this).val();
with this one
var input = $("input:checked", this).val();

perdickss provides a very good answer for this example.
But that will not work if you have multiple inputs in the page. So you should use something like this:
var input = $("input[name=FIELD_NAME]:checked", this).val();
Where FIELD_NAME is the name you have for the inputs you want to check. In this case the code would look like:
var input = $("input[name=sex]:checked", this).val();

As you wrote in your code:
<form>
<input type="radio" name="sex" value="male" id="male"> Male<br />
<input type="radio" name="sex" value="female" id="female"> Female<br />
<button type="submit">Submit</button>
</form>
There are two input fields in your #prompt form, so when you get value with this code:
var input = $("input", this).val();
You will always get value of first matched element (which is male).
All you have to do is specify checked input using :checked selector, I suggest you additionally to add input's name:
var input = $("input[name=sex]:checked", this).val();

html multiselect images

I printed to the screen 16 icons (little pictures).
Now I want to be able to select icons,
and when I press a button the selected icons ids will be sent in a form.
I saw in the net only checkboxes and lists multiselect,
what's the best way to do this?
(I'm pretty new to web design)
thanks ahead!

Although jQuery isn't in your tags, you should introduce yourself to jQuery. It'll make your life easier, for what you're trying to do. Here is the basic steps both if you use jQuery and if use just Javascript:
With jQuery
Give all your icons a class and each one a unique id:
<img src='icon1.png' data-iconID=2233 class='myIcons' />).
Then bind that class to a click event
$('.myIcons').bind('click', function() {
$(this).toggleClass('selectIcon');
});
Attach form submit function to onsubmit:
<form ... onsubmit="submitForm();">
Build submitForm function:
function submitForm() {
var csvIconIds = '';
$.each($('.myIcons.selectIcon'), function (index, value) {
csvIconIds += $(value).attr('data-iconID');
});
//submit scvIconIds here along with other form data (ajax?)
}
With Javascript
Similar as above but way more complicated...
To toggle classes see this thread: How to add/remove a class in JavaScript?
To getting attributes by class see this site: http://www.actiononline.biz/web/code/how-to-getelementsbyclass-in-javascript-the-code/

This could be a way using just plain Javascript or jQuery. I prefer the jQuery version, since it separates the click handler from the markup, instead of using inline onclick handlers, which are in general discouraged.
What this does is use an input element array, which you can create by adding [] to the element name. This same technique can be used on SELECTs and other elements, since it signals to the server that an array has been submitted, as opposed to value known by a single key.
<html>
<head>
<style type="text/css">
div img {
cursor: pointer;
border: 1px solid #f00;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>
function setFormImage(id) {
if (id != '' && !document.getElementById('input_'+id)) {
var img = document.createElement('input');
img.type = 'text';
img.id = 'input_'+id;
img.name = 'images[]';
img.value = id;
document.imageSubmit.appendChild(img);
}
}
$(document).ready(function(){
$('#jqueryimages img').click(function(){
setFormImage(this.id);
});
});
</script>
</head>
<body>
<pre><?php
if (count($_GET['images'])) {
print_r($_GET['images']);
}
?></pre>
<div style="float: left; width: 49%;">
<h1>Plain ol' HTML</h1>
1. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-1" onclick="setFormImage(this.id)"/>
<br/>
2. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-2" onclick="setFormImage(this.id)"/>
<br/>
3. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-3" onclick="setFormImage(this.id)"/>
<br/>
4. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-4" onclick="setFormImage(this.id)"/>
</div>
<div id="jqueryimages" style="float: left; width: 49%;">
<h1>jQuery</h1>
5. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-5"/>
<br/>
6. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-6"/>
<br/>
7. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-7"/>
<br/>
8. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-8"/>
</div>
<h1>Form Submit</h1>
<form name="imageSubmit" method="get">
<input type="submit" value="View Selected"/>
</form>
</body>
</html>

try this
var idArray = [];
$("#container-id img").each(function(index,value){
idArray.push($(value).attr("id"));
});
//do anything with the array