Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 27, 2021 at 4:26 pm #1307605
    FlatText

    Hello, I’m trying to get certain divs to show when a checkbox option is selected.

    For example, checkbox has Option 1, Option 2, Option 3.
    If Option 1 only is checked, display div “Text 1”, everything else is hidden
    If option 2 only is checked, display div “Text 2”, everything else is hidden
    If Option 1 AND 2 are checked, display div “Combo 1”, everything else is hidden
    If Optino 1 AND 3 are checked, display div “Combo 2”, everything else is hidden etc

    If any checkbox is un-checked or checked more than once, the end results should not diplicate or hide

    I’ve had a go myself: https://jsfiddle.net/Lj2gbu8h/

    But I think I’m missing the syntax knowledge to complete this. Any help would be appreciated.

    June 30, 2021 at 7:26 am #1308039
    Ismael

    Hey FlatText,

    Thank you for the inquiry.

    We edited the html and the javascript or jQuery script a bit, then add a few css code to hide the option initially.

    jQuery:

    $(".ywapo_input_container_checkbox").on("click", function() {
	var checked = $(this).find("input").is(":checked");
	var option = "." + $(this).find(".ywapo_option_label").text().toLowerCase();

	if(checked) {
		$(option).toggle();
	} else {
		$(option).css("display", "none");
	}
});

    HTML:

    
-- checkboxes here --
<div class="ywapo-option">
    <p class="breakfast">Breakfast</p>
    <p class="lunch">Lunch</p>
    <p class="dinner">Dinner</p>
</div>

    CSS:

    .ywapo-option p {
    display: none;
}

    We are not sure if this fiddle link is going to expire, so we added the changes above.

    // https://jsfiddle.net/zmy8xuf0/15/

    Best regards,
    Ismael

    June 30, 2021 at 1:48 pm #1308127
    FlatText

    Hi Ismael,

    Thank you so much for following up on this, but I think I didn’t explain myself better.

    When Breakfast AND Lunch are selected, I want a 4th option to be displayed and ‘Breakfast’, ‘Lunch’ hidden. I added to the fiddle the categories I’m hoping to 

    <div class="ywapo-option">
    <p class="breakfast">Breakfast only</p>
    <p class="lunch">Lunch only</p>
    <p class="dinner">Dinner only</p>
    <p class="Breakfast-Lunch">Breakfast and Lunch</p>
    <p class="Breakfast-Dinner">Breakfast and Dinner</p>
    <p class="BLunch-Dinner">Lunch and Dinner</p>
    <p class="Breakfast-Lunch">All 3 meals</p>
 </div>

    https://jsfiddle.net/t0f8uwon/

    Again, any help or guidance is appreciated.

    July 5, 2021 at 7:47 am #1308708
    Ismael

    Hi,

    You can add more condition above such as checking if breakfast and lunch are :checked and if it is show breakfast-lunch. If all of the checkbox are checked, toggle breakfast-lunch-dinner. You could add the conditions in this block.

    if(checked) {
		$(option).toggle();
	} else {
		$(option).css("display", "none");
	}

    Best regards,
    Ismael

    July 5, 2021 at 1:44 pm #1308782
    FlatText

    Thanks Ismael, figured it out with a lot of help. As you said, it looks something like this

        // for breakfast
    jQuery("#ywapo_ctrl_id_173_0").change(function(){
        
        if( jQuery("#ywapo_ctrl_id_173_0").is(":checked") && jQuery("#ywapo_ctrl_id_173_1").is(":checked") )

    On another note, I used this code to change the date-picker behaviour previously on a form. Can’t get it to work on this date-picker though (#ywapo_ctrl_id_167_0 on the mainpage, same meal section).

    This is the code that worked before on another form with Gravity Forms.

    jQuery(document).ready(function($) {
$( "#ywapo_ctrl_id_167_0 " ).datepicker({ firstDay: 1, defaultDate: '+0d', minDate: '+2d', maxDate: '+2y', gotoCurrent: true, prevText: '', nextText: '', showOn: 'both', dateFormat: 'dd/mm/yy', buttonImage: '../wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: false});
});

    Any reason?

    • This reply was modified 3 years, 4 months ago by FlatText.
    July 7, 2021 at 9:26 am #1309061
    Ismael

    Hi,

    It is possible that the form is using a different date picker script or library. You have to contact the plugin or script authors regarding this issue as it is beyond the scope of support.

    Thank you for your understanding.

    Best regards,
    Ismael

    July 9, 2021 at 6:16 pm #1309427
    FlatText

    Thank you for your advice and time, Ismael. Much appreciated. You can close this thread.

    July 10, 2021 at 1:05 am #1309446
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Hiding/showing div(s) when checkbox(es) are selelcted’ is closed to new replies.