How can i hide labels and checkboxes in searching with Jquery?

How can i hide labels and checkboxes in searching with Jquery? - javascript

sorry for my bad english.
I am trying to search page with labels and checkboxes. But I can't hide the checkboxes and labels when I'm searching. Then I want to all labels and checkboxes to appear when search input is empty. Well, I have a class for my labels but it did not work.
How can I do this with Jquery?
Can anyone help? Thank you :)
$(document).on("input", "#searchColumn", function() {
var v = $(this).val();
var elem = $(":checkbox").filter(function() {
return (new RegExp(v, 'i')).test(this.value);
});
if (elem.val()) {
$(elem).show();
$(":checkbox").not(elem).hide();
} else {
$(":checkbox").hide();
}
});
.ccontainer {
margin: 0px auto 0 auto;
width: 100%;
text-align: center;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+label {
display: inline-block;
position: relative;
border-radius: 40px;
padding: 10px 40px;
width: 10%;
background: #eeeeee;
font-weight: 600;
font-size: 13px;
color: #444;
cursor: pointer;
}
input[type=checkbox]+label:hover {
background: #e4e4e4;
}
input[type=checkbox]:checked+label {
background: #003B46;
color: #f0f0f0;
}
input[type=checkbox]:checked+label div.checkmark {
display: block;
fill: #f0f0f0;
}
#keyframes btn-color {
0% {
background: #88d3a6;
}
50% {
background: #5dc386;
}
100% {
background: #3ea868;
}
}
<div class="ccontainer">
<center><input class="form-control mb-3" id="searchColumn" type="text" placeholder="Search in interests" value="" style="width: 50%;"><br></center>
<input type="checkbox" id="Checkbox1" name="Checkbox1" value="Drawing">
<label for="Checkbox1" class="myLabel"><span class="label-name">Drawing</span></label>
<input type="checkbox" id="Checkbox2" name="Checkbox2" value="Swimming">
<label for="Checkbox2"><span class="label-name">Swimming</span></label>
<input type="checkbox" id="Checkbox3" name="Checkbox3" value="Dancing">
<label for="Checkbox3"><span class="label-name">Dancing</span></label>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$(document).on("input", "#searchColumn", function() {
var v = $(this).val();
$(":checkbox").removeClass('hide');
if (v != '') {
var elem = $(":checkbox").filter(function() {
return (new RegExp(v, 'i')).test(this.value);
});
if (elem.val()) {
$(elem).show();
$(":checkbox").not(elem).hide();
$(":checkbox").not(elem).addClass('hide');
} else {
$(":checkbox").hide();
}
} else {
$(":checkbox").hide();
}
});
.ccontainer {
margin: 0px auto 0 auto;
width: 100%;
text-align: center;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+label {
display: inline-block;
position: relative;
border-radius: 40px;
padding: 10px 40px;
width: 10%;
background: #eeeeee;
font-weight: 600;
font-size: 13px;
color: #444;
cursor: pointer;
}
input[type=checkbox]+label:hover {
background: #e4e4e4;
}
input[type=checkbox]:checked+label {
background: #003B46;
color: #f0f0f0;
}
input[type=checkbox]:checked+label div.checkmark {
display: block;
fill: #f0f0f0;
}
#keyframes btn-color {
0% {
background: #88d3a6;
}
50% {
background: #5dc386;
}
100% {
background: #3ea868;
}
}
input.hide+label {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ccontainer">
<center><input class="form-control mb-3" id="searchColumn" type="text" placeholder="Search in interests" value="" style="width: 50%;"><br></center>
<input type="checkbox" id="Checkbox1" name="Checkbox1" value="Drawing">
<label for="Checkbox1" class="myLabel">
<span class="label-name">Drawing</span>
</label>
<input type="checkbox" id="Checkbox2" name="Checkbox2" value="Swimming">
<label for="Checkbox2">
<span class="label-name">Swimming</span>
</label>
<input type="checkbox" id="Checkbox3" name="Checkbox3" value="Dancing">
<label for="Checkbox3">
<span class="label-name">Dancing</span>
</label>
</div>

Here's a much simpler solution using jQuery's .toggleClass() method.
Wrap INPUT and SPAN into LABEL (and modify CSS accordingly)
add a data-filter attribute to every label
$(document).on("input", "#searchColumn", function() {
const v = $.trim($(this).val());
$("[data-filter]").each(function(){
$(this).toggleClass('is-hidden', !new RegExp(v, 'i').test($(this).data('filter')));
});
});
.ccontainer {
margin: 0px auto 0 auto;
width: 100%;
text-align: center;
}
input[type=checkbox] {
position: absolute;
opacity: 0;
}
input[type=checkbox]+span {
display: inline-block;
position: relative;
border-radius: 40px;
padding: 10px 40px;
width: 10%;
background: #eeeeee;
font-weight: 600;
font-size: 13px;
color: #444;
cursor: pointer;
transition: background 0.23s;
}
input[type=checkbox]+span:hover {
background: #e4e4e4;
}
input[type=checkbox]:checked+span {
background: #003B46;
color: #f0f0f0;
}
.is-hidden {
display: none;
}
<div class="ccontainer">
<input class="form-control mb-3" id="searchColumn" type="text" placeholder="Search in interests" value="" style="width: 50%;">
<br>
<label data-filter="drawing">
<input type="checkbox" name="Checkbox1" value="Drawing">
<span class="label-name">Drawing</span>
</label>
<label data-filter="swimming">
<input type="checkbox" name="Checkbox2" value="Swimming">
<span class="label-name">Swimming</span>
</label>
<label data-filter="dancing">
<input type="checkbox" name="Checkbox3" value="Dancing">
<span class="label-name">Dancing</span>
</label>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
PS: take also care what to do if one selects a checkbox but than ends up filtered...

Related

Priority Indication Button

I want to show a priority setting button using HTML, CSS and jQuery to set the priority as High/Medium/Low as shown in the attached images and want to show selected priority in full word in a label next to it. Is there any way to achieve this?
I tried below, but its design is not similar to what I have attached here.
$(function() {
$('input:radio[name=priority]').change(function() {
var id = $(this).attr("id");
$("#text").html($(this).val());
$('label[for=' + id + ']').checked = true;
});
});
[type="radio"]:checked + span:after {
border: none;
background-color: unset;
}
[type="radio"]:not(:checked) + span:before {
border: none;
}
input[type="radio"] {
width: 30px;
height: 30px;
border-radius: 15px;
/*border: 2px solid #1FBED6;*/
background-color: #F1F1F1;
-webkit-appearance: none;
/*to disable the default appearance of radio button*/
-moz-appearance: none;
}
input[type="radio"]:focus {
/*no need, if you don't disable default appearance*/
outline: none;
/*to remove the square border on focus*/
}
#h:checked {
/*no need, if you don't disable default appearance*/
background-color: red;
}
#m:checked {
/*no need, if you don't disable default appearance*/
background-color: orange;
}
#l:checked {
/*no need, if you don't disable default appearance*/
background-color: lightgreen;
}
input[type="radio"]:checked~span:first-of-type {
color: white;
}
label span:first-of-type {
position: relative;
left: -27px;
font-size: 15px;
color: black;
}
label span {
position: relative;
top: -12px;
}
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<label><input type="radio" id="h" name="priority" value="High priority"/><span>H</span></label>
<label><input type="radio" id="m" name="priority" value="Moderate priority"/><span>M</span></label>
<label><input type="radio" id="l" name="priority" value="Low priority"/><span>L</span></label>
<div id="text"> </div>
When I implement in my code, it's looks like below:

