DRAhmed Posted November 6, 2022 Report Share Posted November 6, 2022 how to make a checkbox get unchecked if another checkbox is checked Quote Link to comment Share on other sites More sharing options...
0 Ilyrian Posted November 15, 2022 Report Share Posted November 15, 2022 I can see that you are using Details DataPage. In this case change the following part of the code from: var checkbox1 = document.getElementById('InsertRecordhandover') var checkbox2 = document.getElementById('InsertRecordapproved') var textfield1= document.getElementById('InsertRecordprocess_notes') to this: var checkbox1 = document.getElementById('EditRecordhandover') var checkbox2 = document.getElementById('EditRecordapproved') var textfield1= document.getElementById('EditRecordprocess_notes') Also note that when using the Details DataPage, instead of Insert keyword, we should use Edit. Change also the naming of your fields accordingly. var checkbox1 = document.getElementById('EditRecordleft_egypt') var checkbox2 = document.getElementById('EditRecordfollow_checkbox') var textfield1= document.getElementById('EditRecordwhen_to_follow') DRAhmed 1 Quote Link to comment Share on other sites More sharing options...
0 Ilyrian Posted November 7, 2022 Report Share Posted November 7, 2022 Hi @DRAhmed You can try the following code: Change Your_CHECKBOX1 and Your_CHECKBOX2 based on your checboxes <script type = "text/javascript" > if (typeof mainF == 'undefined') { const mainF = function(event) { var checkbox1 = document.getElementById('Your_CHECKBOX1') var checkbox2 = document.getElementById('Your_CHECKBOX2') if (checkbox1.checked == true) { checkbox2.checked = false; } else if (checkbox1.checked == false) { checkbox2.checked = true; } if (checkbox2.checked == false) { checkbox1.checked = true; } else if (checkbox2.checked == true) { checkbox1.checked = false; } checkbox1.addEventListener('change', function() { if (checkbox1.checked == true) { checkbox2.checked = false; } else if (checkbox1.checked == false) { checkbox2.checked = true; } }); checkbox2.addEventListener('change', function() { if (checkbox2.checked == false) { checkbox1.checked = true; } else if (checkbox2.checked == true) { checkbox1.checked = false; } }) document.removeEventListener('DataPageReady', mainF) } document.addEventListener('DataPageReady', mainF) } </script> DRAhmed 1 Quote Link to comment Share on other sites More sharing options...
0 DRAhmed Posted November 9, 2022 Author Report Share Posted November 9, 2022 On 11/7/2022 at 12:40 PM, RagnarIllyrian said: Hi @DRAhmed You can try the following code: Change Your_CHECKBOX1 and Your_CHECKBOX2 based on your checboxes <script type = "text/javascript" > if (typeof mainF == 'undefined') { const mainF = function(event) { var checkbox1 = document.getElementById('Your_CHECKBOX1') var checkbox2 = document.getElementById('Your_CHECKBOX2') if (checkbox1.checked == true) { checkbox2.checked = false; } else if (checkbox1.checked == false) { checkbox2.checked = true; } if (checkbox2.checked == false) { checkbox1.checked = true; } else if (checkbox2.checked == true) { checkbox1.checked = false; } checkbox1.addEventListener('change', function() { if (checkbox1.checked == true) { checkbox2.checked = false; } else if (checkbox1.checked == false) { checkbox2.checked = true; } }); checkbox2.addEventListener('change', function() { if (checkbox2.checked == false) { checkbox1.checked = true; } else if (checkbox2.checked == true) { checkbox1.checked = false; } }) document.removeEventListener('DataPageReady', mainF) } document.addEventListener('DataPageReady', mainF) } </script> i want too add also if chechbox 1 is checked then uncheck checkbox 2 and make field x blank ( delete whatever is inside ) Quote Link to comment Share on other sites More sharing options...
0 Ilyrian Posted November 10, 2022 Report Share Posted November 10, 2022 15 hours ago, DRAhmed said: i want too add also if chechbox 1 is checked then uncheck checkbox 2 and make field x blank ( delete whatever is inside ) In this case you could use the following: We need to add this: var textfield1= document.getElementById('InsertRecordText2') and textfield1.value= " "; - code that clears the value inside texfield <script type = "text/javascript" > if (typeof mainF == 'undefined') { const mainF = function(event) { var checkbox1 = document.getElementById('InsertRecordYesNo1') var checkbox2 = document.getElementById('InsertRecordYesNo2') var textfield1= document.getElementById('InsertRecordText2') if (checkbox1.checked == true) { checkbox2.checked = false; textfield1.value= " "; } else if (checkbox1.checked == false) { checkbox2.checked = true; } if (checkbox2.checked == false) { checkbox1.checked = true; } else if (checkbox2.checked == true) { checkbox1.checked = false; } checkbox1.addEventListener('change', function() { if (checkbox1.checked == true) { checkbox2.checked = false; textfield1.value= " "; } else if (checkbox1.checked == false) { checkbox2.checked = true; } }); checkbox2.addEventListener('change', function() { if (checkbox2.checked == false) { checkbox1.checked = true; } else if (checkbox2.checked == true) { checkbox1.checked = false; } }) document.removeEventListener('DataPageReady', mainF) } document.addEventListener('DataPageReady', mainF) } </script> DRAhmed 1 Quote Link to comment Share on other sites More sharing options...
0 DRAhmed Posted November 11, 2022 Author Report Share Posted November 11, 2022 18 hours ago, RagnarIllyrian said: In this case you could use the following: We need to add this: var textfield1= document.getElementById('InsertRecordText2') and textfield1.value= " "; - code that clears the value inside texfield <script type = "text/javascript" > if (typeof mainF == 'undefined') { const mainF = function(event) { var checkbox1 = document.getElementById('InsertRecordYesNo1') var checkbox2 = document.getElementById('InsertRecordYesNo2') var textfield1= document.getElementById('InsertRecordText2') if (checkbox1.checked == true) { checkbox2.checked = false; textfield1.value= " "; } else if (checkbox1.checked == false) { checkbox2.checked = true; } if (checkbox2.checked == false) { checkbox1.checked = true; } else if (checkbox2.checked == true) { checkbox1.checked = false; } checkbox1.addEventListener('change', function() { if (checkbox1.checked == true) { checkbox2.checked = false; textfield1.value= " "; } else if (checkbox1.checked == false) { checkbox2.checked = true; } }); checkbox2.addEventListener('change', function() { if (checkbox2.checked == false) { checkbox1.checked = true; } else if (checkbox2.checked == true) { checkbox1.checked = false; } }) document.removeEventListener('DataPageReady', mainF) } document.addEventListener('DataPageReady', mainF) } </script> i have put this code in the footer but it doesnt seems to work after checking the box , the other box doesnt get unchecked <script type = "text/javascript" > if (typeof mainF == 'undefined') { const mainF = function(event) { var checkbox1 = document.getElementById('InsertRecordhandover') var checkbox2 = document.getElementById('InsertRecordapproved') var textfield1= document.getElementById('InsertRecordprocess_notes') if (checkbox1.checked == true) { checkbox2.checked = false; textfield1.value= " "; } else if (checkbox1.checked == false) { checkbox2.checked = true; } if (checkbox2.checked == false) { checkbox1.checked = true; } else if (checkbox2.checked == true) { checkbox1.checked = false; } checkbox1.addEventListener('change', function() { if (checkbox1.checked == true) { checkbox2.checked = false; textfield1.value= " "; } else if (checkbox1.checked == false) { checkbox2.checked = true; } }); checkbox2.addEventListener('change', function() { if (checkbox2.checked == false) { checkbox1.checked = true; } else if (checkbox2.checked == true) { checkbox1.checked = false; } }) document.removeEventListener('DataPageReady', mainF) } document.addEventListener('DataPageReady', mainF) } </script> Quote Link to comment Share on other sites More sharing options...
0 Ilyrian Posted November 14, 2022 Report Share Posted November 14, 2022 On 11/11/2022 at 2:46 AM, DRAhmed said: i have put this code in the footer but it doesnt seems to work after checking the box , the other box doesnt get unchecked <script type = "text/javascript" > if (typeof mainF == 'undefined') { const mainF = function(event) { var checkbox1 = document.getElementById('InsertRecordhandover') var checkbox2 = document.getElementById('InsertRecordapproved') var textfield1= document.getElementById('InsertRecordprocess_notes') if (checkbox1.checked == true) { checkbox2.checked = false; textfield1.value= " "; } else if (checkbox1.checked == false) { checkbox2.checked = true; } if (checkbox2.checked == false) { checkbox1.checked = true; } else if (checkbox2.checked == true) { checkbox1.checked = false; } checkbox1.addEventListener('change', function() { if (checkbox1.checked == true) { checkbox2.checked = false; textfield1.value= " "; } else if (checkbox1.checked == false) { checkbox2.checked = true; } }); checkbox2.addEventListener('change', function() { if (checkbox2.checked == false) { checkbox1.checked = true; } else if (checkbox2.checked == true) { checkbox1.checked = false; } }) document.removeEventListener('DataPageReady', mainF) } document.addEventListener('DataPageReady', mainF) } </script> I am not sure why it is not working. Here is the code I am using: Here is Deployed DP: https://c8cmr089.caspio.com/dp/02cab0002bcb175c66c546a79b27 <script type = "text/javascript" > if (typeof mainF == 'undefined') { const mainF = function(event) { var checkbox1 = document.getElementById('InsertRecordYesNo1') var checkbox2 = document.getElementById('InsertRecordYesNo2') var textfield1= document.getElementById('InsertRecordName') if (checkbox1.checked == true) { checkbox2.checked = false; textfield1.value= " "; } else if (checkbox1.checked == false) { checkbox2.checked = true; } if (checkbox2.checked == false) { checkbox1.checked = true; } else if (checkbox2.checked == true) { checkbox1.checked = false; } checkbox1.addEventListener('change', function() { if (checkbox1.checked == true) { checkbox2.checked = false; textfield1.value= " "; } else if (checkbox1.checked == false) { checkbox2.checked = true; } }); checkbox2.addEventListener('change', function() { if (checkbox2.checked == false) { checkbox1.checked = true; textfield1.value= " "; } else if (checkbox2.checked == true) { checkbox1.checked = false; } }) document.removeEventListener('DataPageReady', mainF) } document.addEventListener('DataPageReady', mainF) } </script> DRAhmed 1 Quote Link to comment Share on other sites More sharing options...
0 DRAhmed Posted November 14, 2022 Author Report Share Posted November 14, 2022 8 hours ago, RagnarIllyrian said: I am not sure why it is not working. Here is the code I am using: Here is Deployed DP: https://c8cmr089.caspio.com/dp/02cab0002bcb175c66c546a79b27 <script type = "text/javascript" > if (typeof mainF == 'undefined') { const mainF = function(event) { var checkbox1 = document.getElementById('InsertRecordYesNo1') var checkbox2 = document.getElementById('InsertRecordYesNo2') var textfield1= document.getElementById('InsertRecordName') if (checkbox1.checked == true) { checkbox2.checked = false; textfield1.value= " "; } else if (checkbox1.checked == false) { checkbox2.checked = true; } if (checkbox2.checked == false) { checkbox1.checked = true; } else if (checkbox2.checked == true) { checkbox1.checked = false; } checkbox1.addEventListener('change', function() { if (checkbox1.checked == true) { checkbox2.checked = false; textfield1.value= " "; } else if (checkbox1.checked == false) { checkbox2.checked = true; } }); checkbox2.addEventListener('change', function() { if (checkbox2.checked == false) { checkbox1.checked = true; textfield1.value= " "; } else if (checkbox2.checked == true) { checkbox1.checked = false; } }) document.removeEventListener('DataPageReady', mainF) } document.addEventListener('DataPageReady', mainF) } </script> take a look maybe you can notice something im doing wrong Quote Link to comment Share on other sites More sharing options...
0 DRAhmed Posted November 17, 2022 Author Report Share Posted November 17, 2022 On 11/15/2022 at 10:21 AM, RagnarIllyrian said: I can see that you are using Details DataPage. In this case change the following part of the code from: var checkbox1 = document.getElementById('InsertRecordhandover') var checkbox2 = document.getElementById('InsertRecordapproved') var textfield1= document.getElementById('InsertRecordprocess_notes') to this: var checkbox1 = document.getElementById('EditRecordhandover') var checkbox2 = document.getElementById('EditRecordapproved') var textfield1= document.getElementById('EditRecordprocess_notes') Also note that when using the Details DataPage, instead of Insert keyword, we should use Edit. Change also the naming of your fields accordingly. var checkbox1 = document.getElementById('EditRecordleft_egypt') var checkbox2 = document.getElementById('EditRecordfollow_checkbox') var textfield1= document.getElementById('EditRecordwhen_to_follow') thank you very much it worked Ilyrian 1 Quote Link to comment Share on other sites More sharing options...
Question
DRAhmed
how to make a checkbox get unchecked if another checkbox is checked
Link to comment
Share on other sites
8 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.