change radio button state when parent is clicked - javascript

I have this markup :
<div class='A'>
<input type='radio' name='B' class='B' />
</div>
<div class='A'>
<input type='radio' name='B' class='B' />
</div>
<div class='A'>
<input type='radio' name='B' class='B' />
</div>
The desired functionality is to select the radio either by clicking parent div or the radio input itself and if the radio is already checked then click on parent will have no effect i.e return false.
I have made it to change on click of parent, but when i click on the radio button , nothing happens.
What's wrong with my approach ?
jQuery :
$('input:radio').closest('div').on('click', function (e) {
if ($('input:radio', this).prop('checked') === true) {
console.log("returning false");
return false;
}
$('input:radio', this).prop('checked', true);
console.log("Clicked : " + $(this).attr('class'));
});
Fiddle : http://jsfiddle.net/pSSc9/1/

May I suggest using label elements instead of divs? You'll get the same behavior and won't need javascript at all. CSS will take care of the appearance. I made that simple change in your fiddle, and it worked fine.
http://jsfiddle.net/jeffman/WQEDv/2/

$('.A').on('click', function (e) {
if ($(e.target).is('.B')) {
e.stopPropagation();
// So that event does not bubble when radio is selected
} else {
if ($('input:radio', this).prop('checked') === true) {
console.log("returning false");
return false;
}
$('input:radio', this).prop('checked', true);
}
console.log("Clicked : " + $(e.target).attr('class'));
});
The problem with your code was you were returning false when the checkbox is clicked. So you were indirectly doing event.preventDefault() and event.stopPropagation() by doing return false;
You explicitly need to set the checked property to true only when clicked on the div. But when you click on the radio it performs the default action. So you need to stop the propagation of the event.
Check Fiddle

DEMO
e.preventDefault(); disables the radio button click event
$('input:radio').closest('div').on('click', function (e) {
$('input:radio', this).prop('checked', true);
});

The click event from the radio button is bubbling up to the div, so the callback gets triggered in both cases. The problem is that you're preventing the default action which, in the case of the radio button, is it becoming checked.
What you can do is add a condition that exits the callback if the element clicked was the radio button:
$('input:radio').closest('div').on('click', function (e) {
if ($(e.target).is('input')) {
return;
}
if ($('input:radio', this).prop('checked') === true) {
console.log("returning false");
return false;
}
$('input:radio', this).prop('checked', true);
console.log("Clicked : " + $(this).attr('class'));
});
Working example

Related

check box value Showing error

