If my radio button previously checked and i try to uncheck with second click i have to click once more. So it means if my radio button previously checked i got to clicked 2 times for unchecked but it should works with only 1 click . How can i fix it. Here is 2 codes they both have the same issue. I show both scripts here .Thanks For Helping!
$(function(){
$('input[name="rad"]').click(function(){
var $radio = $(this);
// if this was previously checked
if ($radio.data('waschecked') == true)
{
$radio.prop('checked', false);
$radio.data('waschecked', false);
}
else
$radio.data('waschecked', true);
// remove was checked from other radios
$radio.siblings('input[type="radio"]').data('waschecked', false);
});
});
$("input:radio").on("click", function (e) {
var inp = $(this);
if (inp.is(".clicked")) {
inp.prop("checked", false).removeClass("clicked");
} else {
$("input:radio[name='" + inp.prop("name") + "'].clicked").removeClass("clicked");
inp.addClass("clicked");
}
});
<input type="radio" name="rad" id="Radio0" checked="checked"/>
<input type="radio" name="rad" id="Radio1" />
<input type="radio" name="rad" id="Radio2" />
<input type="radio" name="rad" id="Radio4" />
<input type="radio" name="rad" id="Radio3" />
and here is my html and jsfiddle
http://jsfiddle.net/fbyg1htz/
http://jsfiddle.net/7g684219/
The input element which is selected by default (checked="checked") should have the waschecked data attribute set to true because it's already checked.
<input type="radio" name="rad" id="Radio0" data-waschecked="true" checked="checked"/>
And the same for the second example. You should add class="clicked" to the element that is initially checked.
<input type="radio" name="rad" id="Radio0" class="clicked" checked="checked"/>
Updated fiddles:
http://jsfiddle.net/6fqLexbr/
http://jsfiddle.net/rmuh1sz3/
Example with razor for your first script:
<input type="radio" id="status_active" value="true" asp-for="ActiveOrPassive"
data-waschecked="#Model.OrderFilter.ActiveOrPassive.ToString().ToLower()" />
and for your second script:
<input type="radio" id="status_active" value="true" asp-for="ActiveOrPassive"
class="#(Model.OrderFilter.ActiveOrPassive ? "clicked" : null)" />
Related
I'm using 2 groups of radio buttons lets call it 1.1 1.2 and 2.1 2.1 (one radio button of the second group is always checked, depending on which one of the first group is checked, the other one is hidden).
I can't understand why I need to make a double click on the radio button to uncheck it when both radio buttons are checked. I want to click just one time to "uncheck" it.
function show() {
swich();
}
function swich() {
$('input[type="radio"]').change(function(){
$('[data-group="' + $(this).data('group') + '"]').prop('checked', this.checked);
});
}
var checkedradio = false;
var radioState = [];
$("input[type=radio]").on('click', function(e) {
if (radioState[this.name] === this) {
this.checked = false;
radioState[this.name] = null;
} else {
radioState[this.name] = this;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input data-group="A" id="radio1" required type="radio" value="Yes" name="group1">
<input data-group="B" id="radio2" required type="radio" value="No" name="group1">
<div id="someId1">
<input data-group="A" id="radio3" type="radio" name="group2" value="Yes" onclick="show()">
</div>
<div id="someId2">
<input data-group="B" id="radio4" type="radio" name="group2" value="No" onclick="show()">
</div>
CAVEAT
We do not recommend you take this approach as it breaks the standard UX for radio buttons.
Your issue is because you re-use checkedradio for both checks.
So:
click group A.1 - sets checkedradio = A.1
click group A.1 again, works ok and unchecks
click group A.1 - sets checkedradio = A.1
click group B.1 - sets checkedradio = B.1
click group A.1 (checked) - it's not A.1, so doesn't appear to work, set checkedradio = A.1
click group A.1 2nd time, works ok
You need a different variable for each group.
As multiple variables become very messy very quickly (and lots of DRY), you can use an array:
var radioState = [];
$(":radio").on('click', function(e) {
//console.log(radioState[this.name])
if (radioState[this.name] === this) {
this.checked = false;
radioState[this.name] = null;
} else {
radioState[this.name] = this;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input required type="radio" value="Yes" name="group1">
<input required type="radio" value="No" name="group1">
<hr/>
<input type="radio" name="group2" value="Yes">
<input type="radio" name="group2" value="No">
Code based on this answer expanded to use an array.
I was able to achieve the desired result based on this code.
function show() {
swich();
}
function swich() {
$('input[type="radio"]').change(function(){
$('[data-group="' + $(this).data('group') + '"]').prop('checked', this.checked);
});
}
function toggleRadio(event)
{
if(event.target.type === 'radio' && event.target.checked === true)
{
setTimeout(()=>{ event.target.checked = false; },0);
}
}
document.addEventListener('mouseup', toggleRadio);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input data-group="A" id="radio1" required type="radio" value="Yes" name="group1">
<input data-group="B" id="radio2" required type="radio" value="No" name="group1">
<div id="someId1">
<input data-group="A" id="radio3" type="radio" name="group2" value="Yes" onclick="show(this)">
</div>
<div id="someId2">
<input data-group="B" id="radio4" type="radio" name="group2" value="No" onclick="show(this)">
</div>
I have radio button. I want that onClick on the radio button It will return false. What that happend is that the radio that i change is not checked and it is good . but the other radio button that was checked before. is not checked too.
here the code:
function disableClick(e) {
e.preventDefault();
return false;
}
<input id="fmale" type="radio" name="gender" value="1" checked="checked" onclick="return disableClick(event);">
<input id="male" type="radio" name="gender" value="2" onclick="return disableClick(event);">
'e.preventDefault()' and 'return false' are preventing next radio button to getting checked.
addEventListener can help you
function disableClick(e) {
e.target.checked = false; // clear current radio button
e.preventDefault();
return false;
}
document.getElementById("fmale").addEventListener("click",disableClick)
document.getElementById("male").addEventListener("click",disableClick)
<input id="fmale" type="radio" name="gender" value="1" checked="checked" />
<input id="male" type="radio" name="gender" value="2">
e.preventDefault does not prevent the radio button's attribute checked from being set to true. You can console.log(e.target.checked) to see it's set true, even though e.preventDefault() prevents it from visually showing as checked.
The below demo allows the other radio button to automatically be set to checked = false, but then sets the currently clicked on radio to false as well.
I'm not sure why you want to do this, but here you go
Solution
$('#fmale').click(function(e) {
e.target.checked = false;
});
$('#male').click(function(e) {
e.target.checked = false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="fmale" type="radio" name="gender" value="1" checked="checked">
<input id="male" type="radio" name="gender" value="2">
I Need to create two forms with radio buttons as following bellow and then, when change checked, I need to change automatically in the second form (jquery or javacript):
<form id="form-a" name="form-a">
<input type="radio" name="name-a" id="id-a" value="Yes" checked="checked" />
<input type="radio" name="name-b" id="id-b" value="No" />
</form>
<form id="form-b" name="form-b">
<input type="radio" name="name-c" id="id-c" value="Yes" checked="checked" />
<input type="radio" name="name-d" id="id-d" value="No" />
</form>
Just change the name attribute values on the radio buttons to group them and then just add an event listener to listen for changes.
Here is an example.
var radioBtns = document.querySelectorAll("input[type=radio]");
function radioChangeHndl(evt) {
radioBtns.forEach(function(radioBtn) {
radioBtn.checked = '';
if(radioBtn.value === this.value) {
radioBtn.checked = 'true'
}
}.bind(this))
}
radioBtns.forEach(function(radioBtn) {
radioBtn.addEventListener('change', radioChangeHndl);
});
<form id="form-a" name="form-a">
<input type="radio" name="name-a" id="id-a" value="Yes" checked="checked" />
<input type="radio" name="name-b" id="id-b" value="No" />
</form>
<form id="form-b" name="form-b">
<input type="radio" name="name-c" id="id-c" value="Yes" checked="checked" />
<input type="radio" name="name-d" id="id-d" value="No" />
</form>
EDIT: Changed the HTML and JS. Know you just have to add the classes to the Radiobuttons. Tsted with Firefox, Chrome and IE 11. Maybe its not working because jquery is not loaded? If you Add jquery in the Javascript-Part, its working.
My solution is working in both ways. Click on form-a and form-b
HTML:
I changed the button names for grouping. JQuery selector is the classname i added.
<body onload="bodyLoad()">
<form id="form-a" name="form-a">
<input type="radio" class="radioA" name="name-a" id="id-a" value="Yes" checked="checked" />
<input type="radio" class="radioB" name="name-b" id="id-b" value="No" />
</form>
<form id="form-b" name="form-b">
<input type="radio" class="radioA" name="name-c" id="id-c" value="Yes" checked="checked" />
<input type="radio" class="radioB" name="name-d" id="id-d" value="No" />
</form>
JS:
I decided to use click event.
function bodyLoad () {
$("input:radio").click(function() {
var myClass = $(this).attr("class");
$("input:radio").prop('checked',false);
$("." + myClass).prop('checked',true);
});}
I have 2 groups of radio buttons. When a button in on group is clicked any button in the other group should be unchecked, and vice versa.
I tried below which works only once.
The smartest way I thought would be click(). But I can't get my head around it. Any suggestions?
function uncheckRadioBtnSet(){
if ($('[name="a"]').is(':checked')){
$('input[name="b"]').removeAttr('checked');
$(this).off('click');
}else{
$('input[name="a"]').removeAttr('checked');
$(this).off('click');
}
}
$("input[name='a']").click(function(){
uncheckRadioBtnSet();
});
$("input[name='b']").click(function(){
uncheckRadioBtnSet();
});
<input type="radio" name="a" value="1"><br>
<input type="radio" name="a" value="2"><br>
<input type="radio" name="a" value="3"><br>
<h6> separator </h6>
<input type="radio" name="b" value="4"><br>
<input type="radio" name="b" value="5"><br>
<input type="radio" name="b" value="6"><br>
Try this nanocode :)
$("input[name='a'], input[name='b']").click(function(){
$('input[name="'+{b: 'a',a: 'b'}[this.name]+'"]').prop("checked", false);
});
Plunker
Updated code according to new requirements
$("input[name='item_meta[313]'], input[name='item_meta[314]']").click(function(){
$('input[name="'+{'item_meta[313]' : 'item_meta[314]', 'item_meta[314]' : 'item_meta[313]'}[this.name]+'"]').prop("checked", false);
});
However, for the sake of readability, you can also write this code as:
var obj = {
'item_meta[313]' : 'item_meta[314]',
'item_meta[314]' : 'item_meta[313]'
}
$("input[name='item_meta[313]'], input[name='item_meta[314]']").click(function(){
$('input[name="'+obj[this.name]+'"]').prop("checked", false);
});
See this updated Plunker
You can use this:
$("input[name='a']").click(function(){
$('input[name="b"]').prop("checked", false);
});
$("input[name='b']").click(function(){
$('input[name="a"]').prop("checked", false);
});
Demo: https://jsfiddle.net/iRbouh/xn61vs1q/
it will be ok if we use same name for all radio buttons
<input type="radio" name="a" value="1"><br>
<input type="radio" name="a" value="2"><br>
<input type="radio" name="a" value="3"><br>
<h6>
separator
</h6>
<input type="radio" name="a" value="4"><br>
<input type="radio" name="a" value="5"><br>
<input type="radio" name="a" value="6"><br>
Hello I am trying to make a javascrip validate option depending on previouse choice.
Here is my form code:
<li><label for="age1">Question One ?</label>
<input type="radio" name="tienes_negocio" value="Yes" class="aboveage1" /> Si
<input type="radio" name="tienes_negocio" value="No" class="aboveage1" /> No</li></ol>
<ol id="parent1" class="formset2">
<li><label for="age2">Question Two ?</label>
<input type="radio" name="labora_negocio" value="Yes" required="true" class="aboveage2" /> Si
<input type="radio" name="labora_negocio" value="No" required="true" class="aboveage2" /> No</li>
Basicaly if you choose No frm the first selections I would like to pass the required attribute inside the selecond selection,
here is the JavaScript code:
$(document).ready(function(){
$("#parent1").css("display","none");
$(".aboveage1").click(function(){
if ($('input[name=tienes_negocio]:checked').val() == "No" ) {
$("#parent1").slideDown("fast"); //Slide Down Effect
$('input[name="labora_negocio"]').prop('required', true);
} else {
$("#parent1").slideUp("fast");
$('input[name="labora_negocio"]').prop('required', false); //Slide Up Effect
}
});
});
this is the code which I am using for passing the requred attribute: $('#labora_negocio').attr('required');
The problem is that when you choose No it is not passing anything.
You have two elements with the same id, in html this is a no no. Also when setting live element states you should set the element property rather than its (html) attribute.
You can select the radio button via their names and set their properties via prop.
<li><label for="age2">Question Two ?</label>
<input type="radio" name="labora_negocio" value="Yes" id="labora_negocio1" class="aboveage2" /> Si
<input type="radio" name="labora_negocio" value="No" id="labora_negocio2" class="aboveage2" /> No</li>
$(".aboveage1").click(function(){
if ($('input[name=tienes_negocio]:checked').val() == "No" ) {
$('[name="labora_negocio"]').prop('required', true);
$("#parent1").slideDown("fast"); //Slide Down Effect
} else {
$('[name="labora_negocio"]').prop('required', false); // not sure about this
$("#parent1").slideUp("fast"); //Slide Up Effect
}
});