CMS Development

st_ruangguru
メンバー

Is it possible to design an image after checkbox is checked

解決

check2.PNGcheck1.PNG

Is it possible for me to design that line after the checkbox is being checked? BTW the line is an image not a hr attribute

0 いいね!
1件の承認済みベストアンサー
tjoyce
解決策
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

Is it possible to design an image after checkbox is checked

解決

@st_ruangguru

You could put some logic in your HS embed code to maybe add an extra class to your line image. Something like: 

<div class="form">
        <!--[if lte IE 8]>
        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
        <![endif]-->
        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
        <script>
          hbspt.forms.create({
        	portalId: "",
        	formId: "c895652e-c44a-45bf-828a-bd94e2cf36bd",
        	css: "",
                onFormReady: function(form){
                    form.find("input[type='checkbox']").change(function() {
                        if(this.checked) {
                            $('.line').addClass('toggleChecked')
                        }else{
                            $('.line').removeClass('toggleChecked')
                        }
                    });
                }
        });
        </script>
      <img src="https://cdn2.hubspot.net/hubfs/2828691/Being%20Teacher%202018/PNG%20assets/line.png" class="line">
    </div>

Once you get that javascript working. You can use the css class that gets added to your image when the checkbox is checked to add more css to the line image

 


tim@belch.io | https://forms.belch.io

元の投稿で解決策を見る

0 いいね!
3件の返信
tjoyce
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

Is it possible to design an image after checkbox is checked

解決

@st_ruangguru

If the image is a direct sibling of the checkbox, then you can do it with css: 

input[type=checkbox]:checked + img {
    margin-top:50px;
}

If it's not a sibling, then you will need to do it with jQuery. If you give us a preview link to tinker with, we can give you the exact code you need to drop into your page. 

 

Here's what I mean by sibling:

<input type="checkbox">
<img src="someimage" />

And here's an example that is NOT a sibling:

<div>
     <input type="checkbox">
</div>
<img src="someimage" />

tim@belch.io | https://forms.belch.io

0 いいね!
st_ruangguru
メンバー

Is it possible to design an image after checkbox is checked

解決

 

@tjoyce sorry for late reply here is the code of what I am doing right now

<div class="form">
        <!--[if lte IE 8]>
        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
        <![endif]-->
        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
        <script>
          hbspt.forms.create({
        	portalId: "",
        	formId: "c895652e-c44a-45bf-828a-bd94e2cf36bd",
        	css: ""
        });
        </script>
      <img src="https://cdn2.hubspot.net/hubfs/2828691/Being%20Teacher%202018/PNG%20assets/line.png" class="line">
    </div>

 

Is this also count as a sibling?

 

0 いいね!
tjoyce
解決策
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

Is it possible to design an image after checkbox is checked

解決

@st_ruangguru

You could put some logic in your HS embed code to maybe add an extra class to your line image. Something like: 

<div class="form">
        <!--[if lte IE 8]>
        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
        <![endif]-->
        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
        <script>
          hbspt.forms.create({
        	portalId: "",
        	formId: "c895652e-c44a-45bf-828a-bd94e2cf36bd",
        	css: "",
                onFormReady: function(form){
                    form.find("input[type='checkbox']").change(function() {
                        if(this.checked) {
                            $('.line').addClass('toggleChecked')
                        }else{
                            $('.line').removeClass('toggleChecked')
                        }
                    });
                }
        });
        </script>
      <img src="https://cdn2.hubspot.net/hubfs/2828691/Being%20Teacher%202018/PNG%20assets/line.png" class="line">
    </div>

Once you get that javascript working. You can use the css class that gets added to your image when the checkbox is checked to add more css to the line image

 


tim@belch.io | https://forms.belch.io

0 いいね!