I have checkbox and disabled textbox. When checkbox is true, text box will be active and focused. when false, it become disabled. i added blur event on the text box and check box change event for certain operations.
<input type="checkbox" id="chkTest1" name="chkTest1" value="Bike"> check</br>
<input type="text" id="txtTest1" disabled />
Script
$('#chkTest1').change(function() {
var flagCheck = $(this).prop('checked');
$('#txtTest1').prop('disabled', !flagCheck).val('').off();
if(flagCheck)
{
$('#txtTest1').focus();
}
$('#txtTest1').blur(function () {
console.log($("#chkTest1").prop('checked'));
});
});
My problem is
when checkbox makes false, text box disabled and lost focus. so checkbox change event and blur event will be fired. But in blur event, check box value still be true instead of false. How to resolve this.
Here the Code Fiddle
Thanks in advance.
When the checkbox is clicked directly after filling the field then you need to wait since the blur triggers before the click that changes the checkbox.
Also be aware that the .off() will remove the blur handler from the text field after clicking!
$(function() {
$('#chkTest1').on("click", function() {
var flagCheck = this.checked;
$('#txtTest1').prop('disabled', !flagCheck).val('');
if (flagCheck) {
$('#txtTest1').focus();
}
});
$("#txtTest1").on("blur", function() {
setTimeout(function() { console.log("test check",$("#chkTest1").is(':checked')); },500);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="chkTest1" name="chkTest1" value="Bike">check</br>
<input type="text" id="txtTest1" disabled />
#Glitson George:
i explaned why i am removing
the blur event in the below fiddle. Please check jsfiddle.net/ka1mkfrv/6 .
once blur function stored in memory,
2nd time onwards blur function will excute first then change event will excute
Please check the console for this.
http://jsfiddle.net/ka1mkfrv/6/
I guess you want to keep the text box content when disabling the checkbox:
$('#chkTest1').change(function() {
var flagCheck = $(this).prop('checked');
if(flagCheck)
{
$('#txtTest1').prop('disabled', !flagCheck).val('').off();
$('#txtTest1').focus();
} else {
$('#txtTest1').prop('disabled', !flagCheck);
}
$('#txtTest1').blur(function () {
console.log($("#chkTest1").prop('checked'));
});
});
http://jsfiddle.net/ka1mkfrv/4/
Your below code will only be executed when textbox is not disabled
$('#txtTest1').blur(function () {
console.log($("#chkTest1").prop('checked'));
});
So when your textbox will be enabled at the same time your checkbox will also be enabled.
When your text-box will be disabled at the same time checkbox your checkbox will also be disabled but your above will not be not execute.
That's why you cannot print the false value of checkbox
below is the working fiddle
$(document).on("change",'#chkTest1',function() {
var flagCheck = $(this).is(':checked')
if(flagCheck){
$('#txtTest1').removeAttr('disabled').val('').off();
$('#txtTest1').focus();
}
else
{
$('#txtTest1').prop('disabled', !flagCheck).val('');
console.log($("#chkTest1").is(':checked'));
}
});
http://jsfiddle.net/ka1mkfrv/5/

How do I trigger a custom javascript event when a checkbox is selected via a jQuery script that selects all checkboxes on a page?

I'm currently working on a photography store website. Customers will be allowed to view photosets ranging from 100-500 images on a page. I want those customers to be able to click a "Select All" button (or other element) that checks all the checkboxes on the page. I am currently using jQuery to successfully accomplish this "Select All" feature after researching here on Stack Overflow.
Currently, the code that I am working with puts a checkbox on each image in the photoset. If the user clicks the checkbox, it triggers a custom event. However, I want the checkbox state of being checked (or the change from being unchecked to checked) to trigger the event, not the click. If the click triggers the event, the Select All feature I have using jQuery fails to work, since jQuery isn't "clicking" each of the checkboxes on the page, only changing the checkbox to selected. This means that the custom event doesn't load.
The code that currently works to trigger the event I need by clicking (which I do not want to do) the checkbox is:
$('.select-product').on('click', this.QuickOrder.loadProduct);
The code I am trying to develop isn't working, but it goes something like:
$('.select-product').change(function(){
var isChecked = $(this).is(':checked');
if(isChecked) {
this.QuickOrder.loadProduct;
}
});
I've used the .change() function after researching and finding that the change function registers the change in the condition of the checkbox. When this condition changes to true, I want QuickOrder.loadProduct to trigger. After that, everything should work.
Here is my jQuery "Select All" script for reference:
$(document).ready(function() {
$("#select_all").change(function(){
if(this.checked){
$(".select-product").each(function(){
this.checked=true;
})
}else{
$(".select-product").each(function(){
this.checked=false;
})
}
});
$(".select-product").click(function () {
if (!$(this).is(":checked")){
$("#select_all").prop("checked", false);
}else{
var flag = 0;
$(".select-product").each(function(){
if(!this.checked)
flag=1;
})
if(flag == 0){ $("#select_all").prop("checked", true);}
}
});
});
Any ideas on how to make this happen? Thank you!
As explained in Why isn't my checkbox change event triggered?:
The change event does not fire when you programmatically change the value of a check box.
Below I give two solutions (the first is from the aforementioned link):
1: Explicitly trigger the change event after changing the checkbox setting.
this.checked = true;
$(this).trigger('change');
2: Just programmatically delegate to the click event.
$(this).trigger('click');
Demo:
window.loadProduct = function(id) { alert('loadProduct() called on #'+id+'.'); };
// propagate select-all checkbox changes to all individual checkboxes
$("#select_all").change(function() {
if (this.checked) {
$(".select-product").each(function() {
// original code
//this.checked = true;
// solution #1: explicitly force a change event
this.checked = true;
$(this).trigger('change');
// solution #2: trigger click
//$(this).trigger('click');
});
} else {
$(".select-product").each(function() {
this.checked = false;
});
} // end if
});
// propagate individual checkbox changes back to the select-all checkbox
$(".select-product").click(function() {
if (!$(this).is(":checked")) {
$("#select_all").prop("checked", false );
} else {
var flag = 0;
$(".select-product").each(function() {
if (!this.checked)
flag = 1;
});
if (flag == 0) {
$("#select_all").prop("checked", true );
} // end if
} // end if
});
// call loadProduct() for any change of an individual checkbox
$('.select-product').change(function() {
var isChecked = $(this).is(':checked');
if (isChecked) {
loadProduct(this.id);
} // end if
});
.select_container {
margin-bottom:8px;
}
.img_container {
display:flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select_container">
<input id="select_all" type="checkbox"/>
</div>
<div class="img_container">
<div>
<div><img src="https://www.gravatar.com/avatar/4fa45261dec56004145c653832504920?s=128&d=identicon&r=PG&f=1"/></div>
<input id="check1" class="select-product" type="checkbox"/>
</div>
<div>
<div><img src="https://www.gravatar.com/avatar/fc03f6eed7d4d5e3233c5dde9f48480d?s=128&d=identicon&r=PG&f=1"/></div>
<input id="check2" class="select-product" type="checkbox"/>
</div>
<div>
<div><img src="https://www.gravatar.com/avatar/fd882c2b5e410936a4a607b2e87465d9?s=128&d=identicon&r=PG&f=1"/></div>
<input id="check3" class="select-product" type="checkbox"/>
</div>
</div>

Make div appear (or disappear) on checkbox status

I have this jQuery code:
$(document).ready(function(){
$('.checkdisplay').change(function(){
if(this.checked)
$('.todisplay').fadeIn('slow');
else
$('.todisplay').fadeOut('slow');
});
});
This works great only if I check the .checkdisplay radio button: the div appears, but after, if i uncheck .checkdisplay radio button, the div .todisplay doesn't disappear.
Where i'm wrong? :(
EDIT:
demo: http://jsfiddle.net/Mse2L/
You need to test all the radios and only show on the one with the correct class
You could have used ID too
Notice I use .on("click" since change needs a blur in some browsers
Live Demo
$(function(){
$("input[name='roomdoor']").on("click",function(){
if ($(this).hasClass("checkdisplay") && this.checked)
$('.todisplay').fadeIn('slow');
else
$('.todisplay').fadeOut('slow');
});
});
$(document).ready(function () {
$('.radio').change(function () {
if ($(this).hasClass('checkdisplay') && this.checked) $('.todisplay').fadeIn('slow');
else $('.todisplay').fadeOut('slow');
});
});
Demo
The problem is, you can't uncheck a radiobutton.
Problem is your radio button, you should use checkbox like,
Once a radio button having class checkdisplay is checked then it will be checked, how it can be unchecked
<input type='checkbox' class='checkdisplay' />
<div class='todisplay'>test</div>
Demo
Updated, try this like,
$(document).ready(function(){
$('.radio').change(function(){// add onchange on radio class
// check the radio has checkdisplay class or not
if($(this).hasClass('checkdisplay') && this.checked)
$('.todisplay').fadeIn('slow');
else
$('.todisplay').fadeOut('slow');
});
});
Working demo
$('.checkdisplay').click(function() {
if( $(this).is(':checked')) {
$(".todisplay").fadeIn('slow');
} else {
$(".todisplay").fadeOut('slow');
}
});

opposite of click function

what is the opposite function if the user unclicks a checkbox?
this is my script if the user clicks the checkbox
<script>
$(document).ready(function() {
$("input[name$='INopt']").click(function() {
$("#OUTsrvOtr").prop('class','text')
});
});
</script>
<input id="INsrv" name="INopt" type="checkbox" value="1" />1<br>
but i want this to run if the user unclicks/unchecks the checkbox
$("#OUTsrvOtr").prop('class','validate[required] text-input text')
Inside click method you can check if if checkbox is checked or unchecked
<script>
$(document).ready(function() {
$("input[name$='INopt']").click(function() {
if(this.checked){
$("#OUTsrvOtr").prop('class','text');
}
else{
$("#OUTsrvOtr").prop('class','validate[required] text-input text');
}
});
});
</script>
It's still click, only you need to check this.checked - if it's true then the box has been checked, otherwise (for unchecking it) it's false.

How to toggle the check state of a radio input element on click?

How to (un)check a radio input element on click of the element or its container?
I have tried the code below, but it does not uncheck the radio.
HTML:
<div class="is">
<label><input type="radio" name="check" class="il-radio" /> Is </label>
<img src="picture" />
</div>
jQuery:
$(".is label, .is ").click(function () {
if (!$(this).find(".il-radio").attr("checked")) {
$(this).find(".il-radio").attr("checked", "checked");
} else if ($(this).find(".il-radio").attr("checked") == "checked") {
$(this).find(".il-radio").removeAttr("checked");
}
});
You have to prevent the default behaviour. Currently, on click, the following happens:
click event fires for the container (div.is).
click event fires for the label.
Since your function toggles a state, and the event listener is called twice, the outcome is that nothing seems to happen.
Corrected code (http://jsfiddle.net/nHvsf/3/):
$(".is").click(function(event) {
var radio_selector = 'input[type="radio"]',
$radio;
// Ignore the event when the radio input is clicked.
if (!$(event.target).is(radio_selector)) {
$radio = $(this).find(radio_selector);
// Prevent the event to be triggered
// on another element, for the same click
event.stopImmediatePropagation();
// We manually check the box, so prevent default
event.preventDefault();
$radio.prop('checked', !$radio.is(':checked'));
}
});
$(".il-radio").on('change click', function(event) {
// The change event only fires when the checkbox state changes
// The click event always fires
// When the radio is already checked, this event will fire only once,
// resulting in an unchecked checkbox.
// When the radio is not checked already, this event fires twice
// so that the state does not change
this.checked = !this.checked;
});
radio buttons don't uncheck, you need to use a checkbox (type = 'checkbox')
use only html , same functionality
<label for="rdio"><input type="radio" name="rdio" id="rdio" class="il-radio" /> Is </label>

Categories