Good evening, is it possible to put an image in the checkbox? is it possible to make this image change when the checkbox is selected, make this image change when the mouse goes over it and make it back to normal when the checkbox goes unselected?
The code below is very large but you can only highlight the checkbox with images, I would like to make this image change when the checkbox is selected, and I would like to learn how to skip the checkbox square icon
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="alternate" type="application/json+oembed" href="https://www.jotform.com/oembed/?format=json&url=http%3A%2F%2Fwww.jotform.com%2Fform%2F61790563211957" title="oEmbed Form"><link rel="alternate" type="text/xml+oembed" href="https://www.jotform.com/oembed/?format=xml&url=http%3A%2F%2Fwww.jotform.com%2Fform%2F61790563211957" title="oEmbed Form">
<meta property="og:title" content="870637 - Counting the number of Checkboxes checked" >
<meta property="og:url" content="http://www.jotformpro.com/form/61790563211957" >
<meta property="og:description" content="Please click the link to complete this form.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="HandheldFriendly" content="true" />
<title>870637 - Counting the number of Checkboxes checked</title>
<link href="https://cdn.jotfor.ms/static/formCss.css?3.3.13962" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/css/styles/nova.css?3.3.13962" />
<link type="text/css" media="print" rel="stylesheet" href="https://cdn.jotfor.ms/css/printForm.css?3.3.13962" />
<style type="text/css">
.form-label-left{
width:150px !important;
}
.form-line{
padding-top:12px;
padding-bottom:12px;
}
.form-label-right{
width:150px !important;
}
body, html{
margin:0;
padding:0;
background:false;
}
.form-all{
margin:0px auto;
padding-top:20px;
width:650px;
color:#555 !important;
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;
font-size:14px;
}
.form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header{
color: #555;
}
</style>
<style type="text/css" id="form-designer-style">
/* Injected CSS Code */
em {
color:transparent;
}
/* Injected CSS Code */
</style>
<script src="https://cdn.jotfor.ms/static/prototype.forms.js"type="text/javascript"></script>
<script src="https://cdn.jotfor.ms/static/jotform.forms.js?3.3.13962"type="text/javascript"></script>
<script src="https://cdn.jotfor.ms/js/vendor/math-processor.js?v=3.3.13962"type="text/javascript"></script>
<script type="text/javascript">
JotForm.setCalculations([{"resultField":"3","operands":"1","readOnly":true,"showBeforeInput":false,"equation":"[|*|count|*|({1})]","decimalPlaces":"2","newCalculationType":"1","insertAsText":false,"showEmptyDecimals":false,"ignoreHiddenFields":false,"useCommasForDecimals":false}]);
JotForm.init(function(){
JotForm.clearFieldOnHide="disable";
JotForm.onSubmissionError="jumpToFirstError";
});
</script>
</head>
<body>
<form class="jotform-form" action="https://submit.jotformpro.com/submit/61790563211957/" method="post" name="form_61790563211957" id="61790563211957" accept-charset="utf-8">
<input type="hidden" name="formID" value="61790563211957" />
<div class="form-all">
<ul class="form-section page-section">
<li class="form-line" data-type="control_checkbox" id="id_1">
<label class="form-label form-label-left form-label-auto" id="label_1" for="input_1"> My Options </label>
<div id="cid_1" class="form-input jf-required">
<div class="form-single-column">
<span class="form-checkbox-item" style="clear:left;">
<span class="dragger-item">
</span>
<input type="checkbox" class="form-checkbox" id="input_1_0" name="q1_myOptions[]" value="<img src="http://goo.gl/Qa5Afb" width="100" alt="" /> - First" />
<label id="label_input_1_0" for="input_1_0">
<img src="http://goo.gl/Qa5Afb"width="100" alt="" />
- First
</label>
</span>
<span class="form-checkbox-item" style="clear:left;">
<span class="dragger-item">
</span>
<input type="checkbox" class="form-checkbox" id="input_1_1" name="q1_myOptions[]" value="<img src="http://goo.gl/5hltAw" width="100" alt="" /> - Second" />
<label id="label_input_1_1" for="input_1_1">
<img src="http://goo.gl/5hltAw"width="100" alt="" />
- Second
</label>
</span>
<span class="form-checkbox-item" style="clear:left;">
<span class="dragger-item">
</span>
<input type="checkbox" class="form-checkbox" id="input_1_2" name="q1_myOptions[]" value="<img src="http://goo.gl/OSv6hh" width="100" alt="" /> - Third" />
<label id="label_input_1_2" for="input_1_2">
<img src="http://goo.gl/OSv6hh"width="100" alt="" />
- Third
</label>
</span>
<span class="form-checkbox-item" style="clear:left;">
<span class="dragger-item">
</span>
<input type="checkbox" class="form-checkbox" id="input_1_3" name="q1_myOptions[]" value="<img src="http://goo.gl/nFYv1z" width="100" alt="" /> - Fourth" />
<label id="label_input_1_3" for="input_1_3">
<img src="http://goo.gl/nFYv1z"width="100" alt="" />
- Fourth
</label>
</span>
</div>
</div>
</li>
<li class="form-line" data-type="control_calculation" id="id_3">
<label class="form-label form-label-left form-label-auto" id="label_3" for="input_3"> How many were selected? </label>
<div id="cid_3" class="form-input jf-required">
<input type="text" defaultValue="0" class="form-textbox" data-type="input-textbox" id="input_3" name="q3_howMany" value="0" size="20" />
</div>
</li>
<li class="form-line" data-type="control_button" id="id_2">
<div id="cid_2" class="form-input-wide">
<div style="margin-left:156px" class="form-buttons-wrapper">
<button id="input_2" type="submit" class="form-submit-button">
Submit
</button>
</div>
</div>
</li>
<li style="display:none">
Should be Empty:
<input type="text" name="website" value="" />
</li>
</ul>
</div>
<input type="hidden" id="simple_spc" name="simple_spc" value="61790563211957" />
<script type="text/javascript">
document.getElementById("si" + "mple" + "_spc").value = "61790563211957-61790563211957";
</script>
</form></body>
</html>Thank you for helping me!