I have the following set of checkboxes:
Original:
<INPUT TYPE="checkbox" ID="db1" class="db" checked>
<INPUT TYPE="checkbox" ID="db2" class="db" checked>
<INPUT TYPE="checkbox" ID="db3" class="db" checked>
<INPUT TYPE="checkbox" ID="db4" class="db" checked>
</br>
Other:
<INPUT TYPE="checkbox" ID="other" class="other" onclick="otherBoxes('other',this)">
and the following javascript:
<script language="JavaScript" src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function otherBoxes(it,box)
{
$(function()
{
$(':checkbox').click(function()
{
if (this.checked)
{
$('.db').prop('checked',false);
}
}
)
}
)
}
</script>
What I am trying to do is set someting up so that when I check the 'other' checkbox, the 'Original' checkboxes are all unchecked.
I then want to have the reverse, so that if one (or more) of the 'Original' checkboxes are checked, the 'other' checkbox is unchecked.
The Javascript I have so far kind of does the first part of this, in that if I check, then uncheck, then check the 'other' box again, the 'Original' boxes are unchecked.
However, I would like it to work when the box is checked the first time.
It also has the unintended consequence, that after the 'other' box has been checked, the 'original' boxes refuse to be checked, even if I uncheck the 'other' box.
I've found lots of examples of similar situations, but none the same, and I haven't been able to adapt any that I have found. How can I do this please?
You can try something like that
$('.other').on('click' , function() {
$('.db').each(function(){
$(this).removeAttr('checked');
})
});
$('.db').on('click', function(){
$('.other').removeAttr('checked');
});
here it is a working jsfiddle http://jsfiddle.net/vQTFm/
P.S. : I suggest you to avoid using similar names beetwen ids and classs because it CAN be confusing.
You should bind the events using jQuery instead of in the HTML.
Here is some code that does what you want, it binds to the change event on the checkboxes and then checks whether it was the other or db checkboxes that were checked and unchecks the required check-boxes:
$(function() {
$('.db, #other').on('change', function() {
if (this.checked) {
if ($(this).is('#other')) {
$('input:checkbox').not('#other').prop('checked', false);
} else {
$('#other').prop('checked', false);
}
}
});
});
Working example - http://jsfiddle.net/YD5SE/2/
Use the following JS code:
<script type="text/javascript">
function otherBoxes(it,box)
{
if (box.checked)
{
$('.db').prop('checked',false);
}
}
</script>
Related
So first off I did search and I found this Enable/Disable a dropdownbox in jquery which got me on the right track. I'm new to jquery so when seeing other code I can adapt it to fit and work for me.
So what i'm asking is how do you make it check to see if two check boxes condition are true?
<script>
$(document).ready(function() {
$("#box1").click(function() {
if ($(this).is(":checked")) {
$("#tech1").prop("disabled", false);
} else {
$("#tech1").prop("disabled", true);
}
});
});
</script>
I want it to be if box1 and box2 are checked enable this box? I understand you can do it with an if statement, but I'm not sure where exactly it goes. Thanks in advance.
Would this work:
$("#box1").click(function() {
if ($(this).is(":checked")) &&
$("#box2").click(function() {
if ($(this).is(":checked"))
I doesn't work and I assume thats because that above creates two functions and not the if statement that I need.
Include both in the event handler, and check if both are checked
$(document).ready(function() {
var boxes = $("#box1, #box2");
boxes.on('change', function() {
var disabled = boxes.filter(':checked').length === boxes.length;
$("#tech1").prop("disabled", disabled);
});
});
FIDDLE
Consider box1 & box2 checkboxes defined with a css class boxes as below:
<input type="checkbox" id="box1" class="boxes" />
<input type="checkbox" id="box2" class="boxes" />
Now you can use box class as jquery selector to do your task
<script>
$(document).ready(function() {
$(".boxes").click(function(){
if($(".boxes:checked").size() == $(".boxes").size()){
$("#tech1").prop("disabled", false);
}else{
$("#tech1").prop("disabled", true);
}
);
});
onclick of one radio button i have to check one condition if true i have to check it or restore to same old status,
html
<input type="radio" name="test" id="radio0" onclick="myFunction()" checked />
<input type="radio" name="test" id="radio1" onclick="myFunction()" />
<input type="radio" name="test" id="radio2" onclick="myFunction()" />
JS
globalCondition = false;
function myFunction()
{
if(globalCondition)
{
//some codes and it will check clicked radio button anyway
}
else
{
return false; // i tried this but its not working
/*here i don't want to check clicked radio button, and previously
checked button should be checked*/
}
}
As I said in comment return in the function will not do anything as you're not returning the function value in the in-line code.
Although the other solutions offered are correct, to keep your code unobtrusive, you should not have inline JS at all (remove the onclick='s).
I realize the question was not tagged jQuery, but maybe it should have been: Instead on onclick you should use a jQuery event handler, selecting only the set of radio buttons.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/KVwL3/1/
globalCondition = false;
$(function(){
$("[name=test]").click(function(e){
if(globalCondition)
{
//some codes and it will check clicked radio button anyway
}
else
{
return false;
// or
e.preventDefault();
/*here i don't want to check clicked radio button, and previously
checked button should be checked*/
}
});
});
Notes:
DOM ready event:
$(function(){ YOUR CODE HERE }); is a shortcut for $(document).ready(function(){ YOUR CODE HERE});
Selectors
If an attribute [] selector = value contains special characters it needs to be quoted:
e.g.
$('[name="IstDynamicModel[SD_WO_CREATE]"]')
There are any number of selectors that will choose just the three radio buttons. As this is a simple one-off connection, at startup, there is no real speed difference between any options, but you would normally try and make the selector specific in ways that might make use of various lookup tables available to the browser:
e.g.
$('input[type=radio][name="IstDynamicModel[SD_WO_CREATE]"]')
This will be slightly faster as it will reduce the slowest check (the name=) to only radio inputs.
try this:
globalCondition = false;
function myFunction(e)
{
if(globalCondition)
{
//some codes and it will check clicked radio button anyway
}
else
{
e.preventDefault();
return false; // i tried this but its not working
/*here i don't want to check clicked radio button, and previously
checked button should be checked*/
}
}
USe like this
<input type="radio" name="test" id="radio1" onclick="return myFunction()" />
javascript
globalCondition = false;
function myFunction(e)
{
if(globalCondition)
{
//some codes and it will check clicked radio button anyway
return true;
}
else
{
return false; // i tried this but its not working
/*here i don't want to check clicked radio button, and previously
checked button should be checked*/
}
}
Why is this code not working on jQuery 1.10.1?
Fiddle here -> http://jsfiddle.net/XgDwU/9/
<input type="radio" id="don" name="billing[use_for_shipping]" value="">Ship to this address</input>
<input type="radio" id="don1" name="billing[use_for_shipping]" value="">Ship to different address</input>
<br/><br/>
<b> <input type="checkbox" id="chkSelect" /> Check/Uncheck me </b>
<br/><br/>
<p></p>
here's my function
$(document).ready(function() {
$('#chkSelect').click(function(){
var isChecked = $('#chkSelect').is(':checked');
if(isChecked){
$("input#don").attr('checked',true);
$('p').html('Checkbox is checked: <b>True</b>');
}else{
$("input#don1").attr('checked',true);
$('p').html('Checkbox is checked: <b>False</b>');
}
});
});
Problems:
Use change event instead of click
Use prop instead of attr
I have use this.checked in place of $('#chkSelect').is(':checked')
Try
$(document).ready(function() {
$('#chkSelect').change(function(){
if(this.checked){
$("input#don").prop('checked',true);
$('p').html('Checkbox is checked: <b>True</b>');
}else{
$("input#don1").prop('checked',true);
$('p').html('Checkbox is checked: <b>False</b>');
}
});
});
DEMO
You should read .prop() vs .attr() a very good explanation is provided
You are trying to add a check attribute to a radio button. If more than one radio button in a set has the checked attribute, the latter will be checked. That's what's happening, more than one radio is being checked.
Since it's a radio button, and the browser handles the switching, just trigger a click on the one that you want:
$('#chkSelect').click(function () {
if (this.checked) {
$("input#don").click();
$('p').html('Checkbox is checked: <b>True</b>');
} else {
$("input#don1").click();
$('p').html('Checkbox is checked: <b>False</b>');
}
});
JSFiddle
I made a small verification script which is supposed to act like this:
I have 4 checkboxes, one has a particular way of action, the id of this checkbox is chx0
If I checked the chx0 checkbox then it released all the others checked checkboxes
If I checked one of all the others checkboxes then it released the chx0 one
Here is my code:
<script type="text/javascript">
$(document).ready(function() {
$('#chx0').click(function() { // click on the chx0 checkbox
if ($('#chx0').attr('checked')) {
$('#chx1').attr('checked', false);
$('#chx2').attr('checked', false);
$('#chx3').attr('checked', false);
}
});
$('#chx1').click(function() {// click on the chx1 checkbox
if ($('#chx1').attr('checked')) {
$('#chx0').attr('checked', false);
}
});
$('#chx2').click(function() { // click on the chx2 checkbox
if ($('#chx2').attr('checked')) {
$('#chx0').attr('checked', false);
}
});
$('#chx3').click(function() { // click on the chx3 checkbox
if ($('#chx3').attr('checked')) {
$('#chx0').attr('checked', false);
}
});
});
</script>
This code is working pretty well it just to get more good practice!
I'd put a class on each checkbox
<input type="checkbox" name="chx0" id="chx0" class="checkbox-group singleton">
<label for="chx0">Check me out!</label>
<input type="checkbox" name="chx1" id="chx1" class="checkbox-group">
<label for="chx1">Check us out!</label>
<input type="checkbox" name="chx2" id="chx2" class="checkbox-group">
<label for="chx2">Check them out!</label>
Then with your jQuery you can do
$('input.checkbox-group').each( function() {
$(this).click( function() {
if ( $(this).hasClass('singleton') ) {
$('input.checkbox-group:checked').removeAttr('checked');
} else {
$('input.checkbox-group.singleton').removeAttr('checked');
}
};
});
Untested, but I think something like that should work. I can't remember if it's better to use the change event rather than click.
You could combine the clauses for all the individual checkboxes, something like
$('#chx1','#chx2','#chx3').click(function() {
if ($(this).attr('checked')) {
$('#chx0').attr('checked', false);
}
});
instead of one per checkbox. Also in the one for "chx0", you can use $(this) instead of $('#chx0')
I came up with something similar to ianbarker. Rather than assume dependencies are all or nothing I used a custom data tag to list the dependencies.
A working example is on jsfiddle here
$('.luckyChecks').click(function() { // click on ANY lucky checkbox
var $t = $(this);
if($t.attr('checked')){
var clear = $t.attr("data-clear").split(",");
for(var i=0; i < clear.length; i++){
$('#'+clear[i]).attr('checked',false);
}
}
});
HTML:
<input type="checkbox" id="chx0" class="luckyChecks" data-clear="chx1,chx2,chx3" />
Diamonds <br />
<input type="checkbox" id="chx1" class="luckyChecks" data-clear="chx0"/>
Clovers <br />
...
I have a page that has a number of checkboxes in it. I would like to write a function that will be called when the ckeckbox is clicked, that determines if the checkbox is checked or not.
<input type="checkbox" onclick="toggleVis('id', this);"/> ID
<input type="checkbox" onclick="toggleVis('edit', this);" checked="checked"/> Edit
<input type="checkbox" onclick="toggleVis('last', this);"/> Last
Note some checkboxes start checked.
I figured that there must be a way to do this based on a reference passed, so I passed the this value as a parameter.
function toggleVis(name, checkbox)
{
//if(checkbox.checked())
console.log('checked');
if($('.'+name).css('display') != "none")
$('.'+name).css('display', 'none');
else
$('.'+name).css('display', 'table-cell');
}
I am open to use jQuery.
You were close.
if(checkbox.checked) {
console.log('checked');
//...
}
There's no checked() method, but there is a checked property. Note that your code may only work on clicks. Perhaps onchange would be better?
Look at the checkboxobj.checked property (instead of calling it like a function). In your case, you could reference if (checkbox.checked) { ... }. More information can be found on this website
If you wanted to do this with jQuery you might try the following. Note that I'm binding to the checkbox instead of including the 'onclick' or 'onchange' directly on the HTML element.
$('[type=checkbox]').click(function(){
if( $(this).attr('checked') ){
console.log('checked');
if($('.'+$(this).attr('name')).css('display') != "none") {
$('.'+$(this).attr('name')).css('display', 'none');
} else {
$('.'+$(this).attr('name')).css('display', 'table-cell');
}
}
});
And a JQuery-based solution:
var checked = $(checkbox).is(':checked');
Helpful if you want to find the checkbox first by some JQ selector.
<input type="checkbox" class="checkthis"> ID
<input type="checkbox" class="checkthis" checked="checked"> Edit
<input type="checkbox" class="checkthis"> Last
$(input.checkthis).click(function() {
if($(this).is(':checked') {
// do checked stuuf
} else {
// do not checked stuff
}
});