How to change the default selection of checkbox in source code?

Hello, how do I change the default checkbox selection in the source code? I know how to do it via the form builder but just looking at the offline source code, how can I change default selection without having to go through the website?

The reason I need to know this is I want to have the same form in different locations with a different default selection and dont want to duplicate the same form each time.

Thanks!

You mean to change the color/shape of this:

You should be able to change it with some CSS, for example, I found this useful guide: https://stackoverflow.com/questions/27417398/how-to-change-the-checked-mark-color-of-a-checkbox-in-html

And related JsFiddle: http://jsfiddle.net/5g3w32ug/

Please check and let us know if you have any further questions.

Thank you!

Sorry, let me clarify. I want to edit the default selection. EG when you view the form, one of the options is already selected by default. I want to be able to change that default selection from my course code. Thanks.

Thank you for providing the additional information and sorry for the misunderstanding.

You could simply add "checked" in HTML of the checkbox input, for example:

<input type="checkbox" name="vehicle" value="Test" checked> Test<br>

Here is the live code: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_checked

Checked parameter will set the checkbox button checked by default.

Let us know if you have any further questions.

Thank you!

Thanks for the input, not sure how that would go with the source code that was given to me by jotform though. This is what they have provided to me below.

<script src="https://js.stripe.com/v1/" type="text/javascript"></script>
<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.1602" type="text/javascript"></script>
<script src="https://cdn.jotfor.ms/js/stripe.js?v=3.3.1602" type="text/javascript"></script>
<script type="text/javascript"> JotForm.init(function(){ productID = {"0":"input_5_1000","1":"input_5_1001"}; paymentType = "product"; JotForm.setCurrencyFormat('USD',true, 'point'); JotForm.totalCounter({"input_5_1000":{"price":"395"},"input_5_1001":{"price":"0"}}); $$('.form-product-custom_quantity').each(function(el, i){el.observe('blur', function(){isNaN(this.value) || this.value < 1 ? this.value = '0' : this.value})}); $$('.form-product-custom_quantity').each(function(el, i){el.observe('focus', function(){this.value == 0 ? this.value = '' : this.value})}); JotForm.setStripeSettings('', 'none'); JotForm.alterTexts({"alphabetic":"This field can only contain letters","alphanumeric":"This field can only contain letters and numbers.","ccDonationMinLimitError":"Minimum amount is {minAmount} {currency}","ccInvalidCVC":"CVC number is invalid.","ccInvalidExpireDate":"Expire date is invalid.","ccInvalidNumber":"Credit Card Number is invalid.","ccMissingDetails":"Please fill up the Credit Card details.","ccMissingDonation":"Please enter numeric values for donation amount.","ccMissingProduct":"Please select at least one product.","characterLimitError":"Too many Characters. The limit is","characterMinLimitError":"Too few characters. The minimum is","confirmClearForm":"Are you sure you want to clear the form?","confirmEmail":"E-mail does not match","currency":"This field can only contain currency values.","cyrillic":"This field can only contain cyrillic characters","dateInvalid":"This date is not valid. The date format is {format}","dateInvalidSeparate":"This date is not valid. Enter a valid {element}.","dateLimited":"This date is unavailable.","disallowDecimals":"Please enter a whole number.","email":"Enter a valid e-mail address","fillMask":"Field value must fill mask.","freeEmailError":"Free email accounts are not allowed","generalError":"There are errors on the form. Please fix them before continuing.","generalPageError":"There are errors on this page. Please fix them before continuing.","gradingScoreError":"Score total should only be less than or equal to","incompleteFields":"There are incomplete required fields. Please complete them.","inputCarretErrorA":"Input should not be less than the minimum value:","inputCarretErrorB":"Input should not be greater than the maximum value:","lessThan":"Your score should be less than or equal to","maxDigitsError":"The maximum digits allowed is","maxSelectionsError":"The maximum number of selections allowed is","minSelectionsError":"The minimum required number of selections is","multipleFileUploads_emptyError":"{file} is empty, please select files again without it.","multipleFileUploads_fileLimitError":"Only {fileLimit} file uploads allowed.","multipleFileUploads_minSizeError":"{file} is too small, minimum file size is {minSizeLimit}.","multipleFileUploads_onLeave":"The files are being uploaded, if you leave now the upload will be cancelled.","multipleFileUploads_sizeError":"{file} is too large, maximum file size is {sizeLimit}.","multipleFileUploads_typeError":"{file} has invalid extension. Only {extensions} are allowed.","nextButtonText":"Next","numeric":"This field can only contain numeric values","pastDatesDisallowed":"Date must not be in the past.","pleaseWait":"Please wait...","prevButtonText":"Previous","required":"This field is required.","requireEveryCell":"Every cell is required.","requireEveryRow":"Every row is required.","requireOne":"At least one field required.","submissionLimit":"Sorry! Only one entry is allowed. Multiple submissions are disabled for this form.","submitButtonText":"Submit","uploadExtensions":"You can only upload following files:","uploadFilesize":"File size cannot be bigger than:","uploadFilesizemin":"File size cannot be smaller than:","url":"This field can only contain a valid URL","wordLimitError":"Too many words. The limit is","wordMinLimitError":"Too few words. The minimum is"}); JotForm.alterTexts({"couponApply":"Apply","couponBlank":"Please enter a coupon.","couponChange":"","couponEnter":"Enter coupon","couponExpired":"Coupon is expired. Please try another one.","couponInvalid":"Coupon is invalid.","couponValid":"Coupon is valid.","shippingShipping":"Shipping:","taxTax":"Tax:","totalSubTotal":"Subtotal:","totalTotal":"Total:"}, true); JotForm.clearFieldOnHide="disable"; JotForm.submitError="jumpToFirstError"; /*INIT-END*/
}); JotForm.prepareCalculationsOnTheFly([null,{"name":"purchaseCourse","qid":"1","text":"Purchase Course Training","type":"control_head"},{"name":"submit2","qid":"2","text":"Submit","type":"control_button"},{"name":"name","qid":"3","text":"Name","type":"control_fullname"},{"name":"phoneNumber","qid":"4","text":"Phone Number","type":"control_phone"},{"name":"myProducts","qid":"5","text":"My Products","type":"control_stripe"}]); setTimeout(function() {
JotForm.paymentExtrasOnTheFly([null,{"name":"purchaseCourse","qid":"1","text":"Purchase Course Training","type":"control_head"},{"name":"submit2","qid":"2","text":"Submit","type":"control_button"},{"name":"name","qid":"3","text":"Name","type":"control_fullname"},{"name":"phoneNumber","qid":"4","text":"Phone Number","type":"control_phone"},{"name":"myProducts","qid":"5","text":"My Products","type":"control_stripe"}]);}, 20); </script>
<link href="https://cdn.jotfor.ms/static/formCss.css?3.3.1602" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/css/styles/nova.css?3.3.1602" />
<link type="text/css" media="print" rel="stylesheet" href="https://cdn.jotfor.ms/css/printForm.css?3.3.1602" />
<link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/themes/CSS/566a91c2977cdfcd478b4567.css?"/>
<style type="text/css"> .form-label-left{ width:150px; } .form-line{ padding-top:12px; padding-bottom:12px; } .form-label-right{ width:150px; } .form-all{ width:690px; color:#555 !important; font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif; font-size:14px; }
</style> <style type="text/css" id="form-designer-style"> /* Injected CSS Code */
.form-label.form-label-auto { display: block; float: none; text-align: left; width: inherit; } /*PREFERENCES STYLE*/ .form-all { font-family: Lucida Grande, sans-serif; } .form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print { font-family: Lucida Grande, sans-serif; } .form-all .form-pagebreak-back-container, .form-all .form-pagebreak-next-container { font-family: Lucida Grande, sans-serif; } .form-header-group { font-family: Lucida Grande, sans-serif; } .form-label { font-family: Lucida Grande, sans-serif; } .form-label.form-label-auto { display: block; float: none; text-align: left; width: 100%; } .form-line { margin-top: 12px; margin-bottom: 12px; } .form-all { width: 690px; } .form-label-left, .form-label-right { width: 150px } .form-all { font-size: 14px } .form-all .qq-upload-button, .form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print { font-size: 14px } .form-all .form-pagebreak-back-container, .form-all .form-pagebreak-next-container { font-size: 14px } .supernova .form-all, .form-all { background-color: #fff; border: 1px solid transparent; } .form-all { color: #555; } .form-header-group .form-header { color: #555; } .form-header-group .form-subHeader { color: #555; } .form-label-top, .form-label-left, .form-label-right, .form-html, .form-checkbox-item label, .form-radio-item label { color: #555; } .form-sub-label { color: #6f6f6f; } .supernova { background-color: #f5f5f5; } .supernova body { background: transparent; } .form-textbox, .form-textarea, .form-radio-other-input, .form-checkbox-other-input, .form-captcha input, .form-spinner input { background-color: #fff; } .supernova { background-image: none; } #stage { background-image: none; } .form-all { background-image: none; } .form-all { position: relative; } .form-all:before { content: ""; background-image: url("https://www.jotform.com/uploads/theregistrarco/form_files/trc-logo-main.395.png"); display: inline-block; height: 106px; position: absolute; background-size: 216px 106px; background-repeat: no-repeat; width: 100%; } .form-all { margin-top: 116px !important; } .form-all:before { top: -116px; left: 0; background-position: top left; } .ie-8 .form-all:before { display: none; } .ie-8 { margin-top: auto; margin-top: initial; } /*PREFERENCES STYLE*//*__INSPECT_SEPERATOR__*/ /* Injected CSS Code */
</style> <form class="jotform-form" action="https://submit.jotform.ca/submit/72535083316252/" method="post" name="form_72535083316252" id="72535083316252" accept-charset="utf-8"> <input type="hidden" name="formID" value="72535083316252" /> <div class="form-all"> <ul class="form-section page-section"> <li id="cid_1" class="form-input-wide" data-type="control_head"> <div class="form-header-group "> <div class="header-text httal htvam"> <h3 id="header_1" class="form-header" data-component="header"> Purchase Course Training </h3> <div id="subHeader_1" class="form-subHeader"> Payment Portal </div> </div> </div> </li> <li class="form-line" data-type="control_fullname" id="id_3"> <label class="form-label form-label-top form-label-auto" id="label_3" for="first_3"> Name </label> <div id="cid_3" class="form-input-wide jf-required"> <div data-wrapper-react="true"> <span class="form-sub-label-container" style="vertical-align:top;"> <input type="text" id="first_3" name="q3_name[first]" class="form-textbox" size="10" value="" data-component="first" /> <label class="form-sub-label" for="first_3" id="sublabel_first" style="min-height:13px;"> First Name </label> </span> <span class="form-sub-label-container" style="vertical-align:top;"> <input type="text" id="last_3" name="q3_name[last]" class="form-textbox" size="15" value="" data-component="last" /> <label class="form-sub-label" for="last_3" id="sublabel_last" style="min-height:13px;"> Last Name </label> </span> </div> </div> </li> <li class="form-line" data-type="control_phone" id="id_4"> <label class="form-label form-label-top form-label-auto" id="label_4" for="input_4_area"> Phone Number </label> <div id="cid_4" class="form-input-wide jf-required"> <div data-wrapper-react="true"> <span class="form-sub-label-container" style="vertical-align:top;"> <input type="tel" id="input_4_area" name="q4_phoneNumber[area]" class="form-textbox" size="3" value="" data-component="areaCode" /> <span class="phone-separate"> - </span> <label class="form-sub-label" for="input_4_area" id="sublabel_area" style="min-height:13px;"> Area Code </label> </span> <span class="form-sub-label-container" style="vertical-align:top;"> <input type="tel" id="input_4_phone" name="q4_phoneNumber[phone]" class="form-textbox" size="8" value="" data-component="phone" /> <label class="form-sub-label" for="input_4_phone" id="sublabel_phone" style="min-height:13px;"> Phone Number </label> </span> </div> </div> </li> <li class="form-line" data-type="control_stripe" id="id_5"> <label class="form-label form-label-top form-label-auto" id="label_5" for="input_5"> My Products </label> <div id="cid_5" class="form-input-wide jf-required"> <div data-wrapper-react="true"> <div data-wrapper-react="true"> <input type="hidden" name="simple_fpc" data-payment_type="stripe" data-component="payment1" value="5" /> <input type="hidden" name="payment_total_checksum" id="payment_total_checksum" data-component="payment2" /> <div data-wrapper-react="true"> <input type="hidden" id="payment_enable_lightbox" /> <span class="form-product-item hover-product-item"> <div data-wrapper-react="true" class="form-product-item-detail"> <input class="form-checkbox " type="checkbox" id="input_5_1000" name="q5_myProducts[][id]" value="1000" /> <label for="input_5_1000" class="form-product-container"> <span data-wrapper-react="true"> <span class="form-product-name" id="product-name-input_5_1000"> ISO 9001:2015 Awareness (Texas) </span> <span class="form-product-details"> <b> <span data-wrapper-react="true"> $ <span id="input_5_1000_price"> 395.00 </span> </span> </b> </span> </span> </label> </div> </span> <br/> <span class="form-product-item hover-product-item"> <div data-wrapper-react="true" class="form-product-item-detail"> <input class="form-checkbox " type="checkbox" id="input_5_1001" name="q5_myProducts[][id]" value="1001" checked="" /> <label for="input_5_1001" class="form-product-container"> <span data-wrapper-react="true"> <span class="form-product-name" id="product-name-input_5_1001"> product 2 </span> <span class="form-product-details"> <b> <span data-wrapper-react="true"> <span class="freeCurr" style="display:none;"> $ </span> <span id="input_5_1001_price"> Free </span> <span class="freeCurr" style="display:none;"> </span> </span> </b> </span> </span> </label> </div> </span> <br/> <span class="form-payment-total"> <b> <span id="total-text"> Total: </span> <span class="form-payment-price"> <span data-wrapper-react="true"> $ <span id="payment_total"> 0.00 </span> </span> </span> </b> </span> </div> <hr/> </div> <table class="form-address-table payment-form-table" cellpadding="0" cellspacing="0"> <tbody> <tr> <th colspan="2" style="text-align:left;margin-top:20px;display:table;" id="ccTitle5"> Credit Card Details </th> </tr> <tr> <td width="50%"> <span class="form-sub-label-container" style="vertical-align:top;"> <label class="form-sub-label" for="input_5_cc_firstName" id="sublabel_cc_firstName" style="min-height:13px;margin:0 0 3px 0;"> First Name </label> <input type="text" id="input_5_cc_firstName" name="q5_myProducts[cc_firstName]" class="form-textbox cc_firstName" size="20" value="" data-component="cc_firstName" /> </span> </td> <td width="50%"> <span class="form-sub-label-container" style="vertical-align:top;"> <label class="form-sub-label" for="input_5_cc_lastName" id="sublabel_cc_lastName" style="min-height:13px;margin:0 0 3px 0;"> Last Name </label> <input type="text" id="input_5_cc_lastName" name="q5_myProducts[cc_lastName]" class="form-textbox cc_lastName" size="20" value="" data-component="cc_lastName" /> </span> </td> </tr> <tr> <td width="50%"> <span class="form-sub-label-container" style="vertical-align:top;"> <label class="form-sub-label" for="input_5_cc_number" id="sublabel_cc_number" style="min-height:13px;margin:0 0 3px 0;"> Credit Card Number </label> <input type="number" id="input_5_cc_number" name="q5_myProducts[cc_number]" class="form-textbox cc_number" autocomplete="off" size="20" value="" data-component="cc_number" /> </span> </td> <td width="50%"> <span class="form-sub-label-container" style="vertical-align:top;"> <label class="form-sub-label" for="input_5_cc_ccv" id="sublabel_cc_ccv" style="min-height:13px;margin:0 0 3px 0;"> Security Code </label> <input type="number" id="input_5_cc_ccv" name="q5_myProducts[cc_ccv]" class="form-textbox cc_ccv" autocomplete="off" style="width:52px;" value="" data-component="cc_ccv" /> </span> </td> </tr> <tr> <td width="50%"> <span class="form-sub-label-container" style="vertical-align:top;"> <label class="form-sub-label" for="input_5_cc_exp_month" id="sublabel_cc_exp_month" style="min-height:13px;margin:0 0 3px 0;"> Expiration Month </label> <select class="form-dropdown cc_exp_month" name="q5_myProducts[cc_exp_month]" id="input_5_cc_exp_month" data-component="cc_exp_month"> <option> </option> <option value="1"> January </option> <option value="2"> February </option> <option value="3"> March </option> <option value="4"> April </option> <option value="5"> May </option> <option value="6"> June </option> <option value="7"> July </option> <option value="8"> August </option> <option value="9"> September </option> <option value="10"> October </option> <option value="11"> November </option> <option value="12"> December </option> </select> </span> </td> <td width="50%"> <span class="form-sub-label-container" style="vertical-align:top;"> <label class="form-sub-label" for="input_5_cc_exp_year" id="sublabel_cc_exp_year" style="min-height:13px;margin:0 0 3px 0;"> Expiration Year </label> <select class="form-dropdown cc_exp_year" name="q5_myProducts[cc_exp_year]" id="input_5_cc_exp_year" data-component="cc_exp_year"> <option> </option> <option value="2017"> 2017 </option> <option value="2018"> 2018 </option> <option value="2019"> 2019 </option> <option value="2020"> 2020 </option> <option value="2021"> 2021 </option> <option value="2022"> 2022 </option> <option value="2023"> 2023 </option> <option value="2024"> 2024 </option> <option value="2025"> 2025 </option> <option value="2026"> 2026 </option> <option value="2027"> 2027 </option> <option value="2028"> 2028 </option> <option value="2029"> 2029 </option> <option value="2030"> 2030 </option> <option value="2031"> 2031 </option> <option value="2032"> 2032 </option> <option value="2033"> 2033 </option> <option value="2034"> 2034 </option> <option value="2035"> 2035 </option> <option value="2036"> 2036 </option> </select> </span> </td> </tr> </tbody> </table> </div> </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" data-component="button"> Submit </button> </div> </div> </li> <li style="display:none"> Should be Empty: <input type="text" name="website" value="" /> </li> </ul> </div> <script> JotForm.showJotFormPowered = "new_footer"; </script> <input type="hidden" id="simple_spc" name="simple_spc" value="72535083316252" /> <script type="text/javascript"> document.getElementById("si" + "mple" + "_spc").value = "72535083316252-72535083316252"; </script> <div class="formFooter-heightMask"> </div> <div class="formFooter"> <a href="https://www.jotform.com/?utm_source=formfooter&utm_medium=banner&utm_term=72535083316252&utm_content=jotform_logo&utm_campaign=powered_by_jotform_signup_cf_old" target="_blank" class="formFooter-logoLink"><img class="formFooter-logo" src="https://cdn.jotfor.ms/assets/img/logo/logo-new@1x.png" alt="How to change the default selection of checkbox in source code? Image-0" style="height: 44px;"></a> <div class="formFooter-rightSide"> <span class="formFooter-text"> Now create your own JotForm - It's free! </span> <a class="formFooter-button" href="https://www.jotform.com/?utm_source=formfooter&utm_medium=banner&utm_term=72535083316252&utm_content=jotform_button&utm_campaign=powered_by_jotform_signup_cf_old" target="_blank">Create your own JotForm</a> </div> </div>
</form>
<script type="text/javascript">JotForm.ownerView=true;</script>

You can search for the word "checkbox" inside of the source code and add checked in HTML of the checkbox input for the option that you want to check. 

For the option 'ISO 9001:2015 Awareness (Texas)' you should add it after the value="1000".

Thanks for the help!