highlight image when clicked on then check a radio button - javascript

You know those sites that have an image as a checkbox and which ever image is checked gets highlighted? I'm trying to do the same, but instead with a radio button and I can't seem to get it to work. Here's my code:
html
<div class="well">
<div class="row">
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option1" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option2" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option3" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
</div>
</div>
css
.image-radio {
cursor:pointer;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:4px solid transparent;
outline:0;
}
.image-radio input[type="radio"] {
display:none;
}
.image-radio-checked {
border-color:#f58723;
}
input[type=radio] {
display:none;
}
.item-detail .item-price {
font-weight:bold;
color:#201E20;
padding-bottom:10px;
}
JavaScript
jQuery(function ($) {
// init the state from the input
$(".image-radio").each(function () {
if ($(this).find('input[type="radio"]').first().attr("checked")) {
$(this).addClass('image-radio-checked');
}
else {
$(this).removeClass('image-radio-checked');
}
});
// sync the state to the input
$(".image-radio").on("click", function (e) {
if ($(this).hasClass('image-radio-checked')) {
$(this).removeClass('image-radio-checked');
$(this).find('input[type="radio"]').first().removeAttr("checked");
}
else {
$(this).addClass('image-radio-checked');
$(this).find('input[type="radio"]').first().attr("checked", "checked");
}
e.preventDefault();
});
});
jsfiddle: https://jsfiddle.net/dwc6gf4q/5/