Created a fiddle for you - https://jsfiddle.net/fuzp6mL9/2/
Edited some of your CSS plus added a wrapper for the radio buttons. Feel free to change the color to w/e you need.
NOTE:
You'll need to put a wrapper around "#test" and "#text" to clear the floats. See https://css-tricks.com/snippets/css/clear-fix/
<div id="test">
<label><input type="radio" id="h" name="priority" value="High priority" /><span>H</span></label>
<label><input type="radio" id="m" name="priority" value="Moderate priority" /><span>M</span></label>
<label><input type="radio" id="l" name="priority" value="Low priority" /><span>L</span></label>
</div>
<div id="text"> </div>
$(function(){
$('input:radio[name=priority]').change(function()
{
var id = $(this).attr("id");
$("#text").html($(this).val());
$('label[for='+id+']').checked = true;
});
});
input[type="radio"] {
width: 30px;
height: 30px;
border-radius: 15px;
margin: 2px 0 0 2px;
background-color: #F1F1F1;
-webkit-appearance: none;
-moz-appearance: none;
}
input[type="radio"]:focus {
outline: none;
}
#h:checked {
background-color: red;
}
#m:checked {
background-color: orange;
}
#l:checked {
background-color: lightgreen;
}
input[type="radio"]:checked ~ span:first-of-type {
color: white;
}
label {
width: 35px;
display: inline-block;
position: relative;
}
label span {
position: absolute;
top: 10px;
left: 11px;
font-size: 15px;
color: black;
}
#text,
#test {
float: left;
}
#text {
margin-top: 14px;
margin-left: 10px;
}
#test {
padding: 6px;
background-color: blue;
border-radius: 26px;
}
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="test">
<label><input type="radio" id="h" name="priority" value="High priority" /><span>H</span></label>
<label><input type="radio" id="m" name="priority" value="Moderate priority" /><span>M</span></label>
<label><input type="radio" id="l" name="priority" value="Low priority" /><span>L</span></label>
</div>
<div id="text"> </div>
</body>
</html>

