I have the code to uncheck radio button, but the problem is, its not happening in one click when the radio button is checked, I am fetching the value of radio button as checked from mysql, so the default value of radio button is checked and when I click on the radio button the value should uncheck upon single click but my code is making it happen on double click. How do I make it happen with single click?
var check;
$('input[type="radio"]').hover(function() {
check = $(this).is(':checked');
});
var checkedradio;
function docheck(thisradio) {
if (checkedradio == thisradio) {
thisradio.checked = false;
checkedradio = null;
}
else {checkedradio = thisradio;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="check" value="check" onClick="javascript:docheck(this);" checked="checked"/>
Radios by design are meant to be used in a group (https://html.spec.whatwg.org/#radio-button-state-(type=radio)) - a group of 2 or more radios should form a group to allow the user to pick a value from the selection in that group. By design the radio group behaviour is this - once a selection is made (either by the user or programatically), that choice sticks, and there is no way to undo it, other than choose another radio option from the group. You'll see in your example, that without the JavaScript bit, if you by default uncheck the radio, then check it manually, you won't be able to uncheck it again. This is how it's supposed to work.
The rule of thumb should be that solving a problem on the backend should not come at the expense of the front-end, as it negatively impacts the user-experience, and will cause problems to the user. If you for any reason HAVE TO stick with such a bad UX solution, here is a way to hack your radio to act like a checkbox, but it is seriously not advised, and you should change your backend to use checkboxes instead.
Here is the radio hack (and a native checkbox input that should be used instead):
var myRadio = $('input[type="radio"]:checked');
myRadio.on('click', function() {
if (myRadio.attr('checked')) {
myRadio.removeAttr('checked');
myRadio.prop('checked', false);
} else {
myRadio.attr('checked', 'checked');
myRadio.prop('checked', true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<b>This works, but it's bad UX, so avoid!</b><br>
<input type="radio" name="check" value="check" checked />
<hr>
<b>Use this instead!</b>
<br>
<input type="checkbox" name="real-check" value="real-check" checked />
You'll see that the jQuery selector is deliberately set to only pick the "checked" radio, so the JavaScript solution only takes over the native behaviour if the radio is checked by default. As soon as the radio is not checked by default, you'll see how the browser forces your selection once it's checked manually - this is a tell tale sign that you're trying to deviate from the expected behaviour.
You'll also see that the checkbox natively works - without the need for JavaScript or jQuery.
RobertP raised an interesting point about the user experience, or in IT-talk: "UX". In some cases it is mandatory that a single option needs to be clicked. This is exactly what radio buttons were made for. However, I have come across cases, where a "none" selection should also be offered. For these cases you could simply supply an extra radio button with the option "none" OR you could make the radio buttons "unselectable" again. This seems to go against the intended radio button behaviour. However, as it is possible to start out with no radio buttons being selected, why should it not be possible to return to this state after, maybe, the user had clicked on an item prematurely?
So, with these considerations in mind I went ahead and put together a way of doing what OP had in mind. I extended the example a little bit by including further radio button options:
$.fn.RBuncheckable=function(){ // simple jQuery plugin
const rb=this.filter('input[type=radio]'); // apply only on radio buttons ...
rb.each(function(){this.dataset.flag=$(this).is(':checked')?1:''})
.on('click',function(){
if (this.dataset.flag) $(this).prop('checked',false) // uncheck current
// mark whole group (characterised by same name) as unchecked:
else rb.filter('[name='+this.name+']').each(function(){this.dataset.flag=''});
this.dataset.flag=this.dataset.flag?'':1; // invert flag for current
});
return this;
}
$('input').RBuncheckable(); // apply it to all radio buttons on this page ...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4>Two groups of radio buttons with "uncheck" option:</h4>
<input type="text" value="This input field is unaffected">
<p>group one:</p>
<label><input type="radio" name="check" value="a" checked /> Option A</label><br>
<label><input type="radio" name="check" value="b"/> Option B</label><br>
<label><input type="radio" name="check" value="c"/> Option C</label>
<p>group two:</p>
<label><input type="radio" name="second" value="d"/> Option D</label><br>
<label><input type="radio" name="second" value="e"/> Option E</label><br>
<label><input type="radio" name="second" value="f" checked/> Option F</label>
In the .each() loop I collect the initially checked state for all selected radio buttons. I store the individual checked state in a data attribute "flag" for each radio button.
The click event handler function then picks up this data flag and decides whether to step into action by either removing the checked state from the current element or simply resetting the flag data-attributes for the whole group (characterised by having the same name as the currently clicked one). In a last operation it then inverts the flag state for the current element again. As all data attributes are stored as strings, the values 1 and "" are "truthy" and "falsy" values that can be directly tested.
This results in exactly the behaviour you were looking for. I hope ;-)
By having the functionality packaged in a little jQuery plugin it can now be applied to any jQuery object directly.
Related
In react
<input type='checkbox' checked={true} />
makes the checkbox non toggleable.
However the same in angular makes it toggleable?
<input type='checkbox' [checked]=true />
My use case is multi select dropdown with an max selection value in it. So if the selection is maxed I shouldn't let the user select an option.
Currently I've made it using disabled option something like this.
<input type="checkbox" [name]="option.label" [checked]="option.isSelected"
[disabled]="!option.isSelected && max === selected.length"
(change)="toggleSelectedItem(option.id)">
But I would like to know the reason behind such behaviour in angular?
By such behaviour I mean in react if the checked attribute is set to true it doesn't allow user to check or uncheck the item which is what is expected. Why isn't it the case with angular?
So I have this selection list with radio buttons that looks like this:
What I try to do is when 'AT' is selected I Want to be able to select 1 more option.
for example if 'AT' is checked I also want to be able to check 'Herstart'.
so this condition only needs to happen when 'AT' is selected.
this is a picture of the console on how the radio buttons are build :
I was thinking on something like if(data-status =="AT"){ allow to check one more radio button}
but here I am stuck on what to write in the if block.
this is also not my code so it's even harder to come with a solution.
anyone can point me in the right direction ?
kind regards
you can't select multiple radio buttons, to select multiple we use checkboxes, learn here the difference between checkbox and radio more
here is the working with checkbox:
$(document).ready(function() {
$('.checked').on('change', function() {
var x = $("#check3").is(':checked');
if (x) {
$('#check1').prop('checked', (x));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="checkbox" class="checked" id="check1">hertstart
<input type="checkbox" class="checked" id="check2">uti,nsa
<input type="checkbox" class="checked" id="check3">AT
Radio buttons are meant to be single choice only. If you need to have more than one option available, use checkboxes. These you can toggle active/disabled with the disabled property and javascript.
I'm using the iCheck framework and I have two inputs
<input name="group" id="id1" type="radio" checked>
<input name="group" id="id2" type="radio">
<input name="group" id="id3" type="radio">
<input name="group" id="id4" type="radio">
On click I call an ajax function. If something fail, I want to set back the checked attribute to the previously selected input.
var currentChecked = $("input[name='group']:radio:checked");
$("input[name='group']:radio").each(function() {
$(this).on('ifChecked', function(){
$.ajax({
url: "/ajax/something/"
})
.done(function (data) {
currentChecked = $(this);
})
.fail(function (data) {
$(this).removeAttr('checked');
currentChecked.prop('checked', true);
});
});
});
But this will not reset the checked checkbox. There is something I don't see from the iCheck framework? Any solution?
Actually in case of iCheck You need to update the iCheck to reflect the changes on Jquery.
You can update using iCheck('update')
$(this).iCheck('update');
After checked or unchecked the radio button using jquery.
Another Solution just check or uncheck the iCheck using his predefined function.
<input name="group" id="id1" type="radio" checked>
If the above one is your radio button you can use the code in jquery section like below
$('#id1').iCheck('uncheck'); //To uncheck the radio button
$('#id1').iCheck('check'); //To check the radio button
In this case no need to use the iCheck('update')
jQuery iCheck works bit different from the way you expect.
When you initialize a checkbox or radio button, it picks up the status/value of the control and builds the look and feel of that state. That is all. Then it never checks your control value or any update to its attributes.
So the only way to uncheck your checkbox in the Ajax failure event, is by using the functions exposed by the plugin.
You should use following in your ajax fail event to change the state back to previous
$(this).iCheck('toggle');
or you can change the html attributes and refresh the control like below
$(this).removeAttr('checked');
currentChecked.prop('checked', true);
$(this).iCheck('update'); — apply input changes, which were done outside the plugin
Below solution worked for me in iCheck v1.0.2.
You can check iCheck radio by filtering radio button group like below
Using 'id' of element
$('input:radio[name="group"]').filter('[id="id1"]').iCheck('check');
Using 'value'
$('input:radio[name="group"]').filter('[value="id1"]').iCheck('check');
you can replace 'id' or 'value' dynamically base on your requirement/functionality.
and you can change 'check' or 'uncheck' inside .iCheck('check').
//this will update all iCheck fields inside the selected form
$('#form_id :radio').iCheck('update');
I have radio buttons on a page which add or remove a css class from other elements according to their state.
The class testclass is added to the element slave by default (i.e. the HTML the page loads is:
<input type="radio" value="No" name="master" /> No
<input type="radio" value="Yes" name="master" /> Yes
<input type="text" name="a" id="slave" class="testclass" />
The following jQuery removes the class if the "No" radio is selected
$("input[name$='master']").change(function(){
if(this.value === 'No') {
$('#slave').removeClass('testclass');
} else {
$('#slave').addClass('testclass');
}
}); $("input[name$='master']").filter(':checked').change()
This works fine in terms of moving back and forward between the states once the page has loaded, but I am triggering the function on page load and it removes the class at that time, when no check radio is selected. (It's fine if "Yes" is loaded as checked).
Interestingly it is also fine if I reverse the condition such that "Yes" is required to remove the class (page loads with class still there).
I thought javascript might be equating no selection made with a value of "No" hence I tried the strict equality, but no difference.
Any ideas?
I have developed a fiddle for you to consider. Here is the link to it => http://jsfiddle.net/6c7F2/
I think the best way to answer this question is to make you understand a few things about the code you have provided here. I am going to write in comments to it.
$( document ).ready(function(){ // this function is called once your page loads
$("input[name$='master']").change(function(){
//this function is not called until you click the radio buttons.
// Be careful to note that this function is never called on page load.
// You can test it in the fiddle I created
if(this.value === 'No') {
$('#slave').removeClass('testclass');
// this alert in the fiddle is called only
// when you click the radio buttons. Not on page load
alert("It entered");
} else {
$('#slave').addClass('testclass');
}
});
$("input[name$='master']").filter(':checked').change()
});
So make sure that the things and checks you want to execute on page load should be outside the scope of $("input[name$='master']").change(function(){});
This is only triggered when you click on radio buttons and not on page load.
It is happening because you have not selected any value on page load and still you are triggering the event.
Try:
Select any checkbox by default.
<input type="radio" value="No" name="radios" checked="checked"/> No
OR
Remove this line
$("input[name$='master']").filter(':checked').change()
So visually they have the correct behavior. Only 1 radio button in a set is checked and the checkbox checks/unchecks in reaction to pressing it but it seems when checking the status of the inputs in the console that isn't the case. So I have:
<input id="addon-fixed" type="checkbox" value=True checked />
<input id="addon-type0" name="addon-type" type="radio" checked/>Addon<br>
<input id="addon-type1" name="addon-type" type="radio"/>Cutout
But regardless of what I click the behavior is always the same
$('#addon-fixed').attr('checked') // always there
$('#addon-type0').attr('checked') // always there
$('#addon-type1').attr('checked') // always undefined
Use prop() instead of attr()
$('#addon-fixed').prop('checked')
Checking or unchecking the checkbox changes the checked property, it doesn't change the element's attribute.
if you want to check whether it is checked or not:
Use this...
if($('#addon-fixed').is(':checked')){
//checked
}else {
//unchekced
}
hope this will help you...