+ Start a Discussion
ksmoksmo 

when checkbox is checked show popup and whne unchecked show different popup

I want the dialog popup to display only when the checkbox is checked, but this code displys when checked and unchecked. I want a different pop up for uncheck..How do I write that script?
checkbox code
<input id="showprompt" type="checkbox" name="CO_BRAND" value="cobrand"  onclick="ShowPrompt()" /> 

Javascript Code

<script>
    
var checkmodal = document.getElementById('checkboxModal');
var btn = document.getElementById("showprompt");
var span = document.getElementsByClassName("checkboxclose")[0];


function ShowPrompt()

{
  checkmodal.style.display = "block";
  
}

span.onclick = function() {
    checkmodal.style.display = "none";
}

window.onclick = function(event) {
    if (event.target == modal) {
        checkmodal.style.display = "none";
    }
}
Best Answer chosen by ksmo
SaketJoshiSaketJoshi
You can get whether the checkbox is checked or not and then modify the logic in your JS function to match your needs. This will get you whether the checkbox is checked or not -
<input id="showprompt" type="checkbox" name="CO_BRAND" value="cobrand"  onclick="ShowPrompt(this.checked)" />

function ShowPrompt(isChecked) {
    // isChecked will have boolean value if the checkbox is checked or not
}

 

All Answers

SaketJoshiSaketJoshi
You can get whether the checkbox is checked or not and then modify the logic in your JS function to match your needs. This will get you whether the checkbox is checked or not -
<input id="showprompt" type="checkbox" name="CO_BRAND" value="cobrand"  onclick="ShowPrompt(this.checked)" />

function ShowPrompt(isChecked) {
    // isChecked will have boolean value if the checkbox is checked or not
}

 
This was selected as the best answer
VivekShindeVivekShinde
You can write the below mentioned code in the showPrompt method:
function showPrompt() {
    if(document.getElementById("showprompt").checked) {
        //show the modal you want to show if the checkbox is checked
        //hide the modal you want to hide if the checkbox is checked
    }
    else {
        //show the modal you want to show if the checkbox is unchecked
        //hide the modal you want to hide if the checkbox is unchecked
    }
}
Thanks,
Vivek Shinde
ksmoksmo
Hi SaketJoshi,


It worked!


<input id="showprompt" type="checkbox" name="Name" value="Name"onclick="ShowPrompt(this.checked)" />
function ShowPrompt(isChecked) {
if(isChecked==true){
}
}

 
ksmoksmo
The onclick should only work based on a if condition like

<input id="showprompt" type="checkbox" name="Name" value="Name "onclick="if({!item.name='test'),ShowPrompt(this.checked)" />

I want the correct syntax