I need to have 2 checkbox work as radiobutton, but I can't use radiobutton cause I want to make uncheck available
<script type="text/javascript">
$(document).ready(function() {
$(".gps-garmin").click(function() {
selectedBox = this.id;
$(".gps-garmin").each(function() {
if ( this.id == selectedBox )
{
this.checked = true;
}
else
{
this.checked = false;
};
});
});
});
<td><input type="checkbox" id="garmin" value="garmin" class="gps-garmin"></td>
<td><input type="checkbox" id="gps" value="gps" class="gps-garmin"></td>
Actually my checkbox are working exactly like radio button, I found this code here, but I need to make uncheck possible
Try this:
$(".gps-garmin").click(function() {
var check = $(this).prop('checked');
$(".gps-garmin").prop('checked',false);
$(this).prop('checked', (check) ? true : false);
});
As mentioned in How-to-uncheck-a-radiobutton, you should be able to clear a radio-button by using plain js or jQuery
For example in case of using plain js (copied from the linked answer):
this.checked = false;
Is this You trying:
$(".gps-garmin").click(function() {
if($(this).prop("checked") == true){
$(".gps-garmin").prop('checked',false);
$(this).prop('checked',true);
}
else if($(this).prop("checked") == false){
$(".gps-garmin").prop('checked',false);
}
});
Related
I want to uncheck a checkbox using javascript. I have one button which just unchecks the box and works fine:
function clear() {
document.getElementById("check").checked = "";
}
I have another button that I want to check the box if not checked and uncheck if it is. Below doesn't uncheck the box. I can can switch the if statement and does works the opposite way. What's the problem?
function switchIt() {
if (document.getElementById("check").checked !== "checked") {
document.getElementById("check").checked = "checked";
} else {
document.getElementById("check").checked = "";
}
Thanks!
switch is a reserved word, use another one
function switchIt() {
var box = document.getElementById("check");
if (box.checked) {
box.checked = false;
} else {
box.checked = true;
}
}
setInterval(switchIt, 1000);
<input type="checkbox" id="check" />
Treat "checked" as a boolean, not as a string.
You can just invert it, as in
element = document.getElementById("check")
element.checked = !element.checked
A more featured example:
var $toggle = document.getElementById('toggle');
var $checkbox = document.getElementById('checkbox');
var toggle_checkbox = function() {
$checkbox.checked = !checkbox.checked;
}
$toggle.addEventListener('click',toggle_checkbox);
<label>
Checkbox:
<input id="checkbox" type="checkbox" checked />
</label>
<button id="toggle">Toggle</button>
You need a boolean to do that.
Take a look at this pen:
https://codepen.io/anon/pen/jJyXgO
let checkbox = document.querySelectorAll('#check')[0]
setInterval(function() {
checkbox.checked = !checkbox.checked
}, 1000)
I've never seen it done with a string "checked" before. Try with a boolean like:
function change() {
if (document.getElementById("check").checked !== true) {
document.getElementById("check").checked = true;
} else {
document.getElementById("check").checked = false;
}
}
or easier
function change() {
document.getElementById("check").checked = !document.getElementById("check").checked
}
Don't forget, switch is reserved, so use a different name, as I did with change()
I'm a librarian working on improving my library's main search feature. I am trying to get a checkbox labeled "Everything" to check automatically if users deselect all of the other options ("books," "articles," "music," "videos".)
Here's the relevant javascript:
$(document).ready(function() {
var $others = $('input[class="checkoption"]').not('#everythingbox')
$others.change(function() {
if (this.checked==false) {
$('#everythingbox').prop('checked', true)
}
});
});
I almost have it working, but there's a problem: if I select two or more choices and deselect one, "Everything" checks automatically, but I only want it to check automatically if none of the others are checked.
Here is the full fiddle: https://jsfiddle.net/kr0syfn3/11/
I've edited your fiddle. You basically need to check all the other check boxes when a change happens and update the everything box accordingly.
Here's the updated fiddle jsfiddle.net/john_lay/kr0syfn3/12/
Apologies in advance for commenting out some of your code, but there was a lot of repetition. Finally you should add your change events inside the $(document).ready(function() {}); handler.
You are going to need to inspect all checkboxes each time any one of them is clicked. Right now, you are just inspecting the one single one that is clicked. To inspect all of them, you will need to use a loop (I'm using the each function in my sample below), and you might have to change your logic just a bit because you are now inspecting all items:
$(document).ready(function() {
var $others = $('input[class="checkoption"]').not('#everythingbox');
$others.change(function() {
var othersToCheck = $('input[class="checkoption"]').not('#everythingbox');
var anyChecked = false;
$.each(othersToCheck, function(index) {
if ($(this).checked) {
anyChecked=true;
}
});
$('#everythingbox').prop('checked', !anyChecked)
});
});
You could try selecting all the checkboxes that are selected and then comparing the lists, to see if all checkboxes have been selected? E.g.
var $others = $('input[class="checkoption"]').not('#everythingbox')
$others.change(function() {
var $checked = $('input[class="checkoption"]:checked').not('#everythingbox')
if ($checked.length != $others.length) { //not all the boxes are checked
$('#everythingbox').prop('checked', true)
}
}
Hope this helps!
The most concise answer to this would be to leverage the power of jQuery's built in selectors, like so:
You will also want to handle if the user selects the everything checkbox manually by clearing the rest of the selected checkboxes.
$(document).ready(function() {
var $inputs = $('input.checkoption');
$inputs.on("change", function() {
if ($(this).attr("id") !== "everythingbox") {
$('#everythingbox').prop('checked', !$('input.checkoption:not(#everythingbox):checked').length)
} else {
$inputs.not("#everythingbox").prop("checked", false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1<input type="checkbox" class="checkoption" /> 2
<input type="checkbox" class="checkoption" /> 3
<input type="checkbox" class="checkoption" /> 4
<input type="checkbox" class="checkoption" /> everything
<input type="checkbox" class="checkoption" id="everythingbox" checked/>
var $others = $('input[class="checkoption"]').not('#everythingbox')
console.log($others)
$('#everythingbox').change(function () {
if (this.checked) {
$others.prop('checked', false)
$('#everythingbox').attr('disabled', true);
}
});
$others.change(function () {
var check = false;
var l = $others.length;
for (var i = 0; i < l; i++) {
if ($others[i].checked) {
check = true;
}
}
if (check) {
$('#everythingbox').attr('disabled', false);
$('#everythingbox').prop('checked', false);
} else {
$('#everythingbox').attr('disabled', true);
$('#everythingbox').prop('checked', true);
}
})
var music1 = $("input[id='musiccheck']");
var music2 = $("input[id='musicscores']");
music1.on('change', function () {
music2.prop('checked', this.checked);
});
music1.on('change', function () {
music2.prop('unchecked', this.unchecked);
});
$(document).ready(function () {
});
<script type="text/javascript">
$(document).ready(function(){
$("input[name='trim']").click(function (event) {
if ($(this).val() == "deluxe") {
$("input[name='option']").attr("checked", true);
} else if ($(this).val() == "plain") {
$("input[name='option']").attr("checked", false);
}
});
$("input[name='option']").click(function(event){
$("#custom").attr("checked","checked");
});
});
</script>
This is radio and click button problem. First I click deluxe button, check button works fine. Then I click plain button it works fine too. Then I re-click deluxe button, check button won't working. Then I try to test out custom button. It not working either after I click plain button. Does anyone know whats going on? By the way plain works fine from beginning.
You should use jQuery prop() instead of attr(). attr() is buggy.
Use the following code which is a great jQuery extension. It will accept 1,0,'1','0',true,false, and unidentified. To see in action see my fiddle I posted your usage as well.
(function( $ ) {
$.fn.checked = function(value) {
if(value === true || value === false) {
// Set the value of the checkbox
$(this).each(function(){ this.checked = value; });
} else if(value === undefined || value === 'toggle') {
// Toggle the checkbox
$(this).each(function(){ this.checked = !this.checked; });
} else if(value === 1 || value === '1') {
$(this).each(function(){ this.checked = true; });
} else if(value === 0 || value === '0') {
$(this).each(function(){ this.checked = false; });
}
return this;
};
})( jQuery );
Your usage would be like so:
$("input[name='trim']").click(function (event) {
if ($(this).val() == "deluxe") {
$("input[name='option']").checked(1);
} else if ($(this).val() == "plain") {
$("input[name='option']").checked(0);
}
});
$("input[name='option']").click(function(event){
$("#custom").checked(1);
});
I'm using ASP.NET MVC 4 to develop a web app. I have a page which contains a submit button which should be enabled only if one of my two checkboxes (or both of them) is (are) enabled. The thing is, I'm trying to add an "or" operator in the following script but it does not give me what I want. So, here's my script :
The jQuery sample
And this is the part I'd like to improve :
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
the_terms.click(function() {
if ($(this).is(":checked")){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
});
And I can't find a way to tell my document "Okay, if one of these 2 checkboxes (or both of them) is (are) checked, we can press on the button. If not, don't allow it".
Any idea guys?
It can be done with:
Fiddle
$('.checkbox').change(function(){
$('#submitBtn').prop('disabled', !$('.checkbox:checked').length > 0)
});
Note:
This find the checkboxes by class name checkbox so it will work with two checkboxes, whereas your original code is looking at a single checkbox via its ID.
Use the change event not click.
Simply use
$(".checkbox").click(function() {
$("#submitBtn").prop("disabled", !$('.checkbox:checked').length);
});
DEMO
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
$('.checkbox').change(function(){
$("#submitBtn").prop("disabled", !(the_terms.is(":checked") || the_terms2.is(":checked")));
});
});
// Make a function to be called on onload or on click
function checkTerm() {
jQuery('input[type="submit"]').attr('disabled',!jQuery('input.term:checked').length > 0 ) ;
}
// Call the function on load
$(document).ready(checkTerm) ;
// And call it on check change
jQuery(document).on('change','input.term',checkTerm) ;
Try below modified script , please check if it works as you want.
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
if(the_terms.is(":checked") || the_terms2.is(":checked"))
{
$("#submitBtn").removeAttr("disabled");
}
else
{
$("#submitBtn").attr("disabled", "disabled");
}
the_terms.click(function() {
if ($(this).is(":checked") || the_terms2.is(":checked")){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
the_terms2.click(function() {
if ($(this).is(":checked") || the_terms.is(":checked") ){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
});
I'm following a tutorial where you make a checkbox that enables a disabled button and when you uncheck the box, the button becomes disabled again. The problem is that when I uncheck the box, it seems like the checkbox still in an "on" state because the button is not disabled. The code works in Chrome but not in Firefox 3.6.
Here is my code:
<p><input type="checkbox" id="agree" >I agree</p>
<input id="continue" type="button" value="continue" disabled='true'>
<script>
$('#agree').change(function(){
var state = $(this).attr('value');
if(state == 'on'){
$('#continue').removeAttr('disabled');
}else if(state == ''){
$('#continue').attr('disabled', 'false');
}
});
</script>
a checkbox's check value doesn't change with .val() you should be using .is('checked') like so:
$('#agree').change(function() {
var state = $(this).is(':checked'); //state = true/false depending on state
if (state) { //if true
$('#continue').removeAttr('disabled'); //remove disabled
} else { //else (false)
$('#continue').attr('disabled', 'disabled'); //add disabled (you shouldn't set it to 'false' as it WILL be disabled and it'll confuse you.
}
});
Here's an Example to see my points.
Try :
$(function() {
$('#agree').click(function() {
if ($(this).is(':checked')) $('#continue').attr('disabled', false);
else $('#continue').attr('disabled', true);
});
});
LINK : http://jsfiddle.net/Mmm4h/
Try this:
$('#agree').change(function() {
if($("#agree").is(":checked"))
$('#continue').removeAttr('disabled');
else
$('#continue').attr('disabled', false);
});
http://jsfiddle.net/TGQZs/1/