This question already has answers here:
How can I check if a checkbox is checked?
(18 answers)
Closed 8 years ago.
I have form on page1.php:
<form method="POST" action="page2.php">
<input type="checkbox" name="F10" id="f10">
<input type="checkbox" name="W10" id="w10">
<input type="checkbox" name="F20" id="f20">
<input type="checkbox" name="W20" id="w20">
<input type="checkbox" name="F30" id="f30">
<input type="checkbox" name="W30" id="w30">
</form>
I want to diable a checkbox if another checkbox is checked using javascript or XMLHttpRequest().
I tried doing it using javascript but it didn't work.
if(document.getElementById("f10").checked){
document.getElementById("w20").disabled=true;
}
You can use regular javascript to get a true or false value for checked for example,
var isChecked= document.getElementById('elementName').checked;
if(isChecked){ //checked
//execute code here
}else{ //unchecked
//execute code here
}
or if you want whenever the checkbox check is changed
var checkbox = document.getElementById('elementName');
checkbox.addEventListener("change", functionname, false);
function functionname(){
var isChecked = checkbox.checked;
if(isChecked){ //checked
}else{ //unchecked
}
}
can you try my code? it may help you :D
<form onclick="checkIfChecked()" method="POST" action="page2.php">
<input type="checkbox" name="F10" id="f10">F10
<input type="checkbox" name="W10" id="w10">W10
<input type="checkbox" name="F20" id="f20">F20
<input type="checkbox" name="W20" id="w20">W20
<input type="checkbox" name="F30" id="f30">F30
<input type="checkbox" name="W30" id="w30">W30
</form>
<script>
function checkIfChecked(){
if(document.getElementById("f10").checked){
document.getElementById("w20").disabled=true;
} else {
document.getElementById("w20").disabled=false;
}
}
</script>
The purpose of a check box is for multiple selections, use radio buttons if you only want one selection available
You can use the checked pseudo class but note lack of browser support for IE 8 if that matters to you.
http://css-tricks.com/almanac/selectors/c/checked/
Related
This question already has answers here:
Limit Checkbox amount
(6 answers)
Closed 5 years ago.
Let's say I have 10 check-boxes on the page. I'm looking for something very specific with the behaviour :
A variable let's say maxSelections can be used to control the max-selectable checkboxes
After maxSelections is reached, the other checkboxes on the page should be disabled
At this time, those already checked should not be disabled as user has to have the option of unchecking something from here to select the other available checkbox
ps I've refered this JSFiddle but cant get the point-2 to be working
Thanks in advance for help
var limit = 3;
$('input.single-checkbox').on('change', function(evt) {
if($(this).siblings(':checked').length >= limit) {
this.checked = false;
}
});
We can use pseudo classes to get the state of the check boxes
:checked : Selects all checkboxes currently checked
:not(:checked) : Selects all checkboxes currently not checked
Once we have these two states available, we can use the following jQuery syntax to set the disabled attribute of the checkbox
$(<checkboxElememt>).prop('disabled', <true/false>);
Here's a snippet that answers what you need :
var maxSelections = 3
$('input[type="checkbox"]').change(function() {
var currentCount = $('input[type="checkbox"]:checked').length // Here we can get the number of checkboxs checked
// :checked pseudo selects all teh checkboxes that are checked
if (currentCount >= maxSelections) {
$('input[type="checkbox"]:not(:checked)').prop('disabled', true); // :not(:checked) pseudo is used to select and disable all unchecked checkbox
} else {
$('input[type="checkbox"]').prop('disabled', false); // Else, let's enable all the checkboxes
}
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div>
<input type="checkbox" name="op1" id="op1" />
<label for="op1">Option 1</label>
</div>
<div>
<input type="checkbox" name="op2" id="op2" />
<label for="op2">Option 2</label>
</div>
<div>
<input type="checkbox" name="op3" id="op3" />
<label for="op3">Option 3</label>
</div>
<div>
<input type="checkbox" name="op4" id="op4" />
<label for="op4">Option 4</label>
</div>
<div>
<input type="checkbox" name="op5" id="op5" />
<label for="op5">Option 5</label>
</div>
<div>
<input type="checkbox" name="op6" id="op6" />
<label for="op6">Option 6</label>
</div>
I still learning javascript, i think this is ez question, but i can't fix it with my experience (already try search some source), this my code
This is example:
PHP
<?php
<input type="checkbox" checked="checked" value="1" class="box_1">1</label> // checked
<input type="checkbox" value="2" class="box_1">2</label> //unchecked
<input type="checkbox" checked="checked" value="3" class="box_1">3</label> // checked
<input type="checkbox" value="4" class="box_1">4</label> //unchecked
<input type="checkbox" checked="checked" value="5" class="box_1">5</label> // checked
<input type="button" value="Submit" id="button-price" class="button" />
?>
I try check the check box with javasript by class, (i can't use by name&id because i use looping)
I try build condition like this Javascript :
$('#button-price').bind('click', function() {
var box = '';
$(".box_1").each(function(){ // for each checkbox in class box_1(1-5)
if(this).attr("checked","true"){ // if this checked box is true
var value = (this.value).toLowerCase(); // take the value
box = box + value; // store to box
}
});
});
when click button then take value and store to box,
I know there error in here if(this).attr("checked","true"){
what it should be writing the condition?
Try using prop instead of attr
if($(this).prop('checked')) {
}
Hope this helps.
You can use the jQuery .prop() method to check the checkbox state:
if ($(this).prop("checked")) { // if this checked box is true
box += $(this).val().toLowerCase(); // store to box
}
Suggestion: (this.value).toLowerCase() will work but try not mixing up jQuery code with pure javascript. Instead of it you can use the solution above.
This question already has answers here:
Posting both checked and unchecked checkboxes
(3 answers)
POST unchecked HTML checkboxes
(44 answers)
Closed 1 year ago.
How to submit value 1 if a checkbox in a checkbox array is checked, and submit 0 if it's unchecked? I tried this but no luck. I am trying to grab this array in a php array when the form is submitted. Please help!
<input id = 'testName0' type = 'checkbox' name = 'check[0]' value = '1' checked>
<input id='testNameHidden0' type='hidden' value='0' name='check[0]'>
<input id = 'testName1' type = 'checkbox' name='check[1]' value = '1' unchekced>
<input id='testNameHidden1' type='hidden' value='0' name='check[1]'>
<input type = 'submit' value = 'Save Changes'>
>
<script>
if(document.getElementById('testName0').checked){
document.getElementById('testNameHidden0').disabled = true;
}
</script>
<script>
if(document.getElementById('testName1').checked){
document.getElementById('testNameHidden1').disabled = true;
}
</script>
Simplest one, no javascript required, just put a hidden input before the checkbox:
<input type="hidden" name="check[0]" value="0" />
<input type="checkbox" name="check[0]" value="1" />
Inputs need to have the same name. If the checkbox is checked then value 1 will be submitted, otherwise value 0 from the hidden input.
Your case javascript solution, no hidden inputs needed:
<script type="text/javascript">
// when page is ready
$(document).ready(function() {
// on form submit
$("#form").on('submit', function() {
// to each unchecked checkbox
$(this + 'input[type=checkbox]:not(:checked)').each(function () {
// set value 0 and check it
$(this).attr('checked', true).val(0);
});
})
})
</script>
<form method="post" id="form">
<input type="checkbox" name="check[0]" value="1" />
<input type="checkbox" name="check[1]" value="1" />
<input type="submit" value="Save Changes" />
</form>
PHP solution, no hidden inputs needed:
<?php
// if data is posted, set value to 1, else to 0
$check_0 = isset($_POST['check'][0]) ? 1 : 0;
$check_1 = isset($_POST['check'][1]) ? 1 : 0;
?>
<form method="post">
<input type="checkbox" name="check[0]" value="1" />
<input type="checkbox" name="check[1]" value="1" />
<input type="submit" value="Save Changes" />
</form>
EDIT: the javascript solution is not valid anymore as of jquery 1.6. Based on this, a more proper solution is the following:
<script type="text/javascript">
// when page is ready
$(document).ready(function() {
// on form submit
$("#form").on('submit', function() {
// to each unchecked checkbox
$(this).find('input[type=checkbox]:not(:checked)').prop('checked', true).val(0);
})
})
</script>
<form method="post" id="form">
<input type="checkbox" name="check[0]" value="1" />
<input type="checkbox" name="check[1]" value="1" />
<input type="submit" value="Save Changes" />
</form>
A better solution that solved this for me.
Problem: Both the hidden and the checked were sending to my server.
Solution:
if len(key) == 1 {
value = false
} else {
value = true
}
This way, if len(key) is 1 I know that only the hidden field was being send. Any other scenario means that the box is checked. Simple and easy.
Well I have a much more simple code that worked well for me:
<input type="checkbox" value="true" id="checkBox">
Then the JQuery code:
var checkBoxValue = $('#checkBox').is(':checked')?$('#checkBox').val():false
I used a ternary operator to set the value on checked and unchecked condition.
This question already has answers here:
jQuery: Uncheck other checkbox on one checked
(7 answers)
Closed 8 years ago.
How to make the checkbox click at a time when one is clicked and other should be unchecked.
when checkbox one is clicked it should be marked to checked and when checkbox two is clicked it should be marked checked and rest all should be marked unchecked.
My code is as follows:
<div class="feedback-quest3">
<label class="checkbox ques3" for="ques3-cbox1">
<input type="checkbox" value="" id="ques3-cbox1" data-toggle="checkbox">
1-2
</label>
<label class="checkbox ques3" for="ques3-cbox2">
<input type="checkbox" value="" id="ques3-cbox2" data-toggle="checkbox">
2-3
</label>
<label class="checkbox ques3" for="ques3-cbox3">
<input type="checkbox" value="" id="ques3-cbox3" data-toggle="checkbox">
3-4
</label>
</div>
See the DEMO
Javascript
function attach(element,listener,ev,tf){
if(element.attachEvent)
element.attachEvent("on"+listener,ev);
else
element.addEventListener(listener,ev,tf);
}
var parent = document.getElementById('parentElement');
var checkboxes = parent.getElementsByTagName('input');
if(checkboxes.length>0){
for(var i=0;i<checkboxes.length;i++){
attach(checkboxes[i],'click',function(event){
var evt = event || window.event;
var target = evt.target || evt.srcElement;
for(var y=0;y<checkboxes.length;y++){
checkboxes[y].checked = false;
}
target.checked = true;
}, false);
}
}
$(".feedback-quest3 :checkbox").on("change", function(){
$(".feedback-quest3 :checkbox").not($(this)).prop("checked",false);
});
Then, try this:
$(".feedback-quest3 :checkbox").each(function(){
$(".feedback-quest3 :checkbox").on("change",function(){
$(".feedback-quest3 :checkbox").prop("checked",false);
$(this).prop("checked",true);
});
});
I have to control the checked status a list of checkboxes from another checkbox.
HTML:
<input id="readall" name="readall" type="checkbox" value="1">
<div id="permGrid">
<input id="recipe.read" name="recipe.read" type="checkbox" value="1" rel="read">
<input id="group.read" name="group.read" type="checkbox" value="1" rel="read">
<input id="ingredients.read" name="ingredients.read" type="checkbox" value="1" rel="read">
</div>
JS:
$('#readall').click(function()
{
var checkStatus = $(this).is(':checked');
var checkboxList = $('#permGrid input[rel="read"]');
$(checkboxList).attr('rel', 'read').each(function(index)
{
if(checkStatus == true)
{
$(this).attr('checked', 'checked');
console.log($(this).attr('checked'));
}
else
{
$(this).removeAttr('checked').reload();
console.log($(this).attr('checked'));
}
});
});
The above code seems fine but the check/uncheck works only for the first time. But when I click the main checkbox second time, it doesn't change the status of other checkboxes into 'checked'. Is there anything I need to do?
I found something similar here. I compared the code and mine and this code is somewhat similar but mine doesn't work.
Try using prop, and shorten the code alot like this
$('#readall').click(function () {
var checkboxList = $('#permGrid input[rel="read"]')
checkboxList.prop('checked', this.checked);
});
DEMO
You can't use a method .reload like this
$(this).removeAttr('checked').reload();
// returns Uncaught TypeError: Object #<Object> has no method 'reload'
Remove it, and it will work.
JSFiddle
Use a class for all the checkboxes which you need to change on click of some checkbox. Like:
<input id="recipe.read" class="toChange" name="recipe.read" type="checkbox" value="1" rel="read" />
I have added a class="toChange" to all the checkboxes except the first one.
<input id="readall" name="readall" type="checkbox" value="1">
<div id="permGrid">
<input id="recipe.read" class="toChange" name="recipe.read" type="checkbox" value="1" rel="read" />
<input id="group.read" class="toChange" name="group.read" type="checkbox" value="1" rel="read" />
<input id="ingredients.read" class="toChange" name="ingredients.read" type="checkbox" value="1" rel="read" />
</div>
Then use the following script:
$('#readall').click(function(){
var checkStatus = $(this).is(':checked');
if(checkStatus){
$(".toChange").attr('checked', 'checked');
}
else{
$(".toChange").removeAttr('checked')
}
});
Demo