WP nonce field checkbox prints checked='checked' outside input field

Question

I'm currently creating a custom post type in wich I want to add some custom meta boxes. All the fields just go as expected excepting a checkbox field wich prints on the html checked='checked' after echoing the hidden field and I don't know why. I've tried not echoing the value or the referer but still happens. This is my code:

  //Add Zoom Activity Status
     add_meta_box(
         'zact_zoom_activity_state',   
         'Zoom Activity Comming Soon',           
         'zact_zoom_activity_status',  
         'zoom-activity',                  
         'advanced',
         'core'
     );
 
     function zact_zoom_activity_status () 
     {
         global $post;
         // Get the location data if it's already been entered
         $zoom_activity_state = get_post_meta( $post->ID, 'zoom_activity_state', true );
 
        // Nonce field to validate form request came from current site
        wp_nonce_field( plugin_basename(__FILE__),'zoom_room_state') ;
 
 
         // Output the field
         echo '<lable for="zoom_activity_state"> <input type="checkbox" name="zoom_activity_state" value="' . $zoom_activity_state . '" class="widefat" ' . checked($zoom_activity_state)  . '/> Is comming soon?</lable>';
     }

This is the unwanted result I'm getting:

This is the saving code:

// Verify this came from the our screen and with proper authorization,
// because save_post can be triggered at other times. The checked value is being retrived from the nonce name field.
if ( ! isset( $_POST['zoom_room_state'] ) || ! wp_verify_nonce( $_POST['zoom_room_state'], plugin_basename(__FILE__) ) ) 
{
    return $post_id;
}
// If the field is a checkbox we need to check if the value is not null and assing a boolean value to be compared when setting the status.
if( isset( $_POST['zoom_activity_state'] )) 
{
    $zoom_activity_meta['zoom_activity_state']              = true;
}
else 
{
    $zoom_activity_meta['zoom_activity_state']              = false;

}// Cycle through the zoom_activity_meta array. // Note, in this example we just have one item, but this is helpful if you have multiple. foreach ( $zoom_activity_meta as $key => $value ) :

    // Don't store custom data twice
    if ( 'revision' === $post->post_type ) {
        return;
    }

    if ( get_post_meta( $post_id, $key, true ) ) {
        // If the custom field already has a value, update it.
        update_post_meta( $post_id, $key, $value );
    } else {
        // If the custom field doesn't have a value, add it.
        add_post_meta( $post_id, $key, $value);
    }

    if ( ! $value ) {
        // Delete the meta key if there's no value
        delete_post_meta( $post_id, $key );
    }

endforeach;

I don't know exaclty what I'm doing wrong. I've checked wordpress documentation and other articles in the internet but nothing clear comes out to this respect. Any clue? Thanks!.

Answer 1

This is because you have used the checked() function, which echoes its value, inside another echo statement. If you are adding a value to a string you need the function to return a value. This can be done by setting the third argument, $echo, to false:

echo '<lable for="zoom_activity_state"> <input type="checkbox" name="zoom_activity_state" value="' . $zoom_activity_state . '" class="widefat" ' . checked($zoom_activity_state, true, false)  . '/> Is comming soon?</lable>';

You've also spelt <label> incorrectly:

echo '<label for="zoom_activity_state"> <input type="checkbox" name="zoom_activity_state" value="' . $zoom_activity_state . '" class="widefat" ' . checked($zoom_activity_state, true, false)  . '/> Is comming soon?</label>';