Home>

Thank you for browsing.

As the title says, I want to "change the image" after checking 3 or more checkboxes.
I'm struggling because it doesn't work.
I would be grateful if you could give me some advice.

[Details of what I want to do]
If i check the three check boxes of the prepared questionnaire with the questionnaire type LP
I would like to skip to the link destination of the campaign, and I would like to implement the following.

1: Change image (from colorless to color)
2: Grant of link destination

2 was successful.
However, 1 will change to color if you check 3 or more,
Even if the check is reduced to 3 or less after the change, it does not return to the original colorless image.

If i modify the following content or have any other code ideas
Please point out.

Thank you.

Corresponding source code
<label><input type = "checkbox">checkbox 1</label>
<label><input type = "checkbox">checkbox 1</label>
<label><input type = "checkbox">checkbox 1</label>


$(function () {
  $("input [type ='checkbox']"). on ('change', function () {
    $('# btn'). each (function () {
      var src_off = $('# btn'). find ('img'). Attr ('src');
      var src_on = src_off.replace ('_off','_on');
      $(''). Attr ('src', src_on);
      // Checked 3 or more checkboxes
      if ($(". checkbox: checked"). length>2) {
      // Button enabled
        $('# btn'). find ('img'). Attr ('src', src_on);
        $('# btn'). Wrap (
          $(' '). Attr ({href: "https://www.google.com/?hl=ja", target: "_blank"})
        );
      } else {
      // Button disabled
        $('# btn'). find ('img'). Attr ('src', src_off);
        $('# btn'). unwrap ();
      }
    });
  });
});
Supplementary information (FW/tool version, etc.)

jquery version 3.4.1

  • Answer # 1

    The following code at the beginning$(function () {Try moving it directly below.

        var src_off = $('# btn'). find ('img'). Attr ('src');
          var src_on = src_off.replace ('_off','_on');

    Also, the following parts are unnecessary. Let's delete it with the closing tag. Since there is only one id in the first place,each eachIt's strange to loop with.

    $('# btn'). each (function () {