Check if checkbox is checked without clicking it - Woocommerce

user2059376
March 10, 2021
153 views
2 votes
3 Answers

I have a input checkbox that has been modified to be buttons one for approve one for reject when approved is selected it checks the box etc. Once selected a third button save submits. If I check the box without using the buttons my script works but then I loose other functionality already associated with the buttons.

The code below is based on Update order status via AJAX in WooCommerce Order received page

How can I listen and detect if the checkbox has been selected even it was checked by selecting the button and not the actual checkbox.

$(document).ready(function() {
    $(".wcfa-save-button").click(function() {
                if ($("input[type=checkbox]").is(":checked").length > 0) {

            alert("Check box is Checked");


            $('button.wcfa-save-button').click(function(e) {
                e.preventDefault();

                $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    url: "woocommerce_params.ajax_url",
                    data: {
                        'action': 'redeem_complete',
                        'order_id': orerId, // Here we send the order Id
                    },
                    success: function(response) {
                        $('.response').text("Order data successfully fetched.");
                        console.log("Order data successfully fetched.");
                    }
                });
            });

        } else {
            alert("Check box is Unchecked");
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="wcfa-attachment" class="wcfa-hidden" id="wcfa-approved-result" data-id="attachmentID">

<button id="wcfa-approve-button-ID" class="button wcfa-approve-button" data-approval="approved" data-id="attachmentID">Approve</a>
<button id="wcfa-reject-button-attachmentID" class="button wcfa-reject-button" data-approval="rejected" data-id="attachmentID">Reject</a>
<button class="button wcfa-save-button wcfa-disable-during-transition" data-id="attachmentID">Save</button>

Update Was unable to target the checkbox, ended up checking if the approve button .hasClass of wcfa-approve-active-button then sending the submit

  $('button.wcfa-save-button').click( function(e){
        e.preventDefault();

    if ( $('.wcfa-approve-button').hasClass('wcfa-approve-active-button')) {
                    alert("Check box in Checked"); 
                    console.log("Checkbox is Checked");

Answers

You cab check if the checkbox is checked or not using "length", you can do something like below:

$(document).ready(function() {
    function checkIfChecked(){
        if ($("input[type=checkbox]").is(":checked").length > 0) {
            alert("Check box is Checked");


            $('button.wcfa-save-button').click(function(e) {
                e.preventDefault();

                $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    url: "woocommerce_params.ajax_url",
                    data: {
                        'action': 'redeem_complete',
                        'order_id': orerId, // Here we send the order Id
                    },
                    success: function(response) {
                        $('.response').text("Order data successfully fetched.");
                        console.log("Order data successfully fetched.");
                    }
                });
            });

        } else {
            alert("Check box is Unchecked");
        }
    });
});

As this is related to WordPress (WooCommerce) you need to start by jQuery first… Then the following will detect if your checkbox is checked or not (on start and on change)…

Here is the revisited code:

<script>
jQuery(function($) {
    // On start
    if ( $('input[name="wcfa-attachment"]').is(":checked") ) {
        console.log("Start: Checkbox is Checked");
    } else {
        console.log("Start: Checkbox NOT Checked");
    }
    
    // On change
    $('input[name="wcfa-attachment"]').on('change', function(){

        if ( $(this).is(":checked") ) {
            console.log("Checkbox is Checked");

            $('button.wcfa-save-button').click(function(e) {
                e.preventDefault();

                if (typeof woocommerce_params === 'undefined')
                    return false;
                    
                var orderId = 858; // Set an existing order ID or a dynamic variable with php

                $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    url: "woocommerce_params.ajax_url",
                    data: {
                        'action': 'redeem_complete',
                        'order_id': orderId, // Here we send the order Id
                    },
                    success: function(response) {
                        $('.response').text("Order data successfully fetched.");
                        console.log("Order data successfully fetched.");
                    }
                });
            });

        } else {
            console.log("Checkbox NOT Checked");
        }
    });
});
</script>
<input type="checkbox" name="wcfa-attachment" class="wcfa-hidden" id="wcfa-approved-result" data-id="attachmentID" />
<button id="wcfa-approve-button-ID" class="button wcfa-approve-button" data-approval="approved" data-id="attachmentID">Approve</button>
<button id="wcfa-reject-button-attachmentID" class="button wcfa-reject-button" data-approval="rejected" data-id="attachmentID">Reject</button>
<button class="button wcfa-save-button wcfa-disable-during-transition" data-id="attachmentID">Save</button>

Tested and works.

a) one set of click listener for checkbox, approve & reject button

b) second click listener for save which checks checkbox state and fires ajax

$(document).ready(function() { 
  $("input[type=checkbox], .wcfa-approve-button, .wcfa-reject-button").click(function(){
    const identifier = $(this).attr('data-identifier');

    switch (identifier) {
      case 'btn-approve': 
        alert('Approve Clicked');
        $("input[type=checkbox]").prop("checked",true); 
        break;
      case 'btn-reject': 
        alert('Reject Clicked');
        $("input[type=checkbox]").prop("checked",false); break;
      case 'checkbox': 
        alert('Checkbox Clicked');
        let isChecked = $("input[type=checkbox]:checked").length > 0;
        $("input[type=checkbox]").prop("checked", isChecked); 
        break;
    }
  });

  $("button.wcfa-save-button").click(function(e) {
    e.preventDefault();
    alert('Save Clicked');

    if ($("input[type=checkbox]").is(":checked")) {
      alert("Check box is Checked");

      $.ajax({
        type: "POST",
        dataType: "json",
        url: "woocommerce_params.ajax_url",
        data: {
          action: "redeem_complete",
          order_id: 'orerId' // Here we send the order Id
        },
        success: function(response) {
          $(".response").text("Order data successfully fetched.");
          console.log("Order data successfully fetched.");
        }
      });
    } else {
      alert("Check box is Unchecked");
    }
  });
});

Stackblitz link – https://stackblitz.com/edit/jquery-1mn3mr?file=index.html

Please signup or login to give your own answer.

Click here to cancel reply.

Check if checkbox is checked without clicking it – Woocommerce

Answers