Jquery method to capture checkbox click inside nested div - javascript

<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.

Related

Jquery onclick function called two time on dynamically added button element

I have created a code on my HTML page that their multiple checkboxes and created one button dynamically in js snippet for performing some event, but when I clicked on the button to perform that even that, then it's making calls to that event snippet two times. I wanted to know how to add the event to that button.
Here is the js code:-
$(".panel-body").on("click", '#select_none', function(event) {
$("input[name='nodelevel']:checkbox").each(function() {
this.checked = false;
});
});
Make sure there is only one parent with .panel-body class name. maybe there is two of .panel-body and it makes this happen. like this:
<div class="panel-body">
...
<div class="panel-body">
...
<!-- your selectors -->
</div>
</div>
try stoppropagation to avoid second parent event listener call:
$(".panel-body").on("click", '#select_none', function(event) {
event.stopPropagation();
$("input[name='nodelevel']:checkbox").each(function() {
this.checked = false;
});
});
EDIT : and of course you can add listener to document instead of .panel-body :)
Example:
<input class="itemClass" type="checkbox" name="Items" value="Bike"> I have a bike<br>
<input class="itemClass" type="checkbox" name="Items" value="Car" checked> I have a car<br>
<button name="submit" onclick="getValue()" value="Submit">
Then:
function getValue() {
var id;
var name;
var temp = [];
$('.itemClass').each(function () {
var sThisVal = (this.checked ? $(this).val() : "");
console.log(sThisVal);
if (this.checked) {
// $("input[name=Items]:checked").map(function () {
temp.push(sThisVal);
}
});
console.log(temp);
$('.itemCheckboxClass').prop('checked', false);
}

adding click event to class with jQuery

I found found several question's answers similar to this, I tried some of them, but no luck. May my scenario is different, I want to make other checkbox disable when anyone of them is clicked. if one is clicked second go disabled.
Edit:
I have two checkboxes i.e; chk1 and chk2. if chk1 is checked chk2 become disable, if chk2 is checked chk1 become disable
HTML
<tr class="cart-item-row">
<td class="remove-from-cart">
<label class="td-title">Remove:</label>
<input type="checkbox" name="removefromcart" value="4392" tabindex="15" class="class2">
</td>
<td class="add-to-cart">
<label class="td-title">Buy Now:</label>
<input type="checkbox" name="addtocart" value="4392" tabindex="16" class="class2">
</td>
</tr>
JS
<script>
$(function () { // I am also adding class to checkbox through JS
$('.cart-item-row > td > input[type="checkbox"]').addClass("class2");
});
</script>
<script>
//$('input[class^="class"]').click(function () {
//$('.class2').unbind().click(function () {
$('.class2').click(function () {
var $this = $(this);
if ($this.is(".class2")) {
if ($this.is(":checked")) {
$(".class2").not($this).prop({ disabled: true, checked: false });
} else {
$(".class2").prop("disabled", false);
}
}
});
</script>
You have missing , You can place your jquery within
$(document).ready(function(){
}
You have to put your click event in document ready state $(function () { });
You can see here working Example

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/

How to run a function from radio button mouseup event?

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.....
}
});

trouble with jquery and traversing the DOM to select the appropriate elements

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/

Categories