I am looking for a way to uncheck a radio button after clicking on it again.
For example, when i click for the first time it gets checked, but I want that after clicking on it again, it gets unchecked
I tried the following How to reset/uncheck radio button onclick event?
But it does not work
Can someone help me out? thanks
<input id="button1" type="radio" name="optradio"></input>
<script>
window.onload=function(){
toggle0=1;
btn0=document.getElementById("button1");
btn0.addEventListener("click", function(e){
if(toggle0==0){
toggle0=1
btn0.checked=false;
}else{
toggle0=0;
btn0.checked=true;
}
});
}
</script>
Related
I have a set of yes/no radio buttons. I would like a modal window to open when the user clicks an unchecked 'no' radio button only if the yes radio button IS already checked. There is a state where none of the buttons will be checked and in this case I don't want the modal to appear.
My problem is I am showing this modal in a click event on the 'no' button. I have no way to tell if 'yes' was previously checked, since in this scope, we know 'no' is checked because we're inside of the click event for it. Any suggestions?
<span class="yesRadioButton" data-questionnumber="1">
<input id="MHQPreQuestion1_rbQuestAnswerYes" name="YesNo" type="radio"value="Yes" checked="checked">
</span>
<span class="noRadioButton" data-questionnumber="1">
<input id="MHQPreQuestion1_rbQuestAnswerNo" name="YesNo" type="radio"value="No">
</span>
$('.noRadioButton > input:radio:not(:checked)').click(function () {
DialogOpen();
});
You can set an attribute on the "yes" input when you click it, so you know if it has been previously set. Then you can grab the first input through jQuery and check its value before deciding whether you want to have the popup appear inside of the "no" click handler:
$('.noRadioButton > input').click(function() {
var yesButton = $('.yesRadioButton > input');
var yesValue = yesButton.attr('wasChecked');
if (yesValue === "true") {
//do your popup
}
yesButton.attr('wasChecked', false);
});
$('.yesRadioButton > input').click(function() {
$(this).attr('wasChecked', true);
});
Example here
edit: updated to work with radio buttons, i was thinking check boxes
I want to make below code works for Check box with collapse button.
<label>
<input type="checkbox" id="postageyes" name="postage1" value="Yes" />Yes</label>
<div id="conditional1">
<p>This should only show when the 'Yes' checkbox <input> element is checked.</p>
close
</div>
Javascript
var conditionalContent1 = $('#conditional1'),
group = $('input[type=checkbox][name=postage1]');
group.change(function() {
conditionalContent1.toggle(group.filter(':checked').val() === 'Yes');
}).change();
when i checked check box new div open, I want to get done is. when i click close link, the open div close and unchecked the checked box.How to do this.
anyone can help?
You can use change event on checkbox. And toggle to hide/show div.
$('#postageyes').on('change', function() {
$('#conditional1').toggle($(this).is(':checked'));
});
$('#conditional1').on('click', 'a', function() {
$('#postageyes').prop('checked', false);
$('#conditional1').hide();
return false;
});
Demo: http://jsfiddle.net/tusharj/n7044syx/1/
You can use the toggle function and click event to achieve what you have mentioned.
$('#postageyes').click(function() {
$('#conditional1').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label>
<input type="checkbox" id="postageyes" name="postage1" value="Yes" />Yes</label>
<div id="conditional1" style="display:none">
<p>This should only show when the 'Yes' checkbox <input> element is checked.</p>
close
</div>
EDIT: Tushar updated his answer while I was writing this so... yeah, never mind! That would also work. The point still stands, though.
I think part of the problem is that you're trying to use an anchor tag inappropriately. Leaving the href blank will reload the page, so Tushar's answer looks right but doesn't actually do what you're asking. Use a button (and style it appropriately if you still want it to look like a link) and then handle its click event to toggle the checkbox and hide the content.
I've modified Tushar's jsfiddle to show what I mean. You'll probably be able to make it more streamlined than this, but the simple version is:
Replace the a tag with:
<button id="closeButton">close</button>
Then add the following to the js:
$('#closeButton').on('click', function () {
$('#postageyes').click();
});
https://jsfiddle.net/pnq8zu0L/
Hi I have numbers of check boxes and below that I have a Button, which will filter data as per check box selection..
When I will click on filter button it will transfer to other page and when I click on back button the checkbox reamains checked.
but I want that when I click on back button then checkbox should be uncheck.
Any help.
For those who have similar issues, add autocomplete="off" to checkbox might help.
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
You can reset the checkboxes on page load using jQuery
$('input:checkbox').prop('checked', false);
Demo (Checkbox will be never checked as onload am getting rid of checked property)
ondomready (Place the below code anywhere in your document)
$(document).ready(function(){
$('input:checkbox').prop('checked', false);
});
You may use below code :
window.onbeforeunload = function() {
//unchecked your check box here.
$("input[type='checkbox']").prop('checked', false)
};
Try this when back button is clicked
Use Jquery to clear the checkboxes
$("input[type='checkbox']").each( function() {
$(this).removeAttr('checked');
});
I have a checkbox that I do not want the user to have direct access to. I want them to accept some terms. To do this I want them to be able to click on a disabled checkbox which opens this mini popup (not checking the box) that contains the terms so the reader can read them and accept them. Once they accept them the popup will close and the checkbox will be checked. The issue I have is i cant figure out to run a function onclick of the disabled checkbox.
Handling the click on a disabled element is indeed tricky ... but I don't think it's the desirable user experience anyway. If a checkbox is disabled, some users will see that and be disinclined to even attempt clicking it. Instead, consider intercepting the click event and using it for your own purposes using preventDefault.
<input type='checkbox' id="cb" name="cb" />
$(document).ready(function() {
$("#cb").click(function(e) {
// cancel click event so that checkbox remains unchecked
e.preventDefault();
// display popup here, then manually check the checkbox if needed
}
});
$('#chk').click(function () {
if (confirm('Accept')) {
$(this).attr('checked', 'checked');
}
else {
$(this).attr('checked', false); }
});
A disabled checkbox might not handle click events properly and would be displayed as "disabled".
But, you could try this:
add an attribute to the checkbox to store if the popup was displayed (e.g. data-popup="0")
handle the onclick event on the checkbox
if the popup was displayed (data-popup="1" ) simply return true to allow to use to check it
if the popup was not displayed (data-popup="0" ), then prevent the default behaviour, set data-popup="1" and display the popup with the terms and conditions
Another improvement, depending on the design of your popup, could be the add a new checkbox in that popup and when the user reads the terms and conditions, he can accept the terms and conditions directly from the popup. If you do that, you need to treat the click event on the checkbox in the popup and automatically check the checkbox on your page as well.
#dbaseman
Here is my code.
Take a look.Here,I get the alert on div but not on checkbox.
<html>
<head>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#checkbox, #hello").click(function(){
alert("hello");
});
});
</script>
</head>
<body>
<div id="checkbox">
<p> hello</p>
<input type="checkbox" id="hello" disabled="disabled" />
</div>
</body>
</html>
I want to re-enable a disabled onclick. I am using:
$('#id_'+id).prop("onclick", null);
to disable the onclick, but when clicking once again on the button I want to re-enable the onclick again. How do I do that?
Like others said use
$(id).off('click')
in Another way
your Question is not proper,
From your question i get so,
<input type="Button" id="test" >
<script>
$('#test').on('click',function(){
if($(this).attr('class') == '_enable'){
alert(' its working');
}
$(this).addClass('_enable');
});
</script>
first time it won't get the alert from next on wards u ll get the Alert!!!!
if want to disable again then remove that _enable class!!!!