How do I make a form redirect you after submitting the form with required inputs

I have a HTML JS form for a contact form on my website, but I want it to redirect to a thank your page after the submit button is clicked. I can do that on it's own, but it happens every time I click the button, but I only want it to happen when the required areas are filled in.
I have tried an action tag on the form btw, it doesn't work for some reason.
Code (full screen it too see the button) :
document.getElementById("submit").onclick = function () {
location.href = "/contactty.html";
};
.cntct-bg {
background-color: #4158D0;
background-image: linear-gradient(45deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
overflow: hidden;
}
.contact-cont {
position: absolute;
top: 6%;
width: 100%;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
form {
background: #ffffff;
display: flex;
flex-direction: column;
padding: 2vw 4vw;
width: 90%;
max-width: 600px;
border-radius: 10px;
z-index: 1;
}
form h1 {
color: #555555;
font-weight: 800;
margin-bottom: 20px;
font-family: var(--black);
z-index: 1;
}
form input,
form textarea {
border: 0;
margin: 10px 0;
padding: 20px;
outline: none;
background: #f5f5f5;
font-size: 16px;
font-family: var(--medium);
z-index: 1;
}
form textarea {
min-width: 93.33%;
max-width: 93.33%;
min-height: 80px;
z-index: 1;
}
form button {
padding: 15px;
background: #ff5361;
color: #ffffff;
font-size: 18px;
border: 0;
outline: none;
cursor: pointer;
width: 150px;
margin: 20px auto 0;
border-radius: 30px;
z-index: 1;
box-shadow: 0px 8px 0px #a83740;
}
.form button:active {
box-shadow: none;
transform: translateY(8px);
}
<body class="cntct-bg">
<div class="contact-cont">
<form action="/contactty.html" id="contact-form">
<h1>Get in touch</h1>
<input type="hidden" name="contact_number">
<input type="text" name="user_name" placeholder="Your Name" required>
<input type="email" name="user_email" placeholder="Your Email" required>
<textarea name="message" placeholder="Whats on your mind?" required></textarea>
<div class="tscheck">
<input type="checkbox" id="tsy" name="tsy" value="agreed" required>
<label for="tsy">Accept the <span>terms of service</var></span></label>
</div>
<button type="submit" id="submit" name="submit" onclick="submit()">Send</button>
</form>
</div>
<script src="https://smtpjs.com/v3/smtp.js"></script>
</body>

checkAllInput() is validatind data.
I have selected all inputs and then looping through them and validating if (input.value == null || input.value == "") weather it's empty or not.
document.getElementById("submit").onclick = function() {
if (checkAllInput()) {
location.href = "/contactty.html";
}
};
function checkAllInput() {
const inputs = document.querySelectorAll("input");
inpputs.forEach(input => {
if (input.value == null || input.value == "") {
alert("please enter all data");
return false;
} else {
return true;
}
})
}
.cntct-bg {
background-color: #4158D0;
background-image: linear-gradient(45deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
overflow: scroll;
}
.contact-cont {
width: 100%;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
overflow: scroll;
}
form {
background: #ffffff;
display: flex;
flex-direction: column;
padding: 2vw 4vw;
width: 90%;
max-width: 600px;
border-radius: 10px;
z-index: 1;
}
form h1 {
color: #555555;
font-weight: 800;
margin-bottom: 20px;
font-family: var(--black);
z-index: 1;
}
form input,
form textarea {
border: 0;
margin: 10px 0;
padding: 20px;
outline: none;
background: #f5f5f5;
font-size: 16px;
font-family: var(--medium);
z-index: 1;
}
form textarea {
min-width: 93.33%;
max-width: 93.33%;
min-height: 80px;
z-index: 1;
}
form button {
padding: 15px;
background: #ff5361;
color: #ffffff;
font-size: 18px;
border: 0;
outline: none;
cursor: pointer;
width: 150px;
margin: 20px auto 0;
border-radius: 30px;
z-index: 1;
box-shadow: 0px 8px 0px #a83740;
}
.form button:active {
box-shadow: none;
transform: translateY(8px);
}
<body class="cntct-bg">
<div class="contact-cont">
<form action="/contactty.html" id="contact-form">
<h1>Get in touch</h1>
<input type="hidden" name="contact_number">
<input type="text" name="user_name" placeholder="Your Name" required>
<input type="email" name="user_email" placeholder="Your Email" required>
<textarea name="message" placeholder="Whats on your mind?" required></textarea>
<div class="tscheck">
<input type="checkbox" id="tsy" name="tsy" value="agreed" required>
<label for="tsy">Accept the <span>terms of service</var></span></label>
</div>
<button type="submit" id="submit" name="submit" onclick="submit()">Send</button>
</form>
</div>
<script src="https://smtpjs.com/v3/smtp.js"></script>
</body>

I hope it's work for you
document.getElementById("submit").onclick = function () {
var count = 0;
var len = document.querySelectorAll('[required]').forEach(current=> {
if(current.value == ''){ count = count + 1;}
});
if(count == 0){
window.location.href = "/contactty.html";
}
};
.cntct-bg {
background-color: #4158D0;
background-image: linear-gradient(45deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
overflow: hidden;
}
.contact-cont {
position: absolute;
top: 6%;
width: 100%;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
form {
background: #ffffff;
display: flex;
flex-direction: column;
padding: 2vw 4vw;
width: 90%;
max-width: 600px;
border-radius: 10px;
z-index: 1;
}
form h1 {
color: #555555;
font-weight: 800;
margin-bottom: 20px;
font-family: var(--black);
z-index: 1;
}
form input,
form textarea {
border: 0;
margin: 10px 0;
padding: 20px;
outline: none;
background: #f5f5f5;
font-size: 16px;
font-family: var(--medium);
z-index: 1;
}
form textarea {
min-width: 93.33%;
max-width: 93.33%;
min-height: 80px;
z-index: 1;
}
form button {
padding: 15px;
background: #ff5361;
color: #ffffff;
font-size: 18px;
border: 0;
outline: none;
cursor: pointer;
width: 150px;
margin: 20px auto 0;
border-radius: 30px;
z-index: 1;
box-shadow: 0px 8px 0px #a83740;
}
.form button:active {
box-shadow: none;
transform: translateY(8px);
}
<body class="cntct-bg">
<div class="contact-cont">
<form action="/contactty.html" id="contact-form">
<h1>Get in touch</h1>
<input type="hidden" name="contact_number">
<input type="text" name="user_name" placeholder="Your Name" required>
<input type="email" name="user_email" placeholder="Your Email" required>
<textarea name="message" placeholder="Whats on your mind?" required></textarea>
<div class="tscheck">
<input type="checkbox" id="tsy" name="tsy" value="agreed" required>
<label for="tsy">Accept the <span>terms of service</var></span></label>
</div>
<button type="submit" id="submit" name="submit" onclick="submit()">Send</button>
</form>
</div>
<script src="https://smtpjs.com/v3/smtp.js"></script>
</body>

I hope using java script function will help you out. For the all kinds of validation we can use JQuery to make it smoother and faster(please find out more from the link
https://stackoverflow.com/questions/15060292/a-simple-jquery-form-validation-script#:~:text=you%20can%20use%20jquery%20validator,form. )
Hope this will help you :-).
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
<form name="myForm" action="action_to_be_taken" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

"Toggle" Event and "Mouseup" methods are not working here together

I am simply using HTML, CSS and Javascript where I am using the "toggle" method to open and close the dropdown. Also, I am using "mouseup" method to close the dropdown when someone clicks outside of it.
But the "toggle" method is not working along with the "mouseup" method. And I also need "mouseup" method to close the dropdown when user clicks outside of it. So, please tell me the solution to it, why "toggle" is not working with "mouseup" method. Thanks in Advance.
Here is the code:
var selectLabel = document.getElementById('selectLabel');
selectLabel.addEventListener('click', () => {
let dropdownDiv = selectLabel.parentElement.querySelector('.selection-dropdown');
selectLabel.classList.toggle('active');
dropdownDiv.classList.toggle('show');
});
document.addEventListener('mouseup', (e) => {
e.stopPropagation();
let dropdownDiv = document.querySelector('.selection-dropdown');
if (dropdownDiv.classList.contains('show')) {
if (!e.target.classList.contains('selection-dropdown') && !e.target.parentNode.closest('.selection-dropdown')) {
selectLabel.classList.remove('active');
document.querySelector('.selection-dropdown').classList.remove('show');
}
}
});
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
font-family: 'Arial', sans-serif;
}
.selection-box {
width: 500px;
position: relative;
}
.selection-box .select-upper-label {
padding: 0.75rem 1rem;
border: 1px solid #ccc;
border-radius: 3px;
color: #202020;
display: block;
width: 100%;
font-size: 1rem;
position: relative;
white-space: nowrap;
cursor: pointer;
}
.selection-box .select-upper-label::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
border: 3px solid #808080;
border-top: 0;
border-right: 0;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
right: 15px;
pointer-events: none;
transition: all 0.2s linear;
}
.selection-box .select-upper-label.active::after {
transform: translateY(-50%) rotate(135deg);
}
.selection-dropdown {
padding: 1.5rem 1rem;
box-shadow: 0 8px 45px rgba(0, 0, 0, 0.15);
position: absolute;
width: 100%;
top: 100%;
display: none;
border-radius: 5px;
}
.selection-dropdown.show {
display: block;
}
.selection-dropdown .select-all-link {
text-decoration: none;
color: #555;
display: block;
margin-bottom: 0.5rem;
color: royalblue;
}
.selection-dropdown .selection-dropdown-list label {
display: block;
padding: 0.5rem 1rem;
}
<div class="selection-box">
<label class="select-upper-label" id="selectLabel">Select options</label>
<div class="selection-dropdown">
<i class="ion-checkmark-round"></i> Select All
<div class="selection-dropdown-list">
<label class="label" for="option1"><input type="checkbox" id="option1"> Option 1</label>
<label class="label" for="option2"><input type="checkbox" id="option2"> Option 2</label>
<label class="label" for="option3"><input type="checkbox" id="option3"> Option 3</label>
<label class="label" for="option4"><input type="checkbox" id="option4"> Option 4</label>
<label class="label" for="option5"><input type="checkbox" id="option5"> Option 5</label>
</div>
</div>
</div>

Radio Input Check/Uncheck when clicked on label

I am creating a customer preference section where the customer can select if he is interested in a fruit or not by clicking on one of two radio buttons. The problem is, I want to allow customer to leave his preference undefined on a fruit by allowing null radio button/uncheck the radio button when clicked again.
The JS is only adding classes to the radio buttons loaded via php with checked="checked" and adding a class to the parent label for CSS because on front end it appears as a button group as follows:
I tried looking it up stack overflow but no solutions worked.
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input:not(:checked)').removeAttr("checked");
$('input:checked').parent().addClass("radio_checked");
$('input').click(function() {
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input:not(:checked)').removeAttr("checked");
$('input:checked').parent().addClass("radio_checked");
});
#customer_preferences_form{
margin-top: 50px;
padding-right: 6.5%;
}
.container_banana, .container_apple, .container_guava, .container_strawberry, .container_pineapple, .container_mango{
margin-left: 6.5%;
margin-top: 20px;
width: 43.5%;
float: left;
border: 1px solid grey !important;
border-radius: 6px;
padding: 0 !important;
overflow: hidden;
}
.field_title{
border-bottom: 1px solid grey !important;
margin: 0 !important;
padding: 5px 15px;
display: inline-block;
width: 100%;
float: left;
}
.field_title label{
text-align: center;
font-size: 18px!important;
font-weight: normal!important;
margin: 0 0 3px;
width: 100% !important;
display:inline-block;
cursor: default !important;
}
#customer_preferences_form label{
width: 50%;
display: inline-block;
float: left;
text-align: center;
padding: 5px 0px;
cursor: pointer;
}
#customer_preferences_form label:nth-child(2){
border-right: 1px solid black;
}
#customer_preferences_form input[type="radio"]{
display:none;
}
#customer_preferences_form .radio_checked{
color: #00d8a9;
background: #FAFAFA;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container_mango">
<div class="field_title">
<label>Mango</label>
</div>
<label>
<input type="radio" name="mango" value="1"> Not Interested
</label>
<label>
<input type="radio" name="mango" value="2"> My Fav!
</label>
</div>
<div class="container_pineapple">
<div class="field_title">
<label>Pineapple</label>
</div>
<label>
<input type="radio" name="pineapple" value="1" checked="checked"> Not Interested
</label>
<label>
<input type="radio" name="pineapple" value="2"> My Fav!
</label>
</div>

