I'm trying to give an option for the user to select another way to proceed with the operation, and they are needed to select just one checkbox for each radio. So how can I get uncheck all the checkbox if the number of checkboxes selected overpass 1?
function testaCheck(idMaster){
var inputs,i,checados=0;
inputs = document.getElementsByTagName("input");
for(i=0;i<inputs.length;i++){
if(inputs[i].type=="checkbox"){
if(inputs[i].checked==true){
checados++;
document.getElementsByName('DS_MD'+idMaster).value = idMaster;
$("#formSelectMAWB").find("#masterDireto").val(idMaster);
}
}
}
if(checados>1){
alert("Só pode haver um item selecionado.");
document.getElementsByTagName(inputs.checked=false);
return ;
}
};
<label class="input-control radio">
<input type="radio" name="idMAWB" id="idMAWB" value="<%=ID_CD_MAWB%>" onClick="selecionaMAWB(this.value)">
<span class="helper"><%=DS_MAWB%></span>
</label>
<label for="DS_MD<%=ID_CD_MAWB%>">
<input type="checkbox" name="DS_MD<%=ID_CD_MAWB%>" id="masterDireto<%=ID_CD_MAWB%>" onClick="testaCheck(<%=ID_CD_MAWB%>)">
<span class="helper"> <%=ID_CD_MAWB%> </span>
</label>[layout test][1]
Link: [1]: https://i.stack.imgur.com/ynIAR.png
You should format your code correctly
function testaCheck(idMaster) {
var inputs, i, checados = 0;
inputs = document.getElementsByTagName("input");
for (i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox") {
if (inputs[i].checked == true) {
checados++;
document.getElementsByName('DS_MD' + idMaster).value = idMaster;
$("#formSelectMAWB").find("#masterDireto").val(idMaster);
}
if (checados > 1) {
uncheckAll(inputs);
}
}
}
};
function uncheckAll(inputItems){
alert("Só pode haver um item selecionado.");
for (i = 0; i < inputItems.length; i++) {
inputItems[i].checked = false;
}
}
You need to use prop() to set your checkbox.
here is my demo
$("#Allcheck").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
});
function testaCheck(idMaster) {
var inputs, i, checados = 0;
inputs = document.getElementsByTagName("input");
for (i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox") {
if (inputs[i].checked == true) {
checados++;
document.getElementsByName('DS_MD' + idMaster).value = idMaster;
$("#formSelectMAWB").find("#masterDireto").val(idMaster);
}
}
}
if (checados > 1) {
uncheckAll(inputs);
document.getElementsByName('DS_MD' + idMaster).value = null;
$("#formSelectMAWB").find("#masterDireto").val(null);
}
};
function uncheckAll(inputItems){
alert("Só pode haver um item selecionado. Favor refazer a seleção");
for (i = 0; i < inputItems.length; i++) {
inputItems[i].checked = false;
}
}
Thanks for help, here is my final code, where all check can be unchecked and value is set null before uncheck.
Related
<script type="text/javascript">
function checkAll(formname, checktoggle)
{
var checkboxes = new Array();
checkboxes = document[formname].getElementsByTagName('input');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type === 'checkbox') {
checkboxes[i].checked = checktoggle;
}
}
}
</script>
<form name="myform">
<li>
<label class="cba">
Check All |
UnCheck All
</label>
</li>
<li>
<input class="cba" type="checkbox" name="content1" value="1"<?php checked('1', $slct); ?>/>
</li>
<li>
<input class="cbc" type="checkbox" name="content2" value="2"<?php checked('2', $copy); ?>/>
</li>
<li>
<input class="cbx" type="checkbox" name="content3" value="3"<?php checked('3', $cut); ?>/>
</li>
</form>
I have made the toggle option for the checkbox check all and uncheck all. Still now check all and uncheck all is not working I get the error in console while viewing in Firebug. Here is the screenshot I attached.
I am not sure what was my mistake:
Any suggestion would be great.
Your syntax is incorrect. Your missing the .forms so it should look like this
document.forms[formName].getElementsByTagName("input");
function checkAll(formname, checktoggle)
{
var checkboxes = new Array();
checkboxes = document.forms[formname].getElementsByTagName('input');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type === 'checkbox') {
checkboxes[i].checked = checktoggle;
}
}
}
</script>
Finally based on #Mark Walters Suggestion I Correct the problem. Here is the One I changed based on his suggestion.
Thanks for all your Help. Happy Day
Javascript function to toggle (check/uncheck) all checkbox.
function checkAll(bx)
{
var cbs = document.getElementsByTagName('input');
for(var i=0; i < cbs.length; i++)
{
if(cbs[i].type == 'checkbox')
{
cbs[i].checked = bx.checked;
}
}
}
function checkAll(bx) {
var cbs = document.getElementsByTagName('input');
for(var i=0; i < cbs.length; i++) {
if(cbs[i].type == 'checkbox') {
cbs[i].checked = bx.checked;
}
}
}
Have that function be called from the onclick attribute of your checkbox to check all.
<input type="checkbox" onclick="checkAll(this)">
Try this:
function checkAll(formname, checktoggle)
{
var checkboxes = new Array();
checkboxes = document.form.myform.getElementsByTagName('input');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type === 'checkbox') {
checkboxes[i].checked = checktoggle;
}
}
}
For specific checkboxes, you can use this:
function checkBoxes(pForm, boxName) {
for (i = 0; i < pForm.elements.length; i++)
if (pForm.elements[i].name == boxName)
pForm.elements[i].checked = pForm.elements[i].checked ? false : true;
}
Here is the issue: I am trying check and uncheck the check boxes by a group.
So if you select G1 and G2, it throws a message that you cant mix groups. If you uncheck all of them, i am trying to clear the existing grouping and that is where the code seems to fail.
Any thoughts? (also,i might be having a wrong idea about that global var at the beginning. so please suggest)
<HTML>
<script language="javascript">
var prodSel="";
function VerifyGroup(a,b)
{
ClearAllSelectionsA(); // check if this is the last unselect and clear the prodSel variable
if (prodSel == "")
{
prodSel = a;
}else
{
if (prodSel != a)
{
alert ( "Please ensure that the groups are same for the items you select");
//alert(b);
document.getElementById(b).checked = false;
}
}
}
function ClearAllSelections()
{
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
inputs[i].checked = false;
}
}
prodSel=""; // Clear the variable; allow new selections
}
/*loop through and if all of them are unchecke,d clear the variable*/
function ClearAllSelectionsA()
{
var clre = true;
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
if (inputs[i].checked){clre= false;}
}
}
if (clre){
prodSel=""; // Clear the variable; allow new selections
alert(window.prodSel);
}
}
</script>
<body>
G1<input type="checkbox" value="zxc" id="12" onclick="javascript:VerifyGroup('g1',12);"><BR>
G1<input type="checkbox" value="zxcw" id="123" onclick="javascript:VerifyGroup('g1',123);"><BR>
G1<input type="checkbox" value="zxcdw" id="124" onclick="javascript:VerifyGroup('g1',124);"><BR>
G2<input type="checkbox" value="zxcf" id="125" onclick="javascript:VerifyGroup('g2',125);"><BR>
G2<input type="checkbox" value="zxcfg" id="126" onclick="javascript:VerifyGroup('g2',126);"><BR>
clear group
</body>
</html>
When you call ClearAllSelectionsA, if all the checkboxes are unchecked, then prodSel gets cleared. Then back in VerifyGroup, prodSel is immediately being reassigned to a. My recommendation would be to return true or false from ClearAllSelectionsA and act based upon that value.
<script language="javascript">
var prodSel="";
function VerifyGroup(a,b)
{
var cleared = ClearAllSelectionsA(); // check if this is the last unselect and clear the prodSel variable
if (prodSel == "" && !cleared) //only reset prodSel if there is a checkbox checked
{
prodSel = a;
}else
{
if (prodSel != a)
{
alert ( "Please ensure that the groups are same for the items you select");
//alert(b);
document.getElementById(b).checked = false;
}
}
}
function ClearAllSelections()
{
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
inputs[i].checked = false;
}
}
prodSel=""; // Clear the variable; allow new selections
}
/*loop through and if all of them are unchecke,d clear the variable*/
function ClearAllSelectionsA()
{
var clre = true;
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
if (inputs[i].checked){clre= false;}
}
}
if (clre){
prodSel=""; // Clear the variable; allow new selections
alert(window.prodSel);
}
return clre;
}
</script>
I have a Checkbox list. On the load of a page i want my first checkbox true and others are disable.I need to check only one checkbox from checkbox list and others should be disable.If use unchecked the checked checkbox then others should be enable means allowed only one check box checked.
My javascript code is here but on the load of page its not checked the first checkbox, also i want the id of each checkbox while using checkboxlist.
function CheckOptions(CheckBoxList) {
var checkboxlist = document.getElementById('CheckBoxList1');
var checkedCount = 0;
var options = CheckBoxList.getElementsByTagName('input');
for (var i = 0; i < options.length; i++) {
if (options[i].checked) {
checkedCount += 1;
}
}
if (checkedCount > 0) {
for (var j = 0; j < options.length; j++) {
if (!options[j].checked)
options[j].disabled = true;
} }
else {
for (var k = 0; k < options.length; k++) {
options[k].disabled = false;
}
}
}
If you're only wanting one checked at a time, it sounds like a group of radio buttons would better serve your purposes.
$(function() {
var checkboxes = $("input[type=checkbox]");
// select the first one on load
checkboxes.eq(0).attr("checked", "checked");
checkboxes.each(function(i, e) {
if (i > 0) {
$(e).attr("disabled", "disabled");
}
})
// handle further selections:
checkboxes.click(function() {
if ($(this).attr("checked")) {
var t = this;
checkboxes.each(function(i, e) {
if (e != t) {
$(e).attr("disabled", "disabled");
}
});
} else {
checkboxes.attr("disabled", null)
}
});
});
I have code to see if any checkboxes are checked, it's working. Here's where I'm usure, after it sees that none are checked, checked I want to have a DIV show up (hide/show I guess) somwhere and disappear if any of the boxes are checked.
function checkBoxValidate(cb) {
for (j = 0; j < 8; j++) {
if (eval("document.myform.checkbox[" + j + "].checked") = false) {
document.views.checkbox[j].checked = false;
}
}
}
----------
<form name="myform">
<input class="checkbox" name="1" type="checkbox" value="check_1" onclick="document.getElementById('r-click').innerHTML = '1;" id="click">
1
<input class="checkbox" name="2" type="checkbox" value="check_2" onclick="document.getElementById('s-click').innerHTML = '2';" id="click">
2
</form>
<div id=showInstructions>Check boxes</div>
Thanks!
Added a few lines of code to your original code to demonstrate:
(btw, the whole "eval" thing is kinda messy and could be written much simpler...)
function checkBoxValidate(cb) {
var somethingIsChecked = false;
for (j = 0; j < 8; j++) {
if (eval("document.myform.checkbox[" + j + "].checked") = false) {
document.views.checkbox[j].checked = false;
}
else {
somethingIsChecked = true;
}
if (somethingIsChecked)
document.getElementById("showInstructions").style.display = "block";
else
document.getElementById("showInstructions").style.display = "none";
function checkBoxValidate(cb) {
var noneChecked = true;
for (j = 0; j < 8; j++) {
if (eval("document.myform.checkbox[" + j + "].checked") == false) {
document.views.checkbox[j].checked = false;
} else {
noneChecked = false;
}
}
document.getElementById("showInstructions").style.display = noneChecked ? "block" : "none";
}
how to disable all listbox in a form
Just to improve on Gavin's correct answer:
var selects = theform.getElementsByTagName("select");
for (i = 0; i < selects.length; i++) {
selects[i].disabled = true;
}
$('#formId select').attr('disabled', 'disabled');
Edit: oops, thought I saw a jquery tag. Anyway:-
for (i = 0; i < theform.length; i++) {
var formElement = theform.elements[i];
if (formElement.tagName === "SELECT") {
formElement.disabled = true;
}
}