Do you have to use the radio buttons? If not, just keep the state in the script like you already do. When you click an image change the state to active and check the other images for being active. If one is, set it to inactive.
Then, if you need the radio buttons, you can change their state with the same function.
EDIT: Fiddled a little: https://jsfiddle.net/dwc6gf4q/41/
As far as i understood, works like you wanted.
jQuery(function ($) {
// init the state from the input
// sync the state to the input
$(".image-radio").on("click", function (e) {
$(".image-radio-checked").each(function(i){
$(this).removeClass("image-radio-checked");
});
$(this).toggleClass("image-radio-checked");
e.preventDefault();
});
});
.image-radio {
cursor:pointer;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:4px solid transparent;
outline:0;
}
.image-radio input[type="radio"] {
display:none;
}
.image-radio-checked {
border: 4px solid #f58723;
}
input[type=radio] {
display:none;
}
.item-detail .item-price {
font-weight:bold;
color:#201E20;
padding-bottom:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="well">
<div class="row">
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option1" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option2" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option3" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
</div>
</div>

It seems to be working to me. You had some js errors because you weren't adding jquery to the fiddle...try here: https://jsfiddle.net/dwc6gf4q/6/
added jquery to fiddle

We can also do this using CSS just need to put IMG code after the radio button.
.image-radio {
cursor:pointer;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:4px solid transparent;
outline:0;
}
.image-radio input[type="radio"] {
visibility:hidden;
}
.image-radio img {display:none;}
.image-radio input[type="radio"]:checked ~ img {display:block;}
.image-radio-checked {
border-color:#f58723;
}
input[type=radio] {
display:none;
}
.item-detail .item-price {
font-weight:bold;
color:#201E20;
padding-bottom:10px;
}
<div class="well">
<div class="row">
<div class="col-lg-4">
<label class="image-radio">
<input type="radio" name="style" value="option1" />
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<input type="radio" name="style" value="option2" />
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<input type="radio" name="style" value="option3" />
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
</div>
</div>

Related

removeClass on dynamically added class is not working

I have a div which I want to show when specific radio options are selected. This div resides in a form and if a guest, who is a toddler, is attending (by specifying "yes" in the radio options") then this hidden div (guest__cot) should appear. Idea being is that I only want to showcase cot options if a toddler is attending.
I have got the div appearing successfully. However, if I then select no from the radio option, the div still remains visible (doesn't removeClass).
Steps to reproduce, in the demo:
Select "yes" for "Name 1 (Toddler)"
[.guest__cot div appears]
Now, for "Name 1 (Toddler)" select "no", the div still remains visible ($(".guest__cot").removeClass("guest__cot--visible"); isn't executing)
I essentially want to showcase .guest__cot if any toddler has "yes" selected, and to hide it if otherwise.
Demo:
(function($) {
$(".member__attendance-input.is_toddler").on('change', function() {
var $this = $(this);
var attendance_value = $this.val();
var showCotField = "show-cot-field";
if (attendance_value === "yes") {
$this.addClass(showCotField);
} else if ((attendance_value === "no")) {
$this.removeClass(showCotField);
}
if ($('.member__attendance-input').hasClass(showCotField)) {
$(".guest__cot").addClass("guest__cot--visible");
} else {
$(".guest__cot").removeClass("guest__cot--visible");
}
});
})(jQuery);
.rsvp {
padding: 60px 0;
}
form {
padding: 40px;
border: 1px solid #000000;
}
.input-label {
margin: 0 20px 0 0;
}
.member {
margin-bottom: 30px;
}
.member__name {
display: block;
margin-bottom: 15px;
}
.member__options {
margin-bottom: 20px;
}
.guest__cot{
opacity: 0;
height: 0;
margin: 0;
pointer-events: none;
}
.guest__cot--visible {
opacity: 1;
height: auto;
margin-top: 20px;
pointer-events: auto;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="rsvp">
<div class="container">
<div class="row">
<div class="col-12">
<form>
<!-- member 1 -->
<div class="member d-flex flex-column">
<span class="member__name">Name 1 (Toddler)</span>
<div class="member__attendance member__options d-flex">
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-yes-0" type="radio" name="attending-0" value="yes" required />
<label class="input-label" for="attending-yes-0">Yes</label>
</div>
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-no-0" type="radio" name="attending-0" value="no" required />
<label class="input-label" for="attending-no-0">No</label>
</div>
</div>
</div>
<!-- member 2 -->
<div class="member d-flex flex-column">
<span class="member__name">Name 2 (Toddler)</span>
<div class="member__attendance member__options d-flex">
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-yes-1" type="radio" name="attending-1" value="yes" required />
<label class="input-label" for="attending-yes-1">Yes</label>
</div>
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-no-1" type="radio" name="attending-1" value="no" required />
<label class="input-label" for="attending-no-1">No</label>
</div>
</div>
</div>
<!-- member 3 -->
<div class="member d-flex flex-column">
<span class="member__name">Name 3 (Adult)</span>
<div class="member__attendance member__options d-flex">
<div class="member__attendance-option">
<input class="member__attendance-input" id="attending-yes-2" type="radio" name="attending-2" value="yes" required />
<label class="input-label" for="attending-yes-2">Yes</label>
</div>
<div class="member__attendance-option">
<input class="member__attendance-input" id="attending-no-2" type="radio" name="attending-2" value="no" required />
<label class="input-label" for="attending-no-2">No</label>
</div>
</div>
</div>
<div class="guest__cot">
Show this div if either toddler options are "yes"
</div>
</form>
</div>
</div>
</div>
</div>
You can use .filter(), .map() and .get() to get the values of the selected toddler inputs. Then you use .includes()
to check if any of the values is a 'yes'. Try this
(function($) {
var $toddlerInputs = $(".member__attendance-input.is_toddler").on('change', function() {
var values = $toddlerInputs.filter(':checked').map((i, el) => el.value).get();
if (values.includes('yes')) {
$(".guest__cot").show();
} else {
$(".guest__cot").hide();
}
});
})(jQuery);
.rsvp {
padding: 60px 0;
}
form {
padding: 40px;
border: 1px solid #000000;
}
.input-label {
margin: 0 20px 0 0;
}
.member {
margin-bottom: 30px;
}
.member__name {
display: block;
margin-bottom: 15px;
}
.member__options {
margin-bottom: 20px;
}
.guest__cot{
margin-top: 20px;
display: none;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="rsvp">
<div class="container">
<div class="row">
<div class="col-12">
<form>
<!-- member 1 -->
<div class="member d-flex flex-column">
<span class="member__name">Name 1 (Toddler)</span>
<div class="member__attendance member__options d-flex">
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-yes-0" type="radio" name="attending-0" value="yes" required />
<label class="input-label" for="attending-yes-0">Yes</label>
</div>
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-no-0" type="radio" name="attending-0" value="no" required />
<label class="input-label" for="attending-no-0">No</label>
</div>
</div>
</div>
<!-- member 2 -->
<div class="member d-flex flex-column">
<span class="member__name">Name 2 (Toddler)</span>
<div class="member__attendance member__options d-flex">
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-yes-1" type="radio" name="attending-1" value="yes" required />
<label class="input-label" for="attending-yes-1">Yes</label>
</div>
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-no-1" type="radio" name="attending-1" value="no" required />
<label class="input-label" for="attending-no-1">No</label>
</div>
</div>
</div>
<!-- member 3 -->
<div class="member d-flex flex-column">
<span class="member__name">Name 3 (Adult)</span>
<div class="member__attendance member__options d-flex">
<div class="member__attendance-option">
<input class="member__attendance-input" id="attending-yes-2" type="radio" name="attending-2" value="yes" required />
<label class="input-label" for="attending-yes-2">Yes</label>
</div>
<div class="member__attendance-option">
<input class="member__attendance-input" id="attending-no-2" type="radio" name="attending-2" value="no" required />
<label class="input-label" for="attending-no-2">No</label>
</div>
</div>
</div>
<div class="guest__cot">
Show this div if either toddler options are "yes"
</div>
</form>
</div>
</div>
</div>
</div>

How to enable invisible ReCAPTCHA on checkbox onclick

I am struggling with an recaptcha issue on my local. I am trying to build a register form. All examples about recaptcha are about buttons. What I want is to pop-up recaptcha modal to user when he/she clicks on checkbox which says ' I have read and accept terms and conditions.' When he/she solves recaptcha then checkbox would be checked. Here what I am trying
It did not work, after that I tried this onClick method did not work because it writes Script Error on console.
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function controlFunction() {
grecaptcha.render()
}
</script>
</head>
<body>
<div id='checkbox-form' action="?" method="POST">
<input onclick="controlFunction()" type="checkbox" class="g-recaptcha" data-sitekey="MY_LOCAL_KEY" data-callback='onClick' id="termsConditions" class="termsOkay">
<label for="termsConditions" generated="true">I have read and accepted <a target="_blank" href="/sales-terms-and-conditions/">Terms and Conditions</a> </label>
<br/>
</div>
</body>
</html>
I know code is a mess because I tried so many different thing and this is what I got. I am really confused. All I want is if user checks the checkbox let captcha popup. When solved, checkbox is checked. How can I do it? I tried to use handleChange but could not make it either.
Here is my whole code:
<?php
// Google reCaptcha secret key
$secretKey = "REMOVEDCONTENTBYME";
$statusMsg = '';
if(isset($_POST['submit'])){
if(isset($_POST['captcha-response']) && !empty($_POST['captcha-response'])){
// Get verify response data
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secretKey.'&response='.$_POST['captcha-response']);
$responseData = json_decode($verifyResponse);
if($responseData->success){
//Contact form submission code goes here ...
$statusMsg = 'Your contact request have submitted successfully.';
}else{
$statusMsg = 'Robot verification failed, please try again.';
}
}else{
$statusMsg = 'Robot verification failed, please try again.';
}
}
?>
<?php $businessTypes = [
'Full Service',
'Quick Service',
'Bars and Clubs',
]; ?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<link rel="stylesheet" href="https://use.typekit.net/fom8rbw.css">
<link rel="stylesheet" href="/wp-content/themes/thegem/css/main.css">
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>
<script>
var onloadCallback = function() {
grecaptcha.execute();
};
function setResponse(response) {
document.getElementById('captcha-response').value = response;
}
</script>
<?php wp_head(); ?>
<style>
html, body, .site-content {
padding: 0 !important;
margin: 0 !important;
background-color:#fff;
}
.textwidget a {
font-family: 'proxima-nova',sans-serif !important;
}
.d-none {
display: none !important;
}
.section{
background-color: #ffffff;
}
.demo-form input, .demo-form select, .demo-form textarea {
border: 1px solid #e31d93;
}
.demo-form input {
text-indent: 12px;
}
.form-control {
display: block;
width: 100%;
height: calc(1.5em + 1.3rem + 2px);
font-size: 1.6rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .40rem;
}
.row-m-t{
margin-top : 0px
}
</style>
<div id="page" class="site">
<div id="content" class="site-content">
<div id="primary" class="content-area demo-form">
<main id="main" class="site-main">
<div class="section blog-content">
<div class="container">
<div class="text-center"><h1 style="padding-bottom: 10rem;">Request FOrm</h1></div>
<div class="row justify-content-md-center">
<div class="col-md-6">
<form class="demo-form" method="post" onsubmit="return false" style=" position: relative; bottom: 35px; ">
<div class="row">
<div class="col-md-6 border-danger form-group">
<input type="text" class="form-control validate" data-validate="validateText" name="firstName" placeholder="First name" style=" background-color: #fff;">
</div>
<div class="col-md-6 form-group">
<input type="text" class="form-control validate" data-validate="validateText" name="lastName" placeholder="Last name"style=" background-color: #fff;">
</div>
</div>
<div class="row row-m-t">
<div class="col-md-6 form-group">
<input type="text" class="form-control validate" data-validate="validateText" name="companyName" placeholder="Group name"style=" background-color: #fff;">
</div>
<div class="col-md-6 form-group">
<input type="text" class="form-control validate" data-validate="validatePhone" name="phoneNumber" placeholder="Phone number"style=" background-color: #fff;">
</div>
</div>
<div class="row row-m-t">
<div class="col-md-12 form-group">
<input type="text" class="form-control validate" data-validate="validateEmail" name="emailAddress" placeholder="email"style=" background-color: #fff;">
</div>
</div>
<div class="row row-m-t">
<div class="col-md-12 form-group">
<select name="businessType" id="businessType" class="form-control validate" data-validate="validateText">
<option value=""><?php _e('Select Your Business Type...', 'myfirm'); ?></option>
<?php foreach ($businessTypes as $type): ?>
<option><?php _e($type, 'myfirm'); ?></option>
<?php endforeach ;?>
</select>
</div>
</div>
<div class="row radio">
<div class="col-md-6">
<p style="font-size:13px;"><?php _e('Validate by', 'myfirm'); ?>:</p>
</div>
</div>
<div class="row radio" style="font-size:13px;">
<div class="col-md-8">
<div class="custom-control custom-radio custom-control-inline col-md-6">
<input type="radio" id="validateByPhone" checked value="phoneNumber" name="validateBy" class="custom-control-input">
<label style="font-size:12px; transform: scale(1.2);
position: relative;
left: 1rem;" class="custom-control-label" for="validateByPhone"><?php _e('Phone Number', 'myfirm'); ?></label>
</div>
<div class="custom-control custom-radio custom-control-inline col-md-6">
<input type="radio" id="validateByEmailAddess" value="emailAddress" name="validateBy" class="custom-control-input">
<label style="font-size:12px; transform: scale(1.2);
position: relative;
left: 1rem; top:5px;" class="custom-control-label" for="validateByEmailAddess"><?php _e('Email Address', 'myfirm'); ?></label>
</div>
</div>
</div>
<br>
<div class="row radio">
<div class="col-md-12" style="position: relative;right: 13px;">
<div class="custom-radio custom-control-inline col-md-12">
<div class="g-recaptcha" data-sitekey="REMOVEDCONTENTBYME" data-badge="inline" data-size="invisible" data-callback="setResponse"></div>
<input type="hidden" id="captcha-response" name="captcha-response" />
<input type="checkbox" id="captcha-response" class="termsOkay" style=" background-color: #fff;">
<label for="captcha-response" class="error" generated="true" style="position: relative;bottom: 5px;"> I have read and accepted <a target="_blank" href="/sales-terms-and-conditions/">Terms and Conditions</a> </label>
</div>
</div>
</div>
<div class="verification-code d-none">
<div class="col">
<label for="verification-code"><?php _e('A verification code has been sent to your phone number!', 'myfirm') ?></label>
<input type="text" class="form-control" name="code" placeholder="<?php _e('Verification code', 'myfirm');?>">
</div>
</div>
<div class="row row-m-t">
<div class="col">
<button class="btn btn-myfirm send-verification-code" disabled="disabled" style="width: 100% !important;height: 125% !important;font-size: 15px;"><?php _e('Request a Demo', 'myfirm'); ?></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</main>
</div>
</main>
</div>
</div>
</div>
</body>
<script>
function admSelectCheck(obj)
{
var nameSelect = obj.value;
console.log(nameSelect);
if(nameSelect){
admOptionValue = 'United States of America|+1';
if(admOptionValue == nameSelect){
document.getElementById("admDivCheck").style.display = "block";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "block";
}
}
</script>
<script>
jQuery(function() {
jQuery('input.termsOkay').change(function() {
if (!jQuery('input.termsOkay').is(':checked')) {
jQuery('.send-verification-code').prop('disabled', true)
} else{
jQuery('.send-verification-code').prop('disabled', false)
}
})
})
</script>
</html>
The part I am trying to make it work
<div class="row radio">
<div class="col-md-12" style="position: relative;right: 13px;">
<div class="custom-radio custom-control-inline col-md-12">
<div class="g-recaptcha" data-sitekey="REMOVEDCONTENTBYME" data-badge="inline" data-size="invisible" data-callback="setResponse"></div>
<input type="hidden" id="captcha-response" name="captcha-response" />
<input type="checkbox" id="captcha-response" class="termsOkay" style=" background-color: #fff;">
<label for="captcha-response" class="error" generated="true" style="position: relative;bottom: 5px;"> I have read and accepted <a target="_blank" href="/sales-terms-and-conditions/">Terms and Conditions</a> </label>
</div>
</div>
</div>

How to disable the rest of the available checkboxes if some are selected

I was wondering through the internet and I found this type of checkboxes with images. (https://codepen.io/kskhr/pen/pRwKjg) I need to disable the rest of the checkboxes when 3 are selected.
JS
// image gallery
// init the state from the input
$(".image-checkbox").each(function () {
if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
$(this).addClass('image-checkbox-checked');
}
else {
$(this).removeClass('image-checkbox-checked');
}
});
// sync the state to the input
$(".image-checkbox").on("click", function (e) {
$(this).toggleClass('image-checkbox-checked');
var $checkbox = $(this).find('input[type="checkbox"]');
$checkbox.prop("checked",!$checkbox.prop("checked"))
e.preventDefault();
});
I think the best way can be solved with javascript, but i'm a little bit confused.
Thank you!
Just some simple logic to check how many currently have the class, and also if the currently clicked element has the class, if not it should be disabled:
if ($('.image-checkbox-checked').length === 3 && !$(this).hasClass('image-checkbox-checked'))
return;
If you add that to the onclick event it should act accordingly.
Here is a forked codepen: https://codepen.io/anon/pen/Rvyqyq
Codepen doesn't like that for some reason here is a snippet if it doesn't load:
// image gallery
// init the state from the input
$(".image-checkbox").each(function() {
if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
$(this).addClass('image-checkbox-checked');
} else {
$(this).removeClass('image-checkbox-checked');
}
});
// sync the state to the input
$(".image-checkbox").on("click", function(e) {
if ($('.image-checkbox-checked').length === 3 && !$(this).hasClass('image-checkbox-checked')) return;
$(this).toggleClass('image-checkbox-checked');
var $checkbox = $(this).find('input[type="checkbox"]');
$checkbox.prop("checked", !$checkbox.prop("checked"))
e.preventDefault();
});
.nopad {
padding-left: 0 !important;
padding-right: 0 !important;
}
/*image gallery*/
.image-checkbox {
cursor: pointer;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 4px solid transparent;
margin-bottom: 0;
outline: 0;
}
.image-checkbox input[type="checkbox"] {
display: none;
}
.image-checkbox-checked {
border-color: #4783B0;
}
.image-checkbox .fa {
position: absolute;
color: #4A79A3;
background-color: #fff;
padding: 10px;
top: 0;
right: 0;
}
.image-checkbox-checked .fa {
display: block !important;
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!--
Image Checkbox Bootstrap template for multiple image selection
https://www.prepbootstrap.com/bootstrap-template/image-checkbox
-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container">
<h3>Bootstrap image checkbox(multiple)</h3>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
</div>
Create a counter to keep track of how many checkboxes are checked:
//html
<input type="checkbox" class="checkbox">1
<input type="checkbox" class="checkbox">2
<input type="checkbox" class="checkbox">3
-
let numberOfCheckboxesChecked = 0;
$('.checkbox').on("change", (e) => {
if (e.target.checked) {
numberOfCheckboxesChecked +=1 ;
} else {
numberOfCheckboxesChecked -=1;
}
if (numberOfCheckboxesChecked > 3) {
e.target.checked = false;
// or some other code to disable the remaining inputs
}
});
let count = 0;
$(".checkbox").on("click", function() {
if ($(this).is(":checked")) {
$(this).removeClass("undone").addClass("done")
count++;
} else {
$(this).removeClass("done").addClass("undone")
count--
}
if (count == "3") {
$(".checkbox").each(function() {
if ($(".checkbox").hasClass("undone")) {
$(".undone").attr("disabled", "disabled")
}
});
}
else{
$(".checkbox").attr("disabled", false)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>
<input class="checkbox undone" type="checkbox" value="Option1">Option 1</label>
</div>
<div>
<label>
<input class="checkbox undone" type="checkbox" value="Option2">Option 2</label>
</div>
<div>
<label><input class="checkbox undone" type="checkbox" value="Option3" >Option 3</label>
</div>
<div>
<label>
<input class="checkbox undone" type="checkbox" value="Option4">Option 4</label>
</div>
<div>
<label>
<input class="checkbox undone" type="checkbox" value="Option5">Option 5</label>
</div>
<div>
<label>
<input class="checkbox undone" type="checkbox" value="Option6" >Option 6</label>
</div>

JQuery div.show() is resizing my fields

I have a hide div that when I click on a checkbox, that div shows. My problem is that when the div shows the height of input fields are too small.
My div:
<div id="payment" style="display: none;">
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">Credit Card</label>
<div class="col-lg-2" id="sq-card-number"></div>
</div>
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">CVV</label>
<div class="col-lg-1" id="sq-cvv"></div>
</div>
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">Expiration Date</label>
<div class="col-lg-1" id="sq-expiration-date"></div>
</div>
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">Postal Code</label>
<div class="col-lg-1" id="sq-postal-code"></div>
<input type="hidden" id="card-nonce" name="nonce">
</div>
<div class="form-group">
<br />
<br />
<div class="col-xs-12 col-xs-offset-1">
<button id="applyApplication" name="applyApplication" type="button" onClick="submitApplication();" class="btn btn-success center-block" disabled>Submit Application</button>
<br />
<br />
</div>
</div>
</div>
The CSS for the input fields:
<style type="text/css">
.sq-input {
border: 1px solid #CCCCCC;
margin-bottom: 10px;
padding: 1px;
}
.sq-input--focus {
outline-width: 5px;
outline-color: #70ACE9;
outline-offset: -1px;
outline-style: auto;
}
.sq-input--error {
outline-width: 5px;
outline-color: #FF9393;
outline-offset: 0px;
outline-style: auto;
}
</style>
And I control to display that div or not by JQuery:
$('#agree').change(function() {
if($(this).is(":checked")) {
$("#payment").show();
$("#payment").scrollTop($("#payment").prop("scrollHeight"));
} else{
$("#payment").hide();
}
});
Here is the div that there is my checkbox:
<div class="form-group">
<div class="col-xs-12 col-xs-offset-2">
<div class="checkbox">
<label>
<input type="checkbox" id="agree" name="agree" value="agree" /> Agree with the terms and conditions
</label>
</div>
<br />
<br />
</div>
</div>
Everything is working fine. When my checkbox is checked it display the div, but the input fields are with height very small. BTW, if I open the firebug, the input height adjust automatically. Does anyone know why?
Thanks
Try to fix the height in your css :
.sq-input {
border: 1px solid #CCCCCC;
margin-bottom: 10px;
padding: 1px;
height: 20px;
}
Here is a Fiddle exemple : https://jsfiddle.net/qboena51/

Javascript search box not appearing in Domtab

Here's my website: http://library.bennington.edu. We use domtabs to organize our search boxes. We're switching cataloging software, so I'm trying to replace the catalog search box with a new search box from Ebsco Discovery Services (EDS). EDS provides their own code, so I didn't have to write anything, should just be cut and paste. But when I drop the new code in, nothing appears at all, just a total blank space. If I place the code BELOW the domtabs box, it works fine. It just blanks when placed within the domtabs box, as if there's some conflict. Here's the relevant DomTab code section:
<div class="domtab">
<ul class="domtabs">
<li><a style="border-top-left-radius:9px" href="#catalog">Catalog</a></li>
<li>Journals</li>
<li>Databases</li>
<li>Reserves</li>
<li>Reference</li>
<li><a style="border-top-right-radius:9px" href="#archive">Archive</a></li>
</ul>
<div>
<h2><a name="#catalog" id="catalog"></a></h2>
<table width="425px">
<tr>
<td valign="top" width="70%">
<!--Insert new code here-->
<!--Code Ends here-->
<span>Search the library's holdings for books, ebooks, movies, music recordings, and more.</span>
<form action="http://library.bennington.edu/search/Y" method="get" style="display:block; padding: 2px 0px; margin: 0;">
<input style="border-radius:3px" type="text" name="SEARCH" size="35" value="" />
<input type="hidden" name="SORT" value="A" />
<script language="javascript">
function iiiDoSubmit_1() {
var name = "iiiFormHandle_1";
if (document.getElementById)
obj = document.getElementById(name);
else if (document.all)
obj = document.all[name];
else if (document.layers)
obj = document.layers[name];
obj.form.submit();
}
</script>
<input type="hidden" id="iiiFormHandle_1"/>
<a href=# onclick="iiiDoSubmit_1();">
<input style="border-radius:3px; width:50px; margin-top:3px; padding:2px; font-size:11px" value="Search" type="Submit" />
</a>
</form>
</td>
<td valign="top" align="right">
<span class="roundedContentInfo">
<span style="font-size:130%; border-bottom:1px solid #000; text-align:left;"><b>Other Searches</b></span>
<span>Advanced </span>
<span>Title </span>
<span>Author </span>
<span>Author & Title </span>
</span>
</td>
</tr>
</table>
</div>
And here's the code that should be dropped in:
<script src="http://support.ebscohost.com/eit/scripts/ebscohostsearch.js" type="text/javascript"></script>
<style type="text/css">
.choose-db-list{ list-style-type:none;padding:0;margin:10px 0 0 0;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9pt;width:340px; }
.choose-db-check{ width:20px;float:left;padding-left:5px;padding-top:5px; }
.choose-db-detail{ margin-left:30px;border-left:solid 1px #E7E7E7;padding:5px 11px 7px 11px;line-height:1.4em; }
.summary { background-color:#1D5DA7;color:#FFFFFF;border:solid 1px #1D5DA7; }
.one { background-color: #FFFFFF;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
.two { background-color: #F5F5F5;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
.selected { background-color: #E0EFF7;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
#ebscohostCustomSearchBox #disciplineBlock { width:auto; }
#ebscohostCustomSearchBox .limiter { float:left;margin:0;padding:0;width:50%; }
#ebscohostsearchtext { width: 144px; }
#ebscohostsearchtext.edspub { width: 245px; }
.ebscohost-search-button.edspub {
border: 1px solid #156619;
padding: 5px 10px !important;
border-radius: 3px;
color: #fff;
font-weight: bold;
background-color: #156619;
}
.ebscohost-title.edspub {
color: #1c7020;
font-weight: bold;
}
</style>
<form id="ebscohostCustomSearchBox" action="" onsubmit="return ebscoHostSearchGo(this);" method="post" style="width:340px; overflow:auto;">
<input id="ebscohostwindow" name="ebscohostwindow" type="hidden" value="1" />
<input id="ebscohosturl" name="ebscohosturl" type="hidden" value="http://0-search.ebscohost.com.library.bennington.edu/login.aspx?direct=true&site=eds-live&scope=site&type=0&mode=bool&lang=en&authtype=cookie,ip" />
<input id="ebscohostsearchsrc" name="ebscohostsearchsrc" type="hidden" value="db" />
<input id="ebscohostsearchmode" name="ebscohostsearchmode" type="hidden" value="+" />
<input id="ebscohostkeywords" name="ebscohostkeywords" type="hidden" value="" />
<div style="background-image:url('http://support.ebscohost.com/images/logos/eds100.gif'); background-repeat:no-repeat; height:50px; width:340px; font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9pt; color:#353535;">
<div style="padding-top:5px;padding-left:115px;">
<span class="ebscohost-title " style="font-weight:bold;">Research databases</span>
<div>
<input id="ebscohostsearchtext" class="" name="ebscohostsearchtext" type="text" size="23" style="font-size:9pt;padding-left:5px;margin-left:0px;" />
<input type="submit" value="Search" class="ebscohost-search-button " style="font-size:9pt;padding-left:5px;" />
<div id="guidedFieldSelectors">
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_0" value="" checked="checked" />
<label class="label" for="guidedField_0"> Keyword</label>
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_1" value="TI" />
<label class="label" for="guidedField_1"> Title</label>
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_2" value="AU" />
<label class="label" for="guidedField_2"> Author</label>
</div>
</div>
</div>
</div>
<div id="limiterblock" style="margin-left:-px; overflow: auto; ">
<div id="limitertitle" style="font-weight:bold;padding-top:25px;padding-bottom:5px;">Limit Your Results</div>
<div class="limiter" >
<input type="checkbox" id="chkFullText" name="chkFullText" checked="checked" />
<label for="chkFullText">Full Text</label>
</div>
<div class="limiter" >
<input type="checkbox" id="chkLibraryCollection" name="chkLibraryCollection" />
<label for="chkLibraryCollection">Available in Library Collection</label>
</div>
<div class="limiter" style="display:none;">
<input type="checkbox" id="chkPeerReviewed" name="chkPeerReviewed" />
<label for="chkPeerReviewed">Peer Reviewed</label>
</div>
<div class="limiter" style="display:none;">
<input type="checkbox" id="chkCatalogOnly" name="chkCatalogOnly" />
<label for="chkCatalogOnly">Catalog Only</label>
</div>
</div>
</form>
I've moved the javascript call to the top of the page, and moved the CSS to my CSS page to thin out the code, but still just getting the domtab box with normal background color as if nothing is there. :-/

Categories