We Keep Coding

JQuery loop through multiple input checkboxes

I am tasked with having one checkbox within multiple divs. When the checkbox is checked, I want to hide the div. I want to use Jquery to implement this functionality. I feel I am close, but missing something essential.
Here is my code and any help would be greatly appreciated.
Thanks,
Roka
<div id='legGroup1' class="elementGroup">
<input type="checkbox" class="delCheck" id="1" />Delete</label>
</div>
<div id='legGroup2' class="elementGroup">
<input type="checkbox" class="delCheck" id="2" />Delete</label>
</div>
<button type='button' id='removeLeg'></button>
$("#removeLeg").click(function (e) {
$('.delCheck').each(function () {
if (this.id.prop('checked')) {
$("#legGroup" + this.id).hide();
}
});
});

You can simply find the parent element:
$("#removeLeg").click(function() {
$('.delCheck:checked').each(function() {
// ^^^^^^^^ -> look it filters only checked elements
$(this).parent().hide();
});
});
Or, more accurate, using closest method:
$(this).closest('.elementGroup').hide();

Since your using an each function, base it off the value of the items in the array the function returns.
$("#removeLeg").click(function (e) {
$('.delCheck').each(function (key, value) {
if ($(value).is(':checked')) {
$(value).parent().hide();
}
});
});

First of all, you're missing an open label tag in your HTML.
<label><input type="checkbox" class="delCheck" id="1" />Delete</label>
As for the click event, you can try this, to loop through each checked checkbox and hide their closest div parent.
$(document).ready(function(){
$('#removeLeg').on('click', function(){
$('.delCheck:checked').each(function(){
$(this).parents('div').hide();
});
});
});
Here's a demo: https://jsfiddle.net/nx9e1yp5/1/

JQuery - show second checkbox when ticking first

This is my simple example I'm currently stuck on. I'm trying to get a 2nd checkbox to appear, if I click on the first one.
In the example below (demo: https://jsfiddle.net/d2ykzjvg/1/) you can see that both checkboxes appear when the page loads.
If I click the red one saying "1st" then nothing happens. If I remove the tick from the first checkbox, the blue "2nd" box is hidden.
If I then tick the red one again, the blue one appears, and toggles on and off when I toggle the red checkbox.
I don't know how to get the blue checkbox to be hidden when the page first loads.
HTML
<form action="#" method="post">
<div class="label label-danger">
<label for="rev"><input id="rev" type="checkbox" name="rev" id="rev" value="y"> 1st</label>
</div>
<div class="label label-primary" id="r2">
<label for="rev_inc"><input type="checkbox" name="rev_inc" id="rev_inc" value="y"> 2nd</label>
</div>
</form>
Javascript
$(function() {
$('#rev').change(function() {
if($(this).is(":checked")) {
$('#r2').show();
}
else{
$('#r2').hide();
}
});
});
JSFiddle: https://jsfiddle.net/d2ykzjvg/1/

You should use style="display:none" like this:
<label for="rev_inc"><input type="checkbox" name="rev_inc" id="rev_inc" value="y" style="display:none;"> 2nd</label>
In order to hide it on page-load

You need to hide first your 2nd checkbox
$(document).ready(function(){
$('#r2').hide();
$('#rev').change(function() {
if($(this).is(":checked")) {
$('#r2').show();
}
else {
$('#r2').hide();
}
});
});

Simple. Just add $('#r2').hide(); this on page load function.
OR add this css below:
#r2{
display:none;
}

Put an inline style in your second div like this
<div class="label label-primary" id="r2" style="display:none;">
<label for="rev_inc"><input type="checkbox" name="rev_inc" id="rev_inc" value="y"> 2nd</label>
</div>
Updated fiddle : https://jsfiddle.net/d2ykzjvg/2/

