locked
Jquery div click multiple checkbox checked RRS feed

  • Question

  • User197255166 posted

    Hi,

    There is a div I want to do here. If two checkboxes are checked,

    I will hide the div. If 1 is not checked, I will give an alert.

    This is not exactly what I want

    <script>
        $(function () {
            $('#formopen').click(function ()
            {
                var checks = $("#chk1, #chk2");
                checks.click(function ()
                {
                    if (checks.filter(':checked').length == checks.length)
                    {
                        $('#formopen').hide();
                    }
                    else
                    {
                        $('#formopen').show();
                    }
                });
                alert("Accept form.!!");
            });
        });
    </script>

    Friday, July 17, 2020 1:37 PM

All replies

  • User197255166 posted

    Hi,

    I shared html and Jquery. Can anyone help me ?

      <div class="row tos" style="padding:10px 0px;">
                    <div class="tos-content">
                        @Html.Partial(preliminaryinformationformPartialView, Model.SalesAgreement)
                    </div>
                    <input type="checkbox" name="preliminaryinformationform" id="preliminaryinformationform" value="one" class="option-input radio" />
                    <label>
                        <span>@T("ShoppingCart.PreliminaryInformationForm.ReadAndAccepted")</span>
                    </label>
                </div>
                <div class="row tos" style="padding:10px 0px;">
                    <div class="tos-content">
                        @Html.Partial(salesAgreementPartialView, Model.SalesAgreement)
                    </div>
                    <input type="checkbox" name="salesagreement" id="salesagreement" value="two" class="option-input radio" />
                    <label>
                        <span>@T("ShoppingCart.SalesAgreement.ReadAndAccepted")</span>
                    </label>
                </div>

    Monday, July 20, 2020 5:20 AM
  • User288213138 posted

    Hi Aliyilmaz,

    Aliyilmaz

    There is a div I want to do here. If two checkboxes are checked,

    I will hide the div. If 1 is not checked, I will give an alert.

    In your html, I did not find the controls you used, such as "chk1", "chk2", "formopen", but I made a demo for you as a reference.

    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="../Scripts/jquery-3.4.1.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#btnCheck").click(function () {
                    if ($("#Checkbox1").prop('checked') == true && $("#Checkbox2").prop('checked') == true) {
                        $("#div1").hide();
                        return true;
                    }
                    else if ($("#Checkbox1").prop('checked') == true) {
    $("#div1").show(); alert("checkbox2 not checked"); } else if ($("#Checkbox2").prop('checked') == true) {
    $("#div1").show(); alert("checkbox1 not checked"); } else {
    $("#div1").show(); alert("checkbox1 and checkbox2 are not checked"); } }); }); </script> </head> <body> <div id="div1">This is a div</div> <input id="Checkbox1" type="checkbox">Checkbox1</input> <input id="Checkbox2" type="checkbox">Checkbox2</input> <input type="button" id="btnCheck" value="Check" /> </body> </html>

    The result:

    Best regards,

    Sam

    Monday, July 20, 2020 9:56 AM
  • User197255166 posted

    Hi,

    Can you help me below my code.  I wanna try div click on it has a div on it I want to show it hide.

     <div style="width:57%; height:600px; ; z-index: 1" id="formac"></div>
    
    <div id="checkout-form" class="responsive"></div>
    <script>
        $(function () {
          
            $('#formac').click("click",function () {
             
                    if ($("#preliminaryinformationform").prop('checked') == true && $("#salesagreement").prop('checked') == true) {
                        $('#formac').hide(); 
                        return true;
                    }
                    else if ($("#preliminaryinformationform").prop('checked') == true)
                    {
                        $("#formac").show();
                        alert("Lütfen Ön Bilgilendirme formunu işaretleyin");
                    }
                    else if ($("#salesagreement").prop('checked') == true) {
                        $("#formac").show();
                        alert("Mesafeli Satış Sözleşmesi formunu işaretleyin");
                    }      
                    
                    else {
                      $('#formac').show();                 
                        alert("Lütfen Ön Bilgilendirme formu ve Mesafeli Satış Sözleşmesi formunu kabul edin.!!");                
                       
                    }     
    
                //alert("Lütfen Ön Bilgilendirme formu ve Mesafeli Satış Sözleşmesi formunu kabul edin.!!");     
            });      
        });
    </script>

    Monday, July 20, 2020 10:13 AM
  • User-474980206 posted

    you logic makes little sense. you can only click on a visible div, so only the first test makes sense. if it does not work, then the id'd of the checkboxes are probably wrong.

    Monday, July 20, 2020 7:30 PM
  • User288213138 posted

    Hi Aliylmaz,

    Aliyilmaz

    Can you help me below my code.  I wanna try div click on it has a div on it I want to show it hide.

    I tested your code and then I found some problems. First of all, after you click on the formac div, why hide and shor this div?

    Do you want to click on the formac div or checkout-form div?

    And if you want to use the jquery selector to select checkout-form div, then this div must not contain the "-" character.

    I modified your code, when I click the checkoutform div, I will hide or show the div according to the checkbox. 

    It is recommended not to put the style in the div, which seems to affect the selected of the checkbox.You can put it alone in <style></style>.

    <input id="preliminaryinformationform" type="checkbox">preliminaryinformationform
        <input id="salesagreement" type="checkbox">salesagreement<br />
    
        <div id="formac">This is formac div</div><br />
    
        <div id="checkoutform" class="responsive">This is checkout-form div</div>
    
    
    <script>
            $(function () {
    
                $('#checkoutform').click("click", function () {
    
                    if ($("#preliminaryinformationform").prop('checked') == true && $("#salesagreement").prop('checked') == true) {
                        $('#formac').hide();
                        return true;
                    }
                    else if ($("#preliminaryinformationform").prop('checked') == true) {
                        $("#formac").show();
                        alert("Lütfen Ön Bilgilendirme formunu işaretleyin");
                    }
                    else if ($("#salesagreement").prop('checked') == true) {
                        $("#formac").show();
                        alert("Mesafeli Satış Sözleşmesi formunu işaretleyin");
                    }
    
                    else {
                        $('#formac').show();
                        alert("Lütfen Ön Bilgilendirme formu ve Mesafeli Satış Sözleşmesi formunu kabul edin.!!");
    
                    }
    
                });
            });
        </script>

    Best regards,

    Sam

    Tuesday, July 21, 2020 2:30 AM