i need help to uncheck or check same radio button if button already checked? I have jquery function which is used to enable or disabled other radio buttons if already checked now i want to add some function that use for check or uncheck same radio button?
(function ($) {
$(document).ready(function () {
$('input:radio').click(function(){
var $inputs = $('input:radio')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
}else{
$inputs.prop('disabled',false);
}
})
});
})(jQuery);
<input type="radio" value="Test1" />Test1
<input type="radio" value="Test2" />Test2
<input type="radio" value="Test1" />Test1
<input type="radio" value="Test2" />Test2
Although it is too late to answer, it could help others
I tried this solution.
Works very well for me!
$("input[type='radio'].myClass").click(function(){
var $self = $(this);
if ($self.attr('checkstate') == 'true')
{
$self.prop('checked', false);
$self.each( function() {
$self.attr('checkstate', 'false');
})
}
else
{
$self.prop('checked', true);
$self.attr('checkstate', 'true');
$("input[type='radio'].myClass:not(:checked)").attr('checkstate', 'false');
}
})
Simply replace disabled with checked:
$input.prop("checked", false);
or for this element:
this.checked = false;
However, if you are looking for form element which can be checked and unchecked, maybe input type="checkbox" /> is what you need.
$inputs.filter(':checked').prop('checked', false);
I think you need checkbox instead of radio button to uncheck the checked :
<input class="checkDisable" type="checkbox" value="Test1" />Test1
<input class="checkDisable" type="checkbox" value="Test2" />Test2
<input class="checkDisable" type="checkbox" value="Test3" />Test3
<input class="checkDisable" type="checkbox" value="Test4" />Test4
(function ($) {
$(document).ready(function () {
$('input:checkbox.checkDisable').change(function(){
var $inputs = $('input:checkbox.checkDisable')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
}else{
$inputs.prop('disabled',false);
$(this).prop('checked',false);
}
})
});
})(jQuery);
The answer of Pablo Araya is good, but ...
$self.prop('checked', true);
is superfluous here. The radio button already has a checked state for every click.
Related
I search to open the modal #LoginModalStart, with a checkbox, but the page open this modal with every checkbox.
Can you help me ?
$('input[type="checkbox"]').on('change', function(e) {
if (e.target.checked) {
$("#LoginModalScreenplay").modal();
}
});
$('input[type="checkbox"]') targets every checkbox on your page. You probably want to target the specific checkbox. Something like this
<input type="checkbox" id="my-special-checkbox">
$('#my-special-checkbox').on('change', function(e) {
if (e.target.checked) {
$("#LoginModalScreenplay").modal();
}
});
You have to pass show to modal method:
$('#LoginModalScreenplay').modal('show')
You use this,
<input name="checkbox" type="checkbox" id="my-special-checkbox" value=1>
<input name="checkbox" type="checkbox" id="my-special-checkbox" value=2>
<input name="checkbox" type="checkbox" id="my-special-checkbox" value=3>
<script>
$(document).ready(function(){
$('input[name="checkbox"]').on('change', function(e) {
var x = $(this).val();
$("input:checkbox").prop('checked', false);
if(x==1){
$("input[value="+x+"]").prop('checked', true);
$("#LoginModalScreenplay").modal(); //or $("#LoginModalScreenplay").show();
}
});
});
</script>
On my SelectAll checkbox and click trigger should work for all input - which has on-click event on it.
trigger working on selectall, but uncheck selectall not working. its didnt uncheck all input
<input type="checkbox" id="SelectAll" />
<input class="checkBoxClass" name="pid[]" id="pid_1" value="1" onclick="javascript: total_select(1,0.35,2700.00);" type="checkbox">
<input class="checkBoxClass" name="pid[]" id="pid_2" value="2" onclick="javascript: total_select(2,0.35,2700.00);" type="checkbox">
<input class="checkBoxClass" name="pid[]" id="pid_3" value="3" onclick="javascript: total_select(3,0.35,2700.00);" type="checkbox">
Below what i have did
$(document).ready(function () {
$("#SelectAll").click(function () {
$(".checkBoxClass").attr('checked', $(this).attr('checked'));
$(".checkBoxClass").change(function(){
if (!$(this).attr("checked")){
$("#SelectAll").attr("checked",false);
}
});
});
});
Above Jquery working for select-all / UN-select all checkbox - which works if i remove below trigger
$(document).ready(function () {
$("#SelectAll").click(function(){
$(".checkBoxClass").trigger("click");
$(".checkBoxClass").attr('checked', true); // if i remove this line then selectall for checkbox don't works
});
});
but i need above jquery to trigger - total_select function
function total_select(id,carat,price){
var lenChkBox = $("input[name='pid[]']:checked").length;
if(document.getElementById("pid_"+id).checked==true) {
total_select.s++;
document.getElementById("noofs").innerHTML=total_select.s;
total_select.c +=carat;
var cs = (total_select.c).toFixed(2);
document.getElementById("carat").innerHTML=cs;
total_select.p +=price * carat;
avg_price_per = total_select.p/total_select.c;
var ca = (avg_price_per).toFixed(2);
document.getElementById("price").innerHTML="$"+ca;
} else {
total_select.s--;
document.getElementById("noofs").innerHTML=total_select.s;
total_select.c -=carat;
cs = (total_select.c).toFixed(2);
document.getElementById("carat").innerHTML=cs;
total_select.p -=price * carat;
avg_price_per = total_select.p/total_select.c;
var ca = (avg_price_per).toFixed(2);
document.getElementById("price").innerHTML="$"+ca;
}
i tried many :
$(".checkBoxClass").attr('checked', true).triggerHandler('click');
$(".checkBoxClass").prop('checked', true).triggerHandler('click');
but still not working , it do check all input on 'SelectAll' and trigger total_select function with proper result , but when i do un-select/uncheck on 'SelectAll' none of my input get un-select/uncheck
You can both solve your problem and improve code quality by using unobtrusive event handlers instead of outdated on* event attributes.
Firstly you can assign each .checkBoxClass its own change event handler, which can then read the meta data from some data attributes you place on the elements.
Then the select all logic can be simplified to check/uncheck all those elements, while triggering a change event to execute the handler. As you're using jQuery, here's an example:
$('.checkBoxClass').change(function() {
if (!this.checked)
return;
// place total_select() logic here, and read the parameters from the elements' data()
console.log($(this).data());
});
$('#SelectAll').change(function() {
$('.checkBoxClass').prop('checked', this.checked).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="SelectAll" />
<input class="checkBoxClass" name="pid[]" id="pid_1" value="1" data-a="1" data-b="0.35" data-c="2700.00" type="checkbox">A
<input class="checkBoxClass" name="pid[]" id="pid_2" value="2" data-a="2" data-b="0.35" data-c="2700.00" type="checkbox">B
<input class="checkBoxClass" name="pid[]" id="pid_3" value="3" data-a="3" data-b="0.35" data-c="2700.00" type="checkbox">C
I found answer as below, but still any one have any other best solution let me know , thanks
$(document).ready(function () {
$("#SelectAll").click(function(){
$(".checkBoxClass").trigger("click");
$(".checkBoxClass").attr('checked', true);
$(".checkBoxClass").attr('checked', $(this).attr('checked')); //add this line and working proper - hope will help someone
});
});
I know it's not an active thread but I've jost sold a similar problem and I'd like to come out with the solution :D
With this, only those checkboxes will be checked or unchecked and (thus triggered )what have different checked property from #SelectAll.
$(function () {
$('#SelectAll').click(function () {
$('.checkBoxClass').each(function () {
if ($(this).prop('checked') !== $('#SelectAll').prop('checked')) {
$(this).trigger('click');
}
});
});
});
function total_select(id,carat,price){
alert(id);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
ALL
<input type="checkbox" id="SelectAll" />
A
<input class="checkBoxClass" name="pid[]" id="pid_1" value="1" onclick="javascript: total_select(1,0.35,2700.00);" type="checkbox">
B
<input class="checkBoxClass" name="pid[]" id="pid_2" value="2" onclick="javascript: total_select(2,0.35,2700.00);" type="checkbox">
C
<input class="checkBoxClass" name="pid[]" id="pid_3" value="3" onclick="javascript: total_select(3,0.35,2700.00);" type="checkbox">
<div id="result">
</div>
So I have a group of checkboxes like this:
[x] No stuff
[ ] Stuff 1
[ ] Stuff 2
[ ] Stuff 3
When any of the stuff checkboxes are clicked, I want the "No Stuff" one automatically deselected. Also, I would like everything to be deselected if "No stuff" gets selected.
Can someone point me in the right direction? Thanks.
Give some similar ids to the stuff check boxes - like "chkStuff1", "chkStuff2", "chkStuff3"
and give one onclick function to each like - onclick = "StuffClicked(this);" - same for all.
Lets say, the No Stuff check box has an id - "chkNoStuff"
then try this code -
function StuffClicked(chkBoxObj) {
var isNoStuffChecked = true;
if($('#chkBoxObj').is(':checked')) {
$('#chkNoStuff').prop('checked', false);
}
else {
$('[id^="chkStuff"]').each(function(){
if($(this).is(':checked')) {
isNoStuffChecked = false;
break;
}
});
}
$('#chkNoStuff').prop('checked', isNoStuffChecked );
}
$('#chkNoStuff').unbind('click').bind('click', function(){
$('[id^="chkStuff"]').each(function(){
$(this).prop('checked', false);
});
});
Hope this helps
Fiddle: WORKING DEMO
<label><input type="checkbox" class="jsNoStuff" /> No Stuff</label><br />
<label><input type="checkbox" class="jsStuff" /> Stuff 1</label><br />
<label><input type="checkbox" class="jsStuff" /> Stuff 2</label><br />
<label><input type="checkbox" class="jsStuff" /> Stuff 3</label><br />
<label><input type="checkbox" class="jsStuff" /> Stuff 4</label><br />
<script type="text/javascript">
jQuery(function ($) {
var $jsNoStuff = $('.jsNoStuff');
var $jsStuff = $('.jsStuff');
var fClickStuff = function () {
$jsNoStuff.prop('checked', false);
};
var fClickNoStuff = function () {
if ($jsNoStuff.is(':checked')) {
$jsStuff.prop('checked', false);
}
};
$jsNoStuff.click(fClickNoStuff);
$jsStuff.click(fClickStuff);
});
</script>
Use This
<input type="checkbox" id="all" />
<input type="checkbox" class="a" />
<input type="checkbox" class="a" />
<input type="checkbox" class="a" />
jquery
jQuery('#all').click(function(){
var that =$(this);
jQuery('.a').each(function(v){
if (that.is(':checked')){
$(this).attr('disabled', true);
}else{
$(this).attr('disabled', false);
}
});
})
click here for see
This should do what you need:
$('input[name="noStuff"]').change(function () {
if ($(this).is(":checked")) $('input[name^="stuff"]').prop('checked', false)
})
$('input[name^="stuff"]').change(function () {
$('input[name="noStuff"]').prop('checked', !$('input[name^="stuff"]:checked').length)
});
jsFiddle example
If you give them all the same class, you can uncheck the first with ordinal 0 when any of the others are clicked.
You can also uncheck/check options by looping through the collection and setting the properties. This is the easy way to check or uncheck multiple options.
How to uncheck a group of checkboxes when another checkbox is checked
Check/Uncheck checkbox with javascript?
I have the following html code:
<input type="checkbox" id="ckbCheckAll" />
<p id="checkBoxes">
<input type="checkbox" class="checkBoxClass" id="Checkbox1" />
<br />
<input type="checkbox" class="checkBoxClass" id="Checkbox2" />
<br />
<input type="checkbox" class="checkBoxClass" id="Checkbox3" />
<br />
<input type="checkbox" class="checkBoxClass" id="Checkbox4" />
<br />
<input type="checkbox" class="checkBoxClass" id="Checkbox5" />
<br />
</p>
When user checks ckbCheckAll all checkboxes must be checked. Also I have following jquery code:
$(document).ready(function () {
$("#ckbCheckAll").click(function () {
$(".checkBoxClass").attr('checked', this.checked);
});
});
When I see my page in the browser I get the following result:
In the first click on ckbCheckAll all checkboxes were checked (which is correct). In the second click on ckbCheckAll all checkboxes were unchecked (which is correct). But in 3rd attempt nothing happened! also in 4th attempt nothing happened and so on.
Where is the problem?
Use prop
$(".checkBoxClass").prop('checked', true);
or to uncheck:
$(".checkBoxClass").prop('checked', false);
http://jsfiddle.net/sVQwA/
$("#ckbCheckAll").click(function () {
$(".checkBoxClass").prop('checked', $(this).prop('checked'));
});
Updated JSFiddle Link: http://jsfiddle.net/sVQwA/1/
Here is a simple way to do this :
Html :
<input type="checkbox" id="selectall" class="css-checkbox " name="selectall"/>Selectall<br>
<input type="checkbox" class="checkboxall" value="checkbox1"/>checkbox1<br>
<input type="checkbox" class="checkboxall" value="checkbox2"/>checkbox2<br>
<input type="checkbox" class="checkboxall" value="checkbox3"/>checkbox3<br>
jquery :
$(document).ready(function(){
$("#selectall").click(function(){
if(this.checked){
$('.checkboxall').each(function(){
$(".checkboxall").prop('checked', true);
})
}else{
$('.checkboxall').each(function(){
$(".checkboxall").prop('checked', false);
})
}
});
});
Use below code..
$('#globalCheckbox').click(function(){
if($(this).prop("checked")) {
$(".checkBox").prop("checked", true);
} else {
$(".checkBox").prop("checked", false);
}
});
$('.checkBox').click(function(){
if($(".checkBox").length == $(".checkBox:checked").length) {
//if the length is same then untick
$("#globalCheckbox").prop("checked", false);
}else {
//vise versa
$("#globalCheckbox").prop("checked", true);
}
});
Try the following simple code:
$('input[type=checkbox]').each(function() { this.checked = true; });
Source: How to reset all checkboxes using jQuery or pure JS?
use this
if (this.checked)
$(".checkBoxClass").attr('checked', "checked");
else
$(".checkBoxClass").removeAttr('checked');
also you can use prop please check http://api.jquery.com/prop/
I have seen many answers to this question and found some answer is lengthy and some answer is a little bit wrong. I have created my own code by using the above IDs and class.
$('#ckbCheckAll').click(function(){
if($(this).prop("checked")) {
$(".checkBoxClass").prop("checked", true);
} else {
$(".checkBoxClass").prop("checked", false);
}
});
$('.checkBoxClass').click(function(){
if($(".checkBoxClass").length == $(".checkBoxClass:checked").length) {
$("#ckbCheckAll").prop("checked", true);
}else {
$("#ckbCheckAll").prop("checked", false);
}
});
In the above code, where user clicks on select all checkbox and all checkbox will be selected and vice versa and second code will work when the user selects checkbox one by one then select all checkbox will be checked or unchecked according to a number of checkboxes checked.
$(document).ready(function() {
$('#ckbCheckAll').click(function() {
$('.checkBoxClass').each(function() {
$(this).attr('checked',!$(this).attr('checked'));
});
});
});
OR
$(function () {
$('#ckbCheckAll').toggle(
function() {
$('.checkBoxClass').prop('checked', true);
},
function() {
$('.checkBoxClass').prop('checked', false);
}
);
});
Try this
$(document).ready(function () {
$("#ckbCheckAll").click(function () {
$("#checkBoxes input").prop('checked', $(this).prop('checked'));
});
});
That should do it :)
$(document).ready(function(){
$('#ckbCheckAll').click(function(event) {
if($(this).is(":checked")) {
$('.checkBoxClass').each(function(){
$(this).prop("checked",true);
});
}
else{
$('.checkBoxClass').each(function(){
$(this).prop("checked",false);
});
}
});
});
Use prop() instead -
$(document).ready(function () {
$("#ckbCheckAll").click(function () {
$(".checkBoxClass").each(function(){
if($(this).prop("checked", true)) {
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
});
});
});
BUT I like #dmk's much more compact answer and +1'd it
$(document).ready(function () {
$(".class").on('click', function () {
$(".checkbox).prop('checked', true);
});
});
Let i have the following checkboxes
<input type="checkbox" name="vehicle" value="select All" id="chk_selall">Select ALL<br>
<input type="checkbox" name="vehicle" value="Bike" id="chk_byk">bike<br>
<input type="checkbox" name="vehicle" value="Car" id="chk_car">car
<input type="checkbox" name="vehicle" value="Bike" id="chk_bus">Bus<br>
<input type="checkbox" name="vehicle" value="scooty" id="chk_scooty">scooty
Here is the simple code to select all and diselect all when the selectall check box will click
<script type="text/javascript">
$(document).ready(function () {
$("#chk_selall").on("click", function () {
$("#chk_byk").prop("checked", true);
$("#chk_car").prop("checked", true);
$("#chk_bus").prop("checked", true);
$("#chk_scooty").prop("checked", true);
})
$("#chk_selall").on("click", function () {
if (!$(this).prop("checked"))
{
$("#chk_byk").prop("checked", false);
$("#chk_car").prop("checked", false);
$("#chk_bus").prop("checked", false);
$("#chk_scooty").prop("checked", false);
}
});
});
</script>
checkall is the id of allcheck box and cb-child is the name of each checkboxes that will be checked and unchecked depend on checkall click event
$("#checkall").click(function () {
if(this.checked){
$("input[name='cb-child']").each(function (i, el) {
el.setAttribute("checked", "checked");
el.checked = true;
el.parentElement.className = "checked";
});
}else{
$("input[name='cb-child']").each(function (i, el) {
el.removeAttribute("checked");
el.parentElement.className = "";
});
}
});
jQuery( function($){
// add multiple select / deselect functionality
$("#contact_select_all").click(function () {
if($("#contact_select_all").is(":checked")){
$('.noborder').prop('checked',true);
}else
$('.noborder').prop('checked',false);
});
// if all checkbox are selected, check the selectall checkbox
$(".noborder").click(function(){
if($(".noborder").length == $(".noborder:checked").length) {
$("#contact_select_all").attr("checked", "checked");
} else {
$("#contact_select_all").removeAttr("checked");
}
});
});
I know its too late, but I'm posting this for the upcoming developers.
For select all checkbox we need to check three conditions,
1. on click select all checkbox every checkbox should get selected
2. if all selected then on click select all checkbox, every checkbox should get deselected
3. if we deselect or select any of the checkbox the select all checkbox also should change.
with these three things we'll get a good result.for this you can approach this link https://qawall.in/2020/05/30/select-all-or-deselect-all-checkbox-using-jquery/
I got my solution from here, they have provided solution with examples.
<table>
<tr>
<th><input type="checkbox" id="select_all"/> Select all</th>
</tr>
<tr>
<td><input type="checkbox" class="check" value="1"/> Check 1</td>
<td><input type="checkbox" class="check" value="2"/> Check 2</td>
<td><input type="checkbox" class="check" value="3"/> Check 3</td>
<td><input type="checkbox" class="check" value="4"/> Check 4</td>
<td><input type="checkbox" class="check" value="5"/> Check 5</td>
</tr>
<script type="text/javascript">
$(document).ready(function(){
$('#select_all').on('click',function(){
if(this.checked){
$('.check').each(function(){
this.checked = true;
});
}else{
$('.check').each(function(){
this.checked = false;
});
}
});
$('.check').on('click',function(){
if($('.check:checked').length == $('.check').length){
$('#select_all').prop('checked',true);
}else{
$('#select_all').prop('checked',false);
}
});
});
hope this will help anyone ...:)
Add jquery-2.1.0.min.js file
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
Write the codes given below:
<script>
$(document).ready(function () {
$("#checkAll").change(function() {
var checked = $(this).is(':checked'); // Get Checkbox state
if (this.checked) //If true then checked all checkboxes
$(".classofyourallcheckbox").prop('checked', true);
else
$(".classofyourallcheckbox").prop('checked', false); //or uncheck all textboxes
});
});
</script>
I'm using a CMS that hides form elements behind tags, because of some system quirks I've had to set up a checkbox that controls the radio buttons so if the checkbox is ticked the "yes" radio button is selected if not the "no" is selected. I also want the radio buttons to have option "no" checked by default but I don't have control over the line of code for the radio buttons.
I found some Javascript that does a small part of this but I want to integrate it into the jQuery that displays and hides content when the box is ticked.
Here's what I have so far:
$('#checkbox1').change(function() {
$('#content1').toggle("slow");
});
The Javascript I have is this:
function ticked(){
var ischecked = document.getElementById("checkbox").checked;
var collection = document.getElementById("hideradio").getElementsByTagName('INPUT');
if(ischecked){collection[0].checked = true;}else{collection[0].checked = false;}
}
Can you please help write a version of the Javascript but integrate with my jQuery?
Thanks,
You can try this, I assume your html as like this.
<input type="checkbox" id="checkbox1" /> Check Box
<div id="content1" >
Some Content <br />
Some Content <br />
Some Content <br />
Some Content
</div>
<div id="hideradio">
<input type="radio" name="rgroup" value="yes" /> Yes
<input type="radio" name="rgroup" value="no" /> No
</div>
JQuery
$(function(){
$('#hideradio input[type=radio][value=no]').attr('checked',true);
$('#content1').hide();
});
$('#checkbox1').on('change', function() {
$('#content1').toggle("slow");
var self = this;
if(self.checked)
$('#hideradio input[type=radio][value=yes]').attr('checked',true);
else
$('#hideradio input[type=radio][value=no]').attr('checked',true);
});
A Quick DEMO
Try this code
$(function(){
$('#checkbox1').on('click' , function() {
var isChecked = $(this).is(':checked');
if(isChecked){
$('#radio1').attr('checked' , true);
$('#content1').toggle("slow");
}
else{
$('#radio1').attr('checked' , false);
}
});
});
Check [FIDDLE]
If I don't understand correctly then let me know.
I don't know your HTML code so I provide one
<form>
<input type="checkbox" name="test_ck" id="test_ck" />
<br/>
<input type="radio" name="test_radio" id="test_radio" />
</form>
<div id="content"> A content !!! </div>
and javascript jquery
$(function(){
$("#test_ck").on("change", function(){
$("#test_radio").prop("checked", $(this).is(":checked"));
$("#content").toggle("slow");
});
});
Example -> jsfiddle
UPDATED jsfiddle
http://jsfiddle.net/6wQxw/2/
jsfiddle
$(document).on('change', '#checkbox', function() { toggle(this); });
var toggle = function(obj) {
var checked = $(obj || '#checkbox').is(':checked');
$(':radio[value=no]').prop('checked', !checked);
$(':radio[value=yes]').prop('checked', checked);
$('#content').toggle(checked);
}
toggle();
This is a pure JavaScript solution, no need to use jQuery:
<body>
<label for="a">Male</label>
<input type="radio" id="a">
<br/>
<label for="b">Female</label>
<input type="radio" id="b">
<script type="text/javascript">
var nodes = document.querySelectorAll("input[type=radio]");// get elements
var arr = Array.prototype.slice.call(nodes); // convert nodes to array for use in forEach
arr.forEach(function(obj){
obj.addEventListener("change",function(e){
arr.forEach(function(obj){
obj.checked = false;//make other radio false
});
this.checked = true;// make this radio ture
});
});
</script>
</body>