What you have is all a bit less than optimal.
First off you should give your inputs a class to not get all your inputs in scope, but we will ignore that for now but WILL give it a proper type and anchor it to a NEW div I added with the ID not in the original.
Do NOT remove or try to add the checked attribute, it happens on change automatically and doing it will prevent resetting it. Use .prop() instead if needed.
One issue you need is that you need to find the siblings of the radio that changed and set those - they will "unset/change" - radios are single of a group BUT the change event will not fire in "unset" cases hooked this way. You COULD give them ALL a class and anchor to that but I present a solution without that extra in the markup.
Don't use the click event, use change, (what if it changes via script?)
$('#customer_preferences_form')
.on('click','label', function(event){
event.preventDefault();
event.stopImmediatePropagation();
var myradio = $(this).find('input[type=radio]');
var isChecked = myradio.is(":checked");
myradio.prop("checked",!isChecked );
myradio.trigger('setlabelstate');
});
$('#customer_preferences_form')
.on('change setlabelstate','input[type=radio]',function() {
// I used the label here to prevent the DIV sibling with title from
// having that class added - only the label siblings are needed.
var mySiblings = $(this).parent('label').siblings('label');
var radios = $(this).parent('label')
.add(mySiblings );
radios.each(function(){
var isChecked = $(this).find('input[type=radio]').is(":checked");
$(this).toggleClass("radio_checked", isChecked );
});
});
// custom event to set that initial state
$('#customer_preferences_form')
.find('input[type=radio]')
.trigger('setlabelstate');
#customer_preferences_form{
margin-top: 50px;
padding-right: 6.5%;
}
.container_banana, .container_apple, .container_guava, .container_strawberry, .container_pineapple, .container_mango{
margin-left: 6.5%;
margin-top: 20px;
width: 43.5%;
float: left;
border: 1px solid grey !important;
border-radius: 6px;
padding: 0 !important;
overflow: hidden;
}
.field_title{
border-bottom: 1px solid grey !important;
margin: 0 !important;
padding: 5px 15px;
display: inline-block;
width: 100%;
float: left;
}
.field_title label{
text-align: center;
font-size: 18px!important;
font-weight: normal!important;
margin: 0 0 3px;
width: 100% !important;
display:inline-block;
cursor: default !important;
}
#customer_preferences_form label{
width: 50%;
display: inline-block;
float: left;
text-align: center;
padding: 5px 0px;
cursor: pointer;
}
#customer_preferences_form label:nth-child(2){
border-right: 1px solid black;
}
#customer_preferences_form input[type="radio"]{
display:none;
}
#customer_preferences_form label.radio_checked{
color: #00d8a9;
background: #FAFAFA;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="customer_preferences_form">
<div class="container_mango">
<div class="field_title">
<label>Mango</label>
</div>
<label>
<input type="radio" name="mango" value="1"> Not Interested
</label>
<label>
<input type="radio" name="mango" value="2"> My Fav!
</label>
</div>
<div class="container_pineapple">
<div class="field_title">
<label>Pineapple</label>
</div>
<label>
<input type="radio" name="pineapple" value="1" checked="checked"> Not Interested
</label>
<label>
<input type="radio" name="pineapple" value="2"> My Fav!
</label>
</div>
</div>

