Cannot deselect radio button? - javascript

I have been attempting to allow radio buttons to be deselected using jQuery, but I am running into issues with the prop function. When this code runs, my conditional ($(e.currentTarget).prop('checked')) always evaluates to true.
Here is a fiddle which demonstrates my issue: Jsfiddle
FYI: I am using jQuery 1.8.2, and I cannot update it because it is a legacy project with many dependencies. Also, I MUST use radio buttons per the client's request.
Javascript:
$("input[name=optionMedia]").click(function(e) {
if ($(e.currentTarget).prop('checked')) {
$(e.currentTarget).prop('checked', false);
}
});
Html:
<input class="bigSizeInput" type="radio" id="audioVideo" name="optionMedia" value="1"/>
<input class="bigSizeInput" type="radio" id="showReel" name="optionMedia" value="2" />

You can do it like this
$('input.bigSizeInput').mouseup(function() {
if ($(this).is(':checked')) {
setTimeout(function() {
$('input.bigSizeInput:checked').prop('checked', false);
}, 1)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="bigSizeInput" type="radio" id="audioVideo" name="optionMedia" value="1" />
<input class="bigSizeInput" type="radio" id="showReel" name="optionMedia" value="2" />

This is because checked is a property. If its there it is true, if its not it is not true. Hence you either should switch to a checkbox or use
$("..").removeProp('checked')

Using checkbox to check/uncheck is better than radio button. But if you want to use radio button, you need to check if radio is checked, copy it using and remove checked attribute of copied element and then insert it after target radio. At the end remove original radio.
$(document).on("mousedown", "input[name=optionMedia]", function(e) {
if (this.checked)
$(this).clone().prop('checked', false).insertAfter(this).end().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<input class="bigSizeInput" type="radio" id="audioVideo" name="optionMedia" value="1"/>
<input class="bigSizeInput" type="radio" id="showReel" name="optionMedia" value="2" />

Related

When checkbox is clicked, how to know the state of the checkboxes

EDIT:
Please read the end part of the post, I know the part that tells which are unchecked needs to be inside the block of code, the issue here is that the first part of the code is not registering the "click". So can't do anything without that.
E2: May take the suggestion of adding a onclick to the boxes, since the code for boxes is generated with JS, I would add it once and all of them will get the function call, but that feels kinda ugly
I have a set of check boxes, and when one is clicked I need to return the values of the unchecked ones.
HTML:
<div id="myCheckboxList">
<input type="checkbox" name="myList" value="1" checked>1
<input type="checkbox" name="myList" value="2" checked>2
<input type="checkbox" name="myList" value="3" checked>3
</div>
JavaScript:
$(function(){
$("input[name=myList]").on("click",function(){
console.log("triggered");
//code here to find which ones are unchecked
});
});
I have tried to also add this in the code
$boxes = $('input[name=myList]:not(:checked)');
$boxes.each(function(){
// Do stuff with for each unchecked box
});
Unfortunatly the "triggered" in not getting output to console, so unsure why it is so, and how would i get an event to happen when the checkboxes are hit
I copied your code directly to a fiddle, and it works fine. You could be missing the jquery library?
EDIT:
Just to be sure, I updated the snippet to generate the inputs, and it still works fine.
$(function() {
var html = '<input type="checkbox" name="myList" value="1" checked>1'
+'<input type="checkbox" name="myList" value="2" checked>2'
+'<input type="checkbox" name="myList" value="3" checked>3';
$("#myCheckboxList").html(html);
$("input[name=myList]").on("click", function() {
console.log("triggered");
//code here to find which ones are unchecked
$boxes = $('input[name=myList]:not(:checked)');
$boxes.each(function() {
console.log($(this).val());
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myCheckboxList">
</div>
Easiest way would be to:
let v = $(this).attr('value');
if(v === 1){ // box 1 selected
Adding this inside your 'click' handler should work.
You need to add your each script inside your click event.
$(function(){
$("input[name=myList]").on("click",function(){
$("input[name=myList]:not(:checked)").each(function() {
console.log($(this).val());
});
});
});
<div id="myCheckboxList">
<input type="checkbox" name="myList" value="1" checked>1
<input type="checkbox" name="myList" value="2" checked>2
<input type="checkbox" name="myList" value="3" checked>3
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Another solution is to add an "onclick" method in your html. This will call a javascript function whenever the checkbox is clicked. That function can contain any logic for your checkboxes.
<input type="checkbox" name="myList" value="1" checked onclick="checkboxChangeEvent();">1
Then you can implement your javascript function to return a list of unchecked boxes or find the input boxes by name and return the alert as in previous answers.
function checkboxChangeEvent(){
$boxes = $('input[name=myList]:not(:checked)');
$boxes.each(function() {
alert($(this).val());
});
}
Try like this:
$(function(){
$("input[name=myList]").on("click",function(){
var uncheck=[];
//console.log("triggered");
//code here to find which ones are unchecked
$boxes = $("input[name=myList]:not(:checked)");
$boxes.each(function(){
// Do stuff with for each unchecked box
uncheck.push($(this).attr('value'))
console.log(uncheck);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myCheckboxList">
<input type="checkbox" name="myList" value="1" checked>1
<input type="checkbox" name="myList" value="2" checked>2
<input type="checkbox" name="myList" value="3" checked>3
</div>

How to get "unchecked" event from radio input in JavaScript?

I noticed that the "change" event only fires one event when the element is checked. But does not seem to fire any event when unchecked, or do I miss something?
I would like to do something on "uncheck" but that does never trigger.
Ideally, I do not want to save the inputs in an array and on change check which one is checked or not.
Here is an example, as you can see, "do something" never get’s fired:
document.querySelector("input").addEventListener("change", function(ev) {
console.log(ev.target.checked);
if(!ev.target.checked) console.log("do something");
});
<input type="radio" name="type" checked="checked" value="guest" />
<input type="radio" name="type" value="walk_in" />
This seems so basic… maybe I overlooked something?
Thank you!
It only validate at the time of targeted element, not with other Element .Better use for Each function they validated all element change
document.querySelectorAll("input").forEach(function(a) {
a.addEventListener("change", function() {
console.log(this.checked);
console.log("checked radio value="+this.value);
if (!this.checked) console.log("do something");
})
})
<input type="radio" name="type" checked="checked" value="guest" />
<input type="radio" name="type" value="walk_in" />
Or if you need validate check and Uncheck*(like toggle)* use with type=checkbox instead of radio .
Radio button not have toggle checkbox have toggle
document.querySelector("input").addEventListener("change", function(ev) {
console.log(ev.target.checked);
if (!ev.target.checked) console.log("do something");
});
<input type="checkbox" name="type" checked="checked" value="guest" />
<input type="checkbox" name="type" value="walk_in" />

IE can't use "return false" on radio button

I use js like below to prevent click on some radio button.
It's work totally fine in Chrome.
But on IE8 It's still can't check but default value was disappear when click other radio in group.
$("body").on("change", ".readonly", function () {
return false;
});
How can i make radio readonly and also work on IE8?
<input type="radio" readonly /> does not work, but using click does partly work. If you have two radios with the same name, IE will however still uncheck the checked one regardless with this code
$("body").on("click", ".readonly", function(e) {
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input name="rad" type="radio" class="readonly" />
<input name="rad" type="radio" checked class="readonly" />
Here is a solution: https://stackoverflow.com/a/5437904/295783
$(function() {
$(':radio:not(:checked)').attr('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input name="rad" type="radio" class="readonly" />
<input name="rad" type="radio" checked class="readonly" />

Checkbox to toggle all selection

I have this javascript code
// Listen for click on toggle checkbox
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
}
});
And I have this
<form action="" method="POST">
Toggle All :
<input type="checkbox" name="select-all" id="select-all" />
then at my table I have multiple checkbox
<input type="checkbox" name="checkbox-1" id="checkbox-1" value="1"> Select
<input type="checkbox" name="checkbox-2" id="checkbox-2" value="2"> Select
<input type="checkbox" name="checkbox-3" id="checkbox-3" value="3"> Select
<input type="checkbox" name="checkbox-4" id="checkbox-4" value="4"> Select
When I click on toggle all, it does not check checkbox-1 to checkbox-4
What went wrong in my javascript code.
Thanks!! I want to actually do a function that will send all the value of checkbox1-4 by post when they are checked on form submit.
Simply do like this.
$('#select-all').click(function(event) {
$(':checkbox').prop("checked", this.checked);
});
You do not need to loop through each checkbox to check all.
Demo
Wrap the code in dom ready if your script is in head tag
$(document).ready(function() {
$('#select-all').click(function(event) {
$(':checkbox').prop("checked", this.checked);
});
});

using jquery check the corresponding checkbox

New to jquery question...
Using jQuery, depending on the radio button clicked I would like jQuery auto 'check' the corresponding checkbox.
<input type="radio" value="#ID#" name="#ID#1"
onclick="return tickSession(this);"/>
<input type="checkbox" value="#ID#" id="#ID#"
name="sessionsThatNeedBookingOnto" class="#ID#1"/>
<input type="radio" value="#ID#" name="#ID#1"
onclick="return tickSession(this);"/>
<input type="checkbox" value="#ID#" id="#ID#"
name="sessionsThatNeedBookingOnto" class="#ID#1"/>
<input type="radio" value="#ID#" name="#ID#2"
onclick="return tickSession(this);"/>
<input type="checkbox" value="#ID#" id="#ID#"
name="sessionsThatNeedBookingOnto" class="#ID#2"/>
This is what I have tried but my understanding is a little off...
<script>
function tickSession(elementHere){
alert($(elementHere).val());
$(elementHere).attr('id').attr("checked", "true");
$($(elementHere).val()).attr('checked','checked')
}
</script>
<script>
$(document).ready(function(){
$('input:radio').click(function(){
$(this).next('checkbox').attr('checked',true);
});
});
</script>
Let's rework your checkboxes/radios:
<input type="radio" value="#ID#" name="rd1" class='rd-session-control'/>
<input type="checkbox" value="#ID#" id="for-rd1"
name="sessionsThatNeedBookingOnto" class="#ID#1"/>
Now:
$(function() {
$('.rd-session-control').click(function() {
var checkbox = $('#for-' + $(this).attr('id'));
if (checkbox.is(':checked'))
checkbox.removeAttr('checked');
else
checkbox.attr('checked', 'checked');
});
});
What this does is:
Allow you to set all of the click handlers for the radios at once using a class rd-session-control.
The ID attribute for the checkboxes is sane and easily calculated relative to the radio that controls them.
Uses the :checked selector to test if the checkbox is active or not.

Categories