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/
Related
<div class="panel-body" id="sell_in">
#foreach (var state in Model.States)
{
<div class="checkbox">
<label>
<input type="checkbox" name="SelectedStates" id="buy_#state.Value" value="#state.Value" /> #state.Text
</label>
</div>
}
</div>
I need to capture when any of the 50 checkboxes are checked. This isn't doing it, and I expect it's because the checkboxes are nested in another <div> under sell_in.
$(document).on("click", "div.sell_in", function (event) {
alert("hello");
});
(I got this solution from here: checkbox inside div. On click checked or unchecked using jquery 1.9.1)
Try to select checkbox's using input:checkbox :
$(document).on("click", "input:checkbox", function (event) {
alert("hello");
});
Or specify the ones inside div using :
$(document).on("click", "div#div_id_here input:checkbox", function (event) {
alert("hello");
});
Hoep this helps.
I'm trying to use a pair of radio buttons to start/stop an automated horizontal scroller. I've tried several jquery techniques that I found on SO, but I haven't been able to get them to work.
Here's my latest attempt:
$( "#radAutoScroll0" ).mouseup(function() {
scrollTimer();
});
function scrollTimer(){
if($("#radAutoScroll0").is(':checked')){
// scroller code.....
}
}
<div class="scrollDiv">
<label for="autoScroll" class="autoScrollLabel">Auto Scroll</label><br />
<label for="radAutoScroll0" class="labAutoScroll">
<input type='radio' name='radAutoScroll' id='radAutoScroll0' class="rad1" checked="checked" value='on'/>On
</label>
<label for="radAutoScroll1" class="labAutoScroll">
<input type='radio' name='radAutoScroll' id='radAutoScroll1' class="rad1" value='off'/>Off
</label>
</div>
Or try to use 'click' event on your label as they wrap the radio-button:
$(document).on('click', '.labAutoScroll', function(event) {
var thisButton = $(this).prop('for');
if (thisButton == 'radAutoScroll0') {
} else {
}
});
If you have more than 2 radio buttons you can use switch(thisButton) to separate your cases.
Use the change event, and bind it to both radio buttons (using the labAutoScroll class) so it fires when you click either of them.
$('.labAutoScroll').change(function()
{
if($("#radAutoScroll0").is(':checked')){
// scroller code.....
}
});
I have made a check-box checkall/uncheckall.
HTML
<div> Using Check all function </div>
<div id="selectCheckBox">
<input type="checkbox" class="all" onchange="checkAll('selectCheckBox','all','check','true');" />Select All
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 1
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 2
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 3
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 4
</div>
main.js
function checkAll(parentId,allClass,checkboxClass,allChecked){
checkboxAll = $('#'+parentId+' .'+allClass);
otherCheckBox = $('#'+parentId+' .'+checkboxClass);
checkedCheckBox = otherCheckBox.filter($('input[type=checkbox]:checked'));
if(allChecked=='false'){
if(otherCheckBox.size()==checkedCheckBox.size()){
checkboxAll.attr('checked',true);
}else{
checkboxAll.attr('checked',false);
}
}else{
if(checkboxAll.attr('checked')){
otherCheckBox.attr('checked',true);
}else{
otherCheckBox.attr('checked',false);
}
}
}
It works fine. But get bulky when I have whole lot of checkboxes. I want to do same work by using jQuery rather than putting onchange on each checkbox. I tried different sort of things but couldnot work. I tried following one:
$('.check input[type="checkbox"]').change(function(e){
checkAll('selectCheckBox','all','check','true');
});
to do same work as onchange event but didnot work. Where do I went wrong.
I think you just need this: You do not need to pass all the arguments and have the inline onchange event attached to it. You can simplify your code.
$(function () {
$('input[type="checkbox"]').change(function (e) {
if(this.className == 'all')
{
$('.check').prop('checked', this.checked); //Toggle all checkboxes based on `.all` check box check status
}
else
{
$('.all').prop('checked', $('.check:checked').length == $('.check').length); // toggle all check box based on whether all others are checked or not.
}
});
});
Demo
Your selector is wrong:
.check input[type="checkbox"]
Above selects any input of type checkbox that has the ancestor with class .check. It'll match this:
<div class="check">
<input type="checkbox".../>
</div>
it should be:
input.check[type="checkbox"]
You closed the string here $('.check input[type='checkbox']') instead, you should use double quotes $('.check input[type="checkbox"]')
I want to display a div on each button click and also want to hide the other all divs how I can do it.
HTML
<div id=a style="display:none">1</diV>
<div id=b style="display:none">2</diV>
<div id=c style="display:none">3</diV>
<div id=d style="display:none" >4</diV>
<input type=button value=1 id=w>
<input type=button value=2 id=x>
<input type=button value=3 id=y>
<input type=button value=4 id=z>
jQuery
$('#w').live('click', function () {
$('#a').css('display', 'block');
});
$('#x').live('click', function () {
$('#b').css('display', 'block');
});
$('#y').live('click', function () {
$('#c').css('display', 'block');
});
$('#z').live('click', function () {
$('#d').css('display', 'block');
});
http://jsfiddle.net/6UcDR/
In your JSFiddle, you are using jQuery 1.7.2. If you are using this version in your real app, you should not be using $.live(), but use $.on() instead - the former is deprecated in favour of the latter.
The simplest and cleanest way to solve your problem would be to wrap both your buttons and divs in containers, and use $.index() to associate a button with a div:
<div class="showThese">
<div id="a" style="display:none">1</div>
<div id="b" style="display:none">2</div>
<div id="c" style="display:none">3</div>
<div id="d" style="display:none" >4</div>
</div>
<div class="buttons">
<input type="button" value="1" id="w">
<input type="button" value="2" id="x">
<input type="button" value="3" id="y">
<input type="button" value="4" id="z">
</div>
Note that your attributes must be quoted, as in the above HTML.
Then, in JavaScript, you only need to bind one delegated event to the buttons container. I'll use $.on() in this case:
$('div.buttons').on('click', 'input', function() {
var divs = $('div.showThese').children();
divs.eq($(this).index()).show().siblings().hide();
});
Here is a demo.
The above method does away with having to use IDs and other attributes, however you will need to be careful if you want other elements in the containers, as $.index() will begin to fail if you do.
Just start by hiding all other div's, then showing the one you want to be shown.
$('#w').live('click', function(){
$('div').hide();
$('#a').show();
});
If understand you correctly, it should be just setting the display:none for the divs before showing your specific div.
$('#w').live('click', function(){
$('div').css('display','none');
$('#a').css('display','block');
});
$('#x').live('click', function(){
$('div').css('display','none');
$('#b').css('display','block');
});
$('#y').live('click', function(){
$('div').css('display','none');
$('#c').css('display','block');
});
$('#z').live('click', function(){
$('div').css('display','none');
$('#d').css('display','block');
});
live is deprecated, use on
$('input').on('click', function(){
var index = $(this).index();
$('div').hide().eq(index).show();
});
example from jQuery.com:
function notify() { alert("clicked"); }
$("button").on("click", notify);
Check the demo http://jsfiddle.net/6UcDR/2/ Is this the thing that you want to achieve.
Try this jQuery-
$('#w').click(function(){
$('#a').show()
$('#b,#c,#d').hide()
});
$('#x').click(function(){
$('#b').show();
$('#a,#c,#d').hide()
});
$('#y').click(function(){
$('#c').show();
$('#b,#a,#d').hide()
});
$('#z').click(function(){
$('#d').show();
$('#b,#c,#d').hide()
});
Add a class to all the divs u want to show or hide
eg:
<div id=a class="hide" style="display:none">1</diV>
And then add the following statement to each onclick function
$('.hide').css('display','none'); /* Replace .hide with whatever class name u have chosen*/
To see the answer in action: http://jsfiddle.net/6UcDR/1/
Hello guys i have the below html for a number of products on my website,
it displays a line with product title, price, qty wanted and a checkbox called buy.
qty input is disabled at the moment.
So what i want to do is,
if the checkbox is clicked i want the input qty to set to 1 and i want it to become enabled.
I seem to be having some trouble doing this. Could any one help
Now i can have multiple product i.e there will be multiple table-products divs within my html page.
i have tried using jQuery to change the details but i dont seem to be able to get access to certain elements.
so basically for each table-product i would like to put a click listener on the check box that will set the value of the input-text i.e qty text field.
so of the below there could be 20 on a page.
<div class="table-products">
<div class="table-top-title">
My Spelling Workbook F
</div>
<div class="table-top-price">
<div class="price-box">
<span class="regular-price" id="product-price-1"><span class="price">€6.95</span></span>
</div>
</div>
<div class="table-top-qty">
<fieldset class="add-to-cart-box">
<input type="hidden" name="products[]" value="1"> <legend>Add Items to Cart</legend> <span class="qty-box"><label for="qty1">Qty:</label> <input name="qty1" disabled="disabled" value="0" type="text" class="input-text qty" id="qty1" maxlength="12"></span>
</fieldset>
</div>
<div class="table-top-details">
<input type="checkbox" name="buyMe" value="buy" class="add-checkbox">
</div>
<div style="clear:both;"></div>
</div>
here is the javascript i have tried
jQuery(document).ready(function() {
console.log('hello');
var thischeck;
jQuery(".table-products").ready(function(e) {
//var catTable = jQuery(this);
var qtyInput = jQuery(this).children('.input-text');
jQuery('.add-checkbox').click(function() {
console.log(jQuery(this).html());
thischeck = jQuery(this);
if (thischeck.is(':checked'))
{
jQuery(qtyInput).first().val('1');
jQuery(qtyInput).first().prop('disabled', false);
} else {
}
});
});
// Handler for .ready() called.
});
Not the most direct method, but this should work.
jQuery(document).ready(function() {
jQuery('.add-checkbox').on('click', function() {
jQuery(this)
.parents('.table-products')
.find('input.input-text')
.val('1')
.removeAttr('disabled');
});
});
use
jQuery('.add-checkbox').change(function() {
the problem is one the one hand that you observe click and not change, so use change rather as it really triggers after the state change
var qtyInput = jQuery(this).children('.input-text');
another thing is that the input is no direct child of .table-products
see this fiddle
jQuery('input:checkbox.add-checkbox').on('change', function() {
jQuery(this)
.parent()
.prev('div.table-top-qty')
.find('fieldset input:disabled.qty')
.val(this.checked | 0)
.attr('disabled', !this.checked);
});
This should get you started in the right direction. Based on jQuery 1.7.2 (I saw your prop call and am guessing that's what you're using).
$(document).ready(function() {
var thischeck;
$('.table-products').on('click', '.add-checkbox', function() {
var qtyInput = $(this).parents('.table-products').find('.input-text');
thischeck = $(this);
if (thischeck.prop('checked')) {
$(qtyInput).val('1').prop('disabled', false);
} else {
$(qtyInput).val('0').prop('disabled', true);
}
});
});
Removing the property for some reason tends to prevent it from being re-added. This works with multiple tables. For your conflict, just replace the $'s with jQuery.
Here's the fiddle: http://jsfiddle.net/KqtS7/5/