You can hide the div on "documentReady" or you can add style ( display : none )
$(function() {
$('#r2').hide();
$('#rev').change(function() {
if ($(this).is(":checked")) {
$('#r2').show();
} else {
$('#r2').hide();
}
});
});
or
<style>
#r2 { display:none; }
</style>

Way to apply a :not against a group of element css selectors?

Given a group of inputs:
<div id="group">
<input id="uno" class="red"></input><br/>
<input id="dos" class="red"></input><br/>
<input id="tres" class="blue"></input><br/>
<textarea id="a1" class="blue"></textarea><br/>
<textarea id="a2" class="red"></textarea><br/>
</div>
I want to only select non-blue class input and textarea elements. This successfully excludes blue textareas only, but the inputs are still selected:
$('#group').on('keypress', 'input,textarea:not(.blue)', function(e){
$(e.target).css('background-color', 'lightgreen');
});
I would want to do something like '(input,textarea):not(.blue)' but that doesn't work. Is there a way to apply a :not against a group of element selectors?
Here's a starting point: http://jsfiddle.net/spencerw/wzvqjtna/

When you use multiple selectors each selector in it should be complete
$('#group').on('keypress', 'input:not(.blue),textarea:not(.blue)', function(e){
$(e.target).css('background-color', 'lightgreen');
});
$('#group').on('keypress', 'input:not(.blue),textarea:not(.blue)', function(e) {
$(e.target).css('background-color', 'lightgreen');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="group">
<input id="uno" class="red"/><br/>
<input id="dos" class="red"/><br/>
<input id="tres" class="blue"/><br/>
<textarea id="a1" class="blue"></textarea><br/>
<textarea id="a2" class="red"></textarea><br/>
</div>

I dont think that adding :not to a group would be possible the way you want to do, one correct way and solution would be doing as follows:
$('#group').on('keypress', 'input:not(.blue),textarea:not(.blue)', function(e){
$(e.target).css('background-color', 'lightgreen');
});

or you can do like this
$('#group input,textarea').not(".blue").on('keypress', function(e){
$(e.target).css('background-color', 'lightgreen');
});

Switch to different button on click

I want code to switch the buttons. If I pressed button1 first time, it must show button2 and vice versa.
<input type="submit" value="asc" name="button1" id="but1">
<input type="submit" value="desc" name="button2" id="but3">

One solution without the need for JQuery would be this one:
<input type="button" value="asc" name="button1" id="but1" onClick="document.getElementById('but3').style.display='';this.style.display='none';">
<input type="button" value="desc" name="button2" id="but3" style="display:none;" onClick="document.getElementById('but1').style.display='';this.style.display='none';">
You can also do it this way if you want to use the visibility:
<input type="button" value="asc" name="button1" id="but1" onClick="document.getElementById('but3').style.visibility='visible';this.style.visibility='hidden';">
<input type="button" value="desc" name="button2" id="but3" style="visibility:hidden;" onClick="document.getElementById('but1').style.visibility='visible';this.style.visibility='hidden';">
Using visibility preserves the buttons position. I changed the type from submit to button just out of demonstration reasons.
You can look at both JSFIDDLE demos of these solutions here and here.

Not sure what you're trying to achieve, but you can use:
$('input[type="submit"]').click(function() {
$(this).hide().siblings('input[type="submit"]').show();
});
Fiddle Demo

Simply Use .toggle() in jQuery
$('input[type="submit"]').click(function() {
$('input[type="submit"]').toggle();
});
Fiddle

I'm betting your .toggle-radio-switch elements are siblings. Remove .parent() from your code. It isn't needed since .radio-switch-slider is contained directly in .toggle-radio-switch
$(this).find('.radio-switch-slider')

document.getElementById('but1').addEventListener('click', function() {
document.getElementById('but1').style.visibility = 'hidden';
document.getElementById('but3').style.visibility = 'visible'; }, false);
document.getElementById('but3').addEventListener('click', function() {
document.getElementById('but3').style.visibility = 'hidden';
document.getElementById('but1').style.visibility = 'visible'; }, false);
If you want to hide button and its placeholder completely, use style.display = 'none' and style.display = 'block'. If you put both buttons in div container with default static positioning, then both buttons will appear at the same position in container.

By default when page will load put following code so that your second button will be hide.
$(document).ready(function(e){
$('#but3').hide();
});
After that Put code that were
$('input[type="submit"]').click(function() {
$(this).hide().siblings('input[type="submit"]').show();
});

Try using the following functions:
$(element)click(callback) will handle the click of the element
$(element).show() will show the element
$(element).hide() will hide the element
so a semple code is:
//first hidden the second button
$('#but3').css('display','none')
// handle click of first button
$('#but1').click(function(){
$(this).hide()
$('#but3').show()
});
// handle click of second button
$('#but3').click(function(){
$(this).hide()
$('#but1').show()
});
Here is an example: http://jsfiddle.net/L7zux/1/

You can try the code below:
$('input[type="submit"]').click(function(){
var valueOfButton = $(this).val();
if(valueOfButton == 'asc')
{
$('input[value="asc"]').show();
$('input[value="desc"]').hide();
}
else
{
$('input[value="desc"]').show();
$('input[value="asc"]').hide();
}
});

foreach radio button show more info

I am trying to make for each radio button, when it is clicked on to show the div with more infos about that clicked title, when another radio button is clicked then the to show info about that radio button and hide the other one that was clicked on:
HTML:
<input type="radio" id="1" />
<div class="event1">
content..
</div>
<input type="radio" id="2" />
<div class="event2">
content..
</div>
<input type="radio" id="3" />
<div class="event3">
content..
</div>
jQuery:
var i = 1;
while(i < 10) {
$('.event' + i).hide();
$("#" + i).click(function() {
$('.event' + i).show();
});
i++;
}

HTML
<input type="radio" name="radio" id="1" />
<div class="event">
content.. 1
</div>
<input type="radio" name="radio" id="2" />
<div class="event">
content.. 2
</div>
<input type="radio" name="radio" id="3" />
<div class="event">
content.. 3
</div>
JS
$('input[name=radio]').click(function() {
$('.event').hide();
$(this).next('.event').show();
});
CSS
.event {
display: none;
}
Fiddle
http://jsfiddle.net/UKn6D/

You can try changing your loop with "each"
$(function(){
$("input[type='radio']").each(function(){
$(this).change(function(){
if ($(this).is(':checked'))
$(this).next().show();
else
$(this).next().hide();
});
});
});
It would be preferrable if you assign a class to radio elements to focus specifically on them. Something like "radioElements" should be enough. Or you can also use id with a starter: "radio_1","radio_2" and then use the input[id^='radio_'].
In all the case you can use "each" function.
More deeply, if you want that all other radio "info" cut off change it to:
$(function(){
$("input[type='radio']").each(function(){
$(this).change(function(){
if ($(this).is(':checked')) {
$("input[type='radio']").next().hide();
$(this).next().show();
}
});
});
});

$('input[type="radio"]').on('change', function() {
var id = $(this).attr('id'); //Get the ID from the selected radio button
$('div:visible').hide(); //Hide visible Divs
$('div.event' + id).show(); //Show matched Div
});
You'll want to give the divs an additional class name and update the jQuery code here. You'll also want to make sure to assign a name attribute to the input elements so that they are all part of the same group -- assuming they are.

instead of having a while look like that why not simply have
<div id="input-container">
<input class="clickable" />
<div class="content"></div>
</div>
This will then work with multiple and the jQuery can just be like this
$('#input-container input.clickable').click(function() {
$(this).parent().find('div.content').hide();
$(this).next('div.content').show();
});
I haven't actually tested the above but I believe it should work for you & the reason to have the container ID is just to speed your jQuery up as it is faster to attach via #elementID first