Check this out it's working.
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input:not(:checked)').removeAttr("checked");
$('input:checked').parent().addClass("radio_checked");
$('input:checked').parent().addClass("selected");
$('input').click(function() {
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input:not(:checked)').parent().removeClass("selected");
$('input:not(:checked)').removeAttr("checked");
$('input:checked').parent().addClass("radio_checked");
$('input:checked').parent().addClass("selected");
});
$('input[type=radio]').hide();
#customer_preferences_form {
margin-top: 50px;
padding-right: 6.5%;
}
.container_banana,
.container_apple,
.container_guava,
.container_strawberry,
.container_pineapple,
.container_mango {
margin-left: 6.5%;
margin-top: 20px;
width: 43.5%;
float: left;
border: 1px solid grey !important;
border-radius: 6px;
padding: 0 !important;
overflow: hidden;
}
.field_title {
border-bottom: 1px solid grey !important;
margin: 0 !important;
padding: 5px 15px;
display: inline-block;
width: 100%;
float: left;
}
.field_title label {
text-align: center;
font-size: 18px!important;
font-weight: normal!important;
margin: 0 0 3px;
width: 100% !important;
display: inline-block;
cursor: default !important;
}
#customer_preferences_form label {
width: 50%;
display: inline-block;
float: left;
text-align: center;
padding: 5px 0px;
cursor: pointer;
}
#customer_preferences_form label:nth-child(2) {
border-right: 1px solid black;
}
#customer_preferences_form input[type="radio"] {
display: none;
}
#customer_preferences_form .radio_checked {
color: #00d8a9;
background: #FAFAFA;
font-weight: bold;
}
.selected {
background-color: #ffb3b3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container_mango">
<div class="field_title">
<label>Mango</label>
</div>
<label>
<input type="radio" name="mango" value="1"> Not Interested
</label>
<label>
<input type="radio" name="mango" value="2"> My Fav!
</label>
</div>
<div class="container_pineapple">
<div class="field_title">
<label>Pineapple</label>
</div>
<label>
<input type="radio" name="pineapple" value="1"> Not Interested
</label>
<label>
<input type="radio" name="pineapple" value="2"> My Fav!
</label>
</div>
UPDATE : If you want to uncheck radio button if clicked again. Check below snippet
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input:not(:checked)').parent().removeClass("selected");
$('input:not(:checked)').removeAttr("checked");
$('input:checked').parent().addClass("radio_checked");
$('input:checked').parent().addClass("selected");
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input[type=radio]').hide();
if ($('input:checked').is(':checked')) {
$('input:checked').prop('checked', true);
$('input:checked').data('waschecked', true);
}
$('input[type="radio"]').click(function() {
var $radio = $(this);
// if this was previously checked
if ($radio.data('waschecked') == true) {
$radio.prop('checked', false);
$radio.data('waschecked', false);
$radio.parent().removeClass("selected");
} else {
$radio.prop('checked', true);
$radio.data('waschecked', true);
$radio.parent().addClass("selected");
}
$radio.parent().siblings('label').children('input[type="radio"]').data('waschecked', false);
$radio.parent().siblings('label').removeClass("selected");
});
#customer_preferences_form {
margin-top: 50px;
padding-right: 6.5%;
}
.container_banana,
.container_apple,
.container_guava,
.container_strawberry,
.container_pineapple,
.container_mango {
margin-left: 6.5%;
margin-top: 20px;
width: 43.5%;
float: left;
border: 1px solid grey !important;
border-radius: 6px;
padding: 0 !important;
overflow: hidden;
}
.field_title {
border-bottom: 1px solid grey !important;
margin: 0 !important;
padding: 5px 15px;
display: inline-block;
width: 100%;
float: left;
}
.field_title label {
text-align: center;
font-size: 18px!important;
font-weight: normal!important;
margin: 0 0 3px;
width: 100% !important;
display: inline-block;
cursor: default !important;
}
#customer_preferences_form label {
width: 50%;
display: inline-block;
float: left;
text-align: center;
padding: 5px 0px;
cursor: pointer;
}
#customer_preferences_form label:nth-child(2) {
border-right: 1px solid black;
}
#customer_preferences_form input[type="radio"] {
display: none;
}
#customer_preferences_form .radio_checked {
color: #00d8a9;
background: #FAFAFA;
font-weight: bold;
}
.selected {
background-color: #ffb3b3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container_mango">
<div class="field_title">
<label>Mango</label>
</div>
<label>
<input type="radio" name="mango" value="1" > Not Interested
</label>
<label>
<input type="radio" name="mango" value="2" checked="checked"> My Fav!
</label>
</div>
<div class="container_pineapple">
<div class="field_title">
<label>Pineapple</label>
</div>
<label>
<input type="radio" name="pineapple" value="1"> Not Interested
</label>
<label>
<input type="radio" name="pineapple" value="2"> My Fav!
</label>
</div>
UPDATE 2: Fixed the bug in snippet 2 reported by Junaid Saleem

Create multiple checkboxes using the same CSS style

I want to use a CSS styleheet for 3 different checkboxes on the same HTML page.I'm unsure how to declare the location of the checkboxes to make them all in line with the text. Here is my CSS stylesheet for the checkbox:
input[type=checkbox]
{
visibility: hidden;
}
.checkboxOne {
background: none repeat scroll 0 0 #484848;
border-radius: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
height: 40px;
margin: -30px 200px;
position: relative;
width: 40px;
}
.checkboxOne input[type="checkbox"]:checked + label {
background: none repeat scroll 0 0 #6E0000;
}
.checkboxOne label:before {
content:'N';
padding:6px;
color:#000000;
display: block;
padding: 4px;
text-align: center;
}
.checkboxOne input[type="checkbox"]:checked + label:before {
content:'Y';
padding:6px;
color:#FFFFFF;
display:block;
padding: 4px;
text-align: center;
}
.checkboxOne label {
background: none repeat scroll 0 0 #DDDDDD;
border-radius: 100px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) inset;
cursor: pointer;
display: block;
height: 30px;
left: 5px;
position: absolute;
top: 5px;
transition: all 0.5s ease 0s;
width: 30px;
z-index: 1;
}
I know that margin is the location of the checkbox hard coded. I am hoping there is a way to make the checkboxes location inline right after the text in the html document, like this:
Did you eat breakfast? <div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxInput" name="" />
<label for="checkboxInput"></label>
</div><br>
Did you eat lunch? <div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxInput2" name="" />
<label for="checkboxInput2"></label>
</div><br>
Did you eat dinner? <div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxInput3" name="" />
<label for="checkboxInput3"></label>
</div><br>

Let's do a proper form! Sorted out what you want now.
Correct answer Look at the fiddle - http://jsfiddle.net/Wa5s8/2/
HTML
<form>
<fieldset>
<input type="checkbox" value="1" id="checkboxInput" name="" />
<label for="checkboxInput">Did you eat breakfast?</label>
<input type="checkbox" value="1" id="checkboxInput2" name="" />
<label for="checkboxInput2">Did you eat lunch?</label>
<input type="checkbox" value="1" id="checkboxInput3" name="" />
<label for="checkboxInput3">Did you eat dinner?</label>
</fieldset>
</form>
A pinch of CSS:
input[type=checkbox] {
display:none;
}
label {
float: left;
clear: left;
width: 200px;
}
input[type=checkbox] + label:after
{
content: 'N';
background: #F00;
float: right;
}
input[type=checkbox]:checked + label:after
{
content: 'Y';
background: #FF0;
}

Possibly you could try:
HTML
<div class="row">
<input type="radio" /> <span>Radio title </span>
</div>
CSS:
.row{ display:block;}
.row span{margin:0 0 0 10px;}

Develop Reference

JavaScript is the programming language of the Web.

How can i hide labels and checkboxes in searching with Jquery? - javascript

Related

Priority Indication Button

How do I make a form redirect you after submitting the form with required inputs

"Toggle" Event and "Mouseup" methods are not working here together

Radio Input Check/Uncheck when clicked on label

Create multiple checkboxes using the same CSS style

Categories

Resources