How to add text in input depending on a checkbox?

How to add text in input depending on a checkbox? - javascript

Wrote this code
$("#workDesign label").on("click", function() {
var input = $(this).children("input");
var tag = $(this).text();
if (input.prop("checked")) {
input.parent().addClass("selected");
alert(tag);
$("#workDesignTags").val(tag);
} else {
input.parent().removeClass("selected");
}
});
var tagList;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formRow labelBox col3 dropDownMobile" id="workDesign">
<input type="text" name="tags" id="workDesignTags">
<label>
<input type="checkbox" name="design" value="Value 1">
<span class="textBox">Value 1
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 2">
<span class="textBox">Value 2
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 3">
<span class="textBox">Value 3
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 4">
<span class="textBox">Value 4
</span>
</label>
</div>
How to do the value added, rather than replacing the old one? How to make the value removed from total value, if checkbox is unchecked? I have the layout just changes the values in input.

try:
$("#workDesign label").on("click", function() {
var input = $(this).children("input");
var tag = $(this).text();
if (input.prop("checked")) {
input.parent().addClass("selected");
val = $("#workDesignTags").val().trim() + tag;
$("#workDesignTags").val(val);
} else {
input.parent().removeClass("selected");
}
});
var tagList;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formRow labelBox col3 dropDownMobile" id="workDesign">
<input type="text" name="tags" id="workDesignTags">
<label>
<input type="checkbox" name="design" value="Value 1">
<span class="textBox">Value 1
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 2">
<span class="textBox">Value 2
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 3">
<span class="textBox">Value 3
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 4">
<span class="textBox">Value 4
</span>
</label>
</div>

$("#workDesign label").on("click", function() {
var input = $(this).children("input");
var tag = $(this).text();
if (input.prop("checked")) {
input.parent().addClass("selected");
alert(tag);
$("#workDesignTags").val($.trim($("#workDesignTags").val() + tag));
} else {
input.parent().removeClass("selected");
}
});
var tagList;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formRow labelBox col3 dropDownMobile" id="workDesign">
<input type="text" name="tags" id="workDesignTags">
<label>
<input type="checkbox" name="design" value="Value 1">
<span class="textBox">Value 1
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 2">
<span class="textBox">Value 2
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 3">
<span class="textBox">Value 3
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 4">
<span class="textBox">Value 4
</span>
</label>
</div>
You could get the input value and add that with the new value and set it as input value
Another option could be like this
var value = "";
$("#workDesign label").on("click", function() {
var input = $(this).children("input");
var tag = $(this).text();
if (input.prop("checked")) {
input.parent().addClass("selected");
value += $.trim(tag)
$("#workDesignTags").val(value);
} else {
input.parent().removeClass("selected");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formRow labelBox col3 dropDownMobile" id="workDesign">
<input type="text" name="tags" id="workDesignTags">
<label>
<input type="checkbox" name="design" value="Value 1">
<span class="textBox">Value 1
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 2">
<span class="textBox">Value 2
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 3">
<span class="textBox">Value 3
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 4">
<span class="textBox">Value 4
</span>
</label>
</div>

Related

How to remove disabled attribute from button if checked box is true?

I have a bunch of checkbox items. When I click the checkbox, I want the disabled attribute to be removed from the button, allowing the button to be clicked and a total displayed.
I've attached calcButton.removeAttribute('disabled'); to the conditional, but it's not removing the disabled attribute from the button.
var calcButton = document.getElementById("calcButton");
if (document.getElementById("total")) {
calcTotal();
}
function calcTotal() {
var itemTotal = 0;
var items = document.getElementsByTagName("input");
for (var i = 0; i < 11; i++) {
if (items[i].checked) {
itemTotal += items[i].value * 1;
calcButton.removeAttribute('disabled');
}
document.getElementById("total").innerHTML = "Your order total is: $" + itemTotal + ".00";
}
}
var payOptions = document.getElementById('payOpts');
if (calcButton.addEventListener) {
calcButton.addEventListener("click", calcTotal, false);
} else if (calcButton.attachEvent) {
calcButton.attachEvent("onclick", calcTotal);
}
calcButton.addEventListener('click', function() {
payOptions.style.display = 'block';
})
form {
display: flex;
flex-direction: column;
}
form label {
margin: 5px 0;
}
button {
width: fit-content;
}
<form>
<label for="item1" class="container">Hamburger ($5.00)
<input type="checkbox" id="item1" value="5">
<span class="checkmark"></span>
</label>
<label for="item2" class="container">Hotdog ($5.00)
<input type="checkbox" id="item2" value="5">
<span class="checkmark"></span>
</label>
<label for="item3" class="container">Jumbo Hotdog ($7.00)
<input type="checkbox" id="item3" value="7">
<span class="checkmark"></span>
</label>
<label for="item4" class="container">Corndog ($4.00)
<input type="checkbox" id="item4" value="4">
<span class="checkmark"></span>
</label>
<label for="item5" class="container">Chicken Fingers ($6.00)
<input type="checkbox" id="item5" value="5">
<span class="checkmark"></span>
</label>
<label for="item6" class="container">Nachos ($4.00)
<input type="checkbox" id="item6" value="4">
<span class="checkmark"></span>
</label>
<label for="item7" class="container">French Fries ($3.00)
<input type="checkbox" id="item7" value="3">
<span class="checkmark"></span>
</label>
<label for="item8" class="container">Soft Pretzel ($3.00)
<input type="checkbox" id="item8" value="3">
<span class="checkmark"></span>
</label>
<label for="item9" class="container">Small Drink ($2.00)
<input type="checkbox" id="item9" value="2">
<span class="checkmark"></span>
</label>
<label for="item10" class="container">Large Drink ($4.00)
<input type="checkbox" id="item10" value="4">
<span class="checkmark"></span>
</label>
<label for="item11" class="container">Bottled Water ($3.00)
<input type="checkbox" id="item11" value="3">
<span class="checkmark"></span>
</label>
<p id="total" class="priceInfo"></p>
<button type="button" id="calcButton" disabled="disabled">Pay me this!</button>
<div class="pay-options" id="payOpts" style="display: none;">
<h4>Hello World</h4>
</div>
</form>

You're attaching the onclick on the disabled calcButton, and that doesn't work as it's disabled and can't enabled itself.
calcTotal is also called at the beginning, but there aren't options selected so the calcbutton won't be enabled also
See this example. If have added another button to show that removeAttribute is working well:
var calcButton = document.getElementById("calcButton");
if (document.getElementById("total")) {
calcTotal();
}
function calcTotal() {
var itemTotal = 0;
var items = document.getElementsByTagName("input");
for (var i = 0; i < 11; i++) {
if (items[i].checked) {
itemTotal += items[i].value * 1;
calcButton.removeAttribute('disabled');
}
document.getElementById("total").innerHTML = "Your order total is: $" + itemTotal + ".00";
}
}
var payOptions = document.getElementById('payOpts');
if (calcButton.addEventListener) {
calcButton.addEventListener("click", calcTotal, false);
} else if (calcButton.attachEvent) {
calcButton.attachEvent("onclick", calcTotal);
}
document.getElementById("realCalcButton").addEventListener("click", calcTotal, false);
calcButton.addEventListener('click', function() {
payOptions.style.display = 'block';
})
form {
display: flex;
flex-direction: column;
}
form label {
margin: 5px 0;
}
button {
width: fit-content;
}
<form>
<label for="item1" class="container">Hamburger ($5.00)
<input type="checkbox" id="item1" value="5">
<span class="checkmark"></span>
</label>
<label for="item2" class="container">Hotdog ($5.00)
<input type="checkbox" id="item2" value="5">
<span class="checkmark"></span>
</label>
<label for="item3" class="container">Jumbo Hotdog ($7.00)
<input type="checkbox" id="item3" value="7">
<span class="checkmark"></span>
</label>
<label for="item4" class="container">Corndog ($4.00)
<input type="checkbox" id="item4" value="4">
<span class="checkmark"></span>
</label>
<label for="item5" class="container">Chicken Fingers ($6.00)
<input type="checkbox" id="item5" value="5">
<span class="checkmark"></span>
</label>
<label for="item6" class="container">Nachos ($4.00)
<input type="checkbox" id="item6" value="4">
<span class="checkmark"></span>
</label>
<label for="item7" class="container">French Fries ($3.00)
<input type="checkbox" id="item7" value="3">
<span class="checkmark"></span>
</label>
<label for="item8" class="container">Soft Pretzel ($3.00)
<input type="checkbox" id="item8" value="3">
<span class="checkmark"></span>
</label>
<label for="item9" class="container">Small Drink ($2.00)
<input type="checkbox" id="item9" value="2">
<span class="checkmark"></span>
</label>
<label for="item10" class="container">Large Drink ($4.00)
<input type="checkbox" id="item10" value="4">
<span class="checkmark"></span>
</label>
<label for="item11" class="container">Bottled Water ($3.00)
<input type="checkbox" id="item11" value="3">
<span class="checkmark"></span>
</label>
<p id="total" class="priceInfo"></p>
<button type="button" id="realCalcButton">Calculate</button>
<button type="button" id="calcButton" disabled="disabled">Pay me this!</button>
<div class="pay-options" id="payOpts" style="display: none;">
<h4>Hello World</h4>
</div>
</form>

live search in input with checkbox filter value

I have a select in which the checkbox is located, it also contains an input through which I want to find the necessary items. I did the search like this, first I accept an array and then lowercase it and search for matches. Somehow I need to match the required id to exclude unavailable ones and display the necessary checkboxes
In simple terms, I want to filter my query and display it in real time.
I must use only vanila JS
let search = document.getElementById("search");
let s = document.querySelectorAll("input[type=checkbox][name=one]");
//s.forEach((item) => {
search.addEventListener("input", () => {
let data = [];
let count = Array.from(s).map((i) => i.value.toLowerCase().includes(search.value.toLowerCase()));
console.log(count);
});
//});
label { display: block; }
<div id="checkboxes2">
<div class="control">
<input class="input" type="text" placeholder="Поиск" id="search" />
<span class="icon is-small is-left">
<span class="searchIcon"></span>
</span>
</div>
<label for="one2" class="select_label">
<input type="checkbox" value="Показать все" name="one" id="one2" />Показать все
<span class="select_label-icon"></span
></label>
<label for="one2" class="select_label">
<input type="checkbox" value="Показать все" name="one" id="one2" />Показать все
<span class="select_label-icon"></span
></label>
<label for="one2" class="select_label">
<input type="checkbox" value="Показать все" name="one" id="one2" />Показать все
<span class="select_label-icon"></span
></label>
<label for="one2" class="select_label">
<input type="checkbox" value="Показать все" name="one" id="one2" />Показать все
<span class="select_label-icon"></span
></label>
<label for="one2" class="select_label">
<input type="checkbox" name="one2" id="one2" />Показать все
<span class="select_label-icon"></span
></label>
<label for="one3" class="select_label">
<input type="checkbox" value="Наименование лекарства" name="one" id="one3" />Наименование лекарства
<span class="select_label-icon"></span
></label>
<label for="one4" class="select_label">
<input type="checkbox" value="Наименование лекарства" name="one" id="one4" />Наименование лекарства
<span class="select_label-icon"></span
></label>
<label for="one5" class="select_label">
<input type="checkbox" value="Наименование лекарства в две длинных строки" name="one" id="one5" />Наименование лекарства
в две длинных строки <span class="select_label-icon"></span
></label>
</div>

Try this:
const search = document.getElementById("search");
const labels = document.querySelectorAll("#checkboxes2 > label");
search.addEventListener("input", () => Array.from(labels).forEach((element) => element.style.display = element.childNodes[1].id.toLowerCase().includes(search.value.toLowerCase()) ? "inline" : "none"))
<div id="checkboxes2">
<div class="control">
<input class="input" type="text" placeholder="Search" id="search" />
<span class="icon is-small is-left">
<span class="searchIcon"></span>
</span>
</div>
<label for="car" class="select_label">
<input type="checkbox" value="Car" name="one" id="car" />Car
<span class="select_label-icon"></span>
</label>
<label for="house" class="select_label">
<input type="checkbox" value="House" name="one" id="house" />House
<span class="select_label-icon"></span>
</label>
<label for="nice" class="select_label">
<input type="checkbox" value="Nice" name="one" id="nice" />nice
<span class="select_label-icon"></span>
</label>
<label for="beach" class="select_label">
<input type="checkbox" value="Beach" name="one" id="beach" />Beach
<span class="select_label-icon"></span>
</label>
</div>
I use the ids to compare with the search query. (You can change that as well)
I use style to display the element or not. (You could also sort or hide them otherwise)

siply using correct names on your checkboxes :
const
SearchInput = document.querySelector('input#search')
, ChkBxForm = document.querySelector('#ChkBx-form')
;
ChkBxForm.onsubmit = e => e.preventDefault() // disable the natural form submit
SearchInput.oninput =()=>
{
let checkedBoxes = Object.fromEntries(new FormData(ChkBxForm).entries())
console.clear( )
console.log( checkedBoxes )
}
<input class="input" type="text" placeholder="Search" id="search" />
<form id="ChkBx-form">
<label> <input type="checkbox" name="car" />Car </label>
<label> <input type="checkbox" name="house" />House </label>
<label> <input type="checkbox" name="nice" />nice </label>
<label> <input type="checkbox" name="beach" />Beach </label>
</form>

How to auto check radio button basis of two radio button groups

<div class="product_colors">
<span class="header" style="display:block;">Color</span>
<label class="color_label active">
<input type="radio" name="product_color" value="gold" >Gold
<span style="""></span>
</label>
<label class="color_label">
<input type="radio" name="product_color" value="rose gold">Rose Gold
<span style="" data-title="rose gold"></span>
</label>
<label class="color_label">
<input type="radio" name="product_color" value="silver" > Silver
<span style="" data-title="silver"></span>
</label>
</div>
<div class="product_stones">
<span class="header" style="display:block;">Stone</span>
<label class="stone_label">
<input type="radio" name="product_stone" value="malachite" >malachite
</label>
<label class="stone_label active">
<input type="radio" name="product_stone" value="tiger-eye" > tiger-eye
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="black" > black
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="blue" > blue
</label>
</div>
<div class="combination">
Combination
<div class="hidden">
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye
<input type="radio" name="combination" class="hidden_wrap" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black
<input type="radio" name="combination" class="hidden_wrap" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue
</div>
</div>
here is my output image
I want to change combination radio button value to be select automatically on the basis of selected color and stone. Can someone help me to get rid of this problem.
Here is my code I've tried everything but I am new in JS so I can't find solution of this problem
Color
Gold
Rose Gold
Silver
<div class="product_stones">
<span class="header" style="display:block;">Stone</span>
<label class="stone_label">
<input type="radio" name="product_stone" value="malachite" >malachite
</label>
<label class="stone_label active">
<input type="radio" name="product_stone" value="tiger-eye" > tiger-eye
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="black" > black
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="blue" > blue
</label>
</div>
<div class="combination">
Combination
<div class="hidden">
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye
<input type="radio" name="combination" class="hidden_wrap" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black
<input type="radio" name="combination" class="hidden_wrap" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue
</div>
</div>

Here is another solution I've tried which is not edit HTML.
My solution is going to find combination radio button that has proper data-color and data-stone
$("input[name^='product_']").on('change', (e) => {
$("input[name='combination']").prop('checked', false);
var productColor = $("input[name='product_color']:checked").val();
var productStone = $("input[name='product_stone']:checked").val();
if (productColor !== undefined && productStone !== undefined) {
if ($(`input[data-color='${productColor}'][data-stone='${productStone}']`).length) {
$(`input[data-color='${productColor}'][data-stone='${productStone}']`).trigger('click');
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product_colors">
<span class="header" style="display:block;">Color</span>
<label class="color_label active">
<input type="radio" name="product_color" value="gold" >Gold
<span style="""></span>
</label>
<label class="color_label">
<input type="radio" name="product_color" value="rose gold">Rose Gold
<span style="" data-title="rose gold"></span>
</label>
<label class="color_label">
<input type="radio" name="product_color" value="silver" > Silver
<span style="" data-title="silver"></span>
</label>
</div>
<div class="product_stones">
<span class="header" style="display:block;">Stone</span>
<label class="stone_label">
<input type="radio" name="product_stone" value="malachite" >malachite
</label>
<label class="stone_label active">
<input type="radio" name="product_stone" value="tiger-eye" > tiger-eye
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="black" > black
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="blue" > blue
</label>
</div>
<div class="combination">
Combination
<div class="hidden">
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye
<input type="radio" name="combination" class="hidden_wrap" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black
<input type="radio" name="combination" class="hidden_wrap" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue
</div>
</div>

You need some jQuery to achieve this
<script>
$(document).ready(function() {
$('.product_description').click(function() {
var color = $('input[name="product_color"]:checked').val();
var stone = $('input[name="product_stone"]:checked').val();
var combinationClass = color + "-" + stone
if ($('.' + combinationClass).length) {
$('.' + combinationClass).attr('checked', true)
} else {
//If the class name of the combination is not found
alert("something went wrong");
}
});
});
</script>
HTML Code
<!--
# Added common class for all the stone and colour radio buttons to enable trigger
# Added Class based on the colour and stone value in the combination
# Added checked attribute to stone and colour radio buttons for on Load default selection
-->
<div class="product_colors">
<span class="header" style="display:block;">Color</span>
<label class="color_label">
<input type="radio" class="product_description" name="product_color" value="gold" checked>Gold
<span></span>
</label>
<label class="color_label">
<input type="radio" class="product_description" name="product_color" value="rose-gold">Rose Gold
<span data-title="rose gold"></span>
</label>
<label class="color_label">
<input type="radio" class="product_description" name="product_color" value="silver"> Silver
<span data-title="silver"></span>
</label>
</div>
<div class="product_stones">
<span class="header" style="display:block;">Stone</span>
<label class="stone_label">
<input type="radio" class="product_description" name="product_stone" value="malachite" checked>malachite
</label>
<label class="stone_label active">
<input type="radio" class="product_description" name="product_stone" value="tiger-eye"> tiger-eye
</label>
<label class="stone_label">
<input type="radio" class="product_description" name="product_stone" value="black"> black
</label>
<label class="stone_label">
<input type="radio" class="product_description" name="product_stone" value="blue"> blue
</label>
</div>
<div class="combination">
Combination
<div class="hidden">
<input type="radio" name="combination" class="hidden_wrap gold-malachite" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite
<input type="radio" name="combination" class="hidden_wrap gold-toger-eye" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye
<input type="radio" name="combination" class="hidden_wrap rose-gold-black" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black
<input type="radio" name="combination" class="hidden_wrap silver-blue" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue
</div>
</div>

Retain Multiple Radio Buttons checked after page refresh

In a form there are 2 group of radio buttons.
In the first group named Result, there are 4 option: id="ok", id="fa", id="fp", id="bp".
In the second group named ResultCategories, there are 9 option: id="cat1" .... id="cat9".
What I want:
a. If ok is clicked, ResultCategories will be unchecked (if already checked).
b. If fp or bp is clicked, cat9 of ResultCategories will be checked.
c. If one of the cat1 to cat8 of ResultCategories is clicked, fa of Result will be checked.
d. When radio buttons are clicked page will refresh and checked radio buttons remain checked.
I got a to c working but d is not working. It retains checked radio for only one group.
Here is what tried:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<form action="" method="POST">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Quality Check</legend>
<div style="float: right;">
<button type="submit" id="submit" name="submit" class="btn btn-info">Complete</button>
</div>
<br />
<br />
<br />
<div class="row">
<div class="column">
<div id="Result">
<label>Result:</label>
<label class="radioContainer">Ok
<input type="radio" name="Result" id ="ok" value="1" />
<span class="circle"></span>
</label>
<label class="radioContainer">Fasle Alarm
<input type="radio" name="Result" id="fa" value="2" />
<span class="circle"></span>
</label>
<label class="radioContainer">False Pass
<input type="radio" name="Result" id="fp" value="3" />
<span class="circle"></span>
</label>
<label class="radioContainer">Blatant Pass
<input type="radio" name="Result" id="bp" value="4" />
<span class="circle"></span>
</label>
</div>
</div>
<br />
<div class="column">
<div id="ResultCategories">
<label>Result Categories:</label>
<div>
<label class="radioContainer">Cat 1
<input type="radio" name="ResultCategories" id="cat1" value="1" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 2
<input type="radio" name="ResultCategories" id="cat2" value="2" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 3
<input type="radio" name="ResultCategories" id="cat3" value="3" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 4
<input type="radio" name="ResultCategories" id="cat4" value="4" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 5
<input type="radio" name="ResultCategories" id="cat5" value="5" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 6
<input type="radio" name="ResultCategories" id="cat6" value="6" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 7
<input type="radio" name="ResultCategories" id="cat7" value="7" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 8
<input type="radio" name="ResultCategories" id="cat8" value="8" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 9
<input type="radio" name="ResultCategories" id="cat9" value="9" />
<span class="circle"></span>
</label>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</body>
<script> $('input:radio').click(function() {
location.reload(); }); </script>
I have added a fiddle here: Fiddle
$(document).ready(function() {
var result_dom = $('input[name="Result"]');
var categories_dom = $('input[name="ResultCategories"]');
var cat9 = $('#cat9');
var fa = $('#fa')
result_dom.on('change', function() {
var checked_val = $(this).val();
if (checked_val == 1) {
categories_dom.prop('checked', false);
} else if (checked_val == 3 || checked_val == 4) {
cat9.prop('checked', true);
}
});
categories_dom.on('change', function() {
var checked_val = $(this).val();
if (checked_val >= 1 && checked_val <= 8) {
fa.prop('checked', true);
}
});
});
$(document).ready(function(){
if(localStorage.selected) {
$('#' + localStorage.selected ).attr('checked', true);
}
$('.radio').click(function(){
localStorage.setItem("selected", this.id);
});
});
How can I retain both group of radio buttons checked?
Updated Code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var result_dom = $('input[name="Result"]');
var categories_dom = $('input[name="ResultCategories"]');
var cat9 = $('#cat9');
var fa = $('#fa')
result_dom.on('change', function() {
var checked_val = $(this).val();
if (checked_val == 1) {
categories_dom.prop('checked', false);
} else if (checked_val == 3 || checked_val == 4) {
cat9.prop('checked', true);
}
});
categories_dom.on('change', function() {
var checked_val = $(this).val();
if (checked_val >= 1 && checked_val <= 8) {
fa.prop('checked', true);
}
});
});$(document).ready(function() {
var result_dom = $('input[name="Result"]');
var categories_dom = $('input[name="ResultCategories"]');
var cat9 = $('#cat9');
var fa = $('#fa')
result_dom.on('change', function() {
var checked_val = $(this).val();
if (checked_val == 1) {
categories_dom.prop('checked', false);
} else if (checked_val == 3 || checked_val == 4) {
cat9.prop('checked', true);
}
});
categories_dom.on('change', function() {
var checked_val = $(this).val();
if (checked_val >= 1 && checked_val <= 8) {
fa.prop('checked', true);
}
});
});
$(document).ready(function(){
//get the selected radios from storage, or create a new empty object
var radioGroups = JSON.parse(localStorage.getItem('selected') || '{}');
//loop over the ids we previously selected and select them again
Object.values(radioGroups).forEach(function(radioId){
document.getElementById(radioId).checked = true;
});
//handle the click of each radio
$('.radio').on('click', function(){
//set the id in the object based on the radio group name
//the name lets us segregate the values and easily replace
//previously selected radios in the same group
radioGroups[this.name] = this.id;
//finally store the updated object in storage for later use
localStorage.setItem("selected", JSON.stringify(radioGroups));
});
});
</script>
</head>
<body>
<div class="container">
<form action="" method="POST">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Quality Check</legend>
<div style="float: right;"><button type="submit" id="submit" name="submit" class="btn btn-info">Complete</button></div>
<br /> <br /> <br />
<div class="row">
<div class="column">
<div id="Result">
<label>Result:</label>
<label class="radioContainer">Ok
<input class="radio" type="radio" name="Result" id ="ok" value="1">
<span class="circle"></span>
</label>
<label class="radioContainer">Fasle Alarm <input class="radio" type="radio" name="Result" id="fa" value="2">
<span class="circle"></span>
</label>
<label class="radioContainer">False Pass <input class="radio" type="radio" name="Result" id="fp" value="3" >
<span class="circle"></span>
</label>
<label class="radioContainer">Blatant Pass <input class="radio" type="radio" name="Result" id="bp" value="4">
<span class="circle"></span>
</label>
</div>
</div>
<br />
<div class="column">
<div id="ResultCategories"><label>Result Categories:</label>
<div>
<label class="radioContainer">Cat 1 <input class="radio" type="radio" name="ResultCategories" id="cat1" value="1">
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 2 <input class="radio" type="radio" name="ResultCategories" id="cat2" value="2">
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 3 <input class="radio" type="radio" name="ResultCategories" id="cat3" value="3">
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 4 <input class="radio" type="radio" name="ResultCategories" id="cat4" value="4">
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 5 <input class="radio" type="radio" name="ResultCategories" id="cat5" value="5">
<span class="circle"></span>
</label> <label class="radioContainer">Cat 6 <input class="radio" type="radio" name="ResultCategories" id="cat6" value="6">
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 7 <input class="radio" type="radio" name="ResultCategories" id="cat7" value="7">
<span class="circle"></span>
</label> <label class="radioContainer">Cat 8 <input class="radio" type="radio" name="ResultCategories" id="cat8" value="8">
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 9 <input class="radio" type="radio" name="ResultCategories" id="cat9" value="9">
<span class="circle"></span>
</label>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</body>
<script>
$('input:radio').click(function() {
location.reload();
});
</script>

$(document).ready(function(){
//get the selected radios from storage, or create a new empty object
var radioGroups = JSON.parse(localStorage.getItem('selected') || '{}');
//loop over the ids we previously selected and select them again
Object.values(radioGroups).forEach(function(radioId){
document.getElementById(radioId).checked = true;
});
//handle the click of each radio
$('.radio').on('click', function(){
//set the id in the object based on the radio group name
//the name lets us segregate the values and easily replace
//previously selected radios in the same group
radioGroups[this.name] = this.id;
//finally store the updated object in storage for later use
localStorage.setItem("selected", JSON.stringify(radioGroups));
});
});

How to show item selected from dropdown should not appear in checkbox list

On my page there is a dropdown list of items (Main Complaint) and a checkbox list on a popup (Additional Complaint) as shown in above image.
The popup checkbox list of Additional Complaint is like below (There are more items in my list so list is in four columns):
HTML code
<label class="question-name" ng-class="{error:hasError()}"> <span class="ng-binding" ng-hide="question.nameHiddenOnMobile">Main Complaint </span> <span class="icon-required" ng-show="question.required"></span> </label>
<select name="Language.PrimarySpoken" ng-hide="showAddAnswer" ng-model="question.response.value" ng-options="a.text as a.getText() for a in question.answers.items" id="Language.PrimarySpoken" ng-value="a.text" class="input-wide " ng-class="{error:hasError()}" ng-change="selectAnswer()">
<option class="hidden" disabled="disabled" value=""></option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
<option value="Five">Five</option>
<option value="Six">Six</option>
<option value="Seven">Seven</option>
<option value="Eight">Eight</option>
</select>
<label class="question-name" ng-class="{error:hasError()}"> <span class="ng-binding" ng-hide="question.nameHiddenOnMobile">Additional Complaint </span> <span class="icon-required" ng-show="question.required"></span> </label>
<div class="form-row added ng-binding content" ng-bind-html="question.getText()" id="text" ></div>
<div class="form-row addlink ng-binding" ng-bind-html="question.getText()"><em><a class='inline' href="#inline_content">+ Add/Edit</a></em></div>
<div style='display:none'>
<div id='inline_content' style='padding:25px; background:#fff; font-size: 17px;'>
<form action="" id="popup_form">
<div class="added">
<div class="column-left">
<label class="checkbox" for="checkbox1" style="font-size:20px;">
<input type="checkbox" name="complaint" value="One" id="checkbox1" data-toggle="checkbox">
One
</label>
<br/>
<label class="checkbox" for="checkbox2" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Two" id="checkbox2" data-toggle="checkbox">
Two
</label>
<br/>
</div>
<div class="column-center">
<label class="checkbox" for="checkbox3" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Three" id="checkbox3" data-toggle="checkbox">
Three
</label>
<br/>
<label class="checkbox" for="checkbox4" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Four" id="checkbox4" data-toggle="checkbox">
Four
</label>
<br/>
</div>
<div class="column-center-right">
<label class="checkbox" for="checkbox5" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Five" id="checkbox5" data-toggle="checkbox">
Five
</label>
<br/>
<label class="checkbox" for="checkbox6" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Six" id="checkbox6" data-toggle="checkbox">
Six
</label>
<br/>
</div>
<div class="column-right">
<label class="checkbox" for="checkbox7" style="font-size:20px;">
<input type="checkbox" name="complaint" value=" Seven" id="checkbox7" data-toggle="checkbox">
Seven
</label>
<br/>
<label class="checkbox" for="checkbox8" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Eight" id="checkbox8" data-toggle="checkbox">
Eight
</label>
<br/>
</div>
</div>
<br/>
<input type="submit" name="submit" id="update" class="button button-orange" style="width: 90px; margin-top: 450px;
margin-left: -533px;" value="Update">
<input type="submit" name="cancel" id="cancel" class="button button-orange" style="width: 90px; background-color:#36606e;" value="Cancel">
</form>
</div>
</div>
JS code
$(document).ready(function(){
$(".inline").colorbox({inline:true,opacity:0.7, fixed:true, innerWidth:1100, innerHeight:550, scrolling:false});
//array to store checkbox values
checkValues = new Array();
document.getElementById('update').onclick = function(){
//capture all text in a variable
var textStr = $('<ul></ul>');
//iterate all checkbox values to create ul
$.each(checkValues, function( index, value ){
textStr.append('<li>'+value+'</li>');
});
//add text
$("#text").html(textStr);
parent.$.colorbox.close();
return false;
};
//add change handler for checkbox
$('input:checkbox[name=complaint]').change(function(){
value = $(this).val();
if(this.checked)
checkValues.push(value);
else
{ //Removing by value
checkValues = $.grep(checkValues, function(n, i) {
return n !== value;
});
}
});
document.getElementById('cancel').onclick = function(){
parent.$.colorbox.close();
return false;
};
});
Question:
If the 'One' item is selected from the dropdown list of Main Complaint, then in the Additional Complaint checkbox list that 'One' item should not appear like below. But the empty space also should not be there.
Can anyone please tell me, how do I get that working using Jquery/JS?
Thanks in advance.

I could not develop a modal window in fiddle but i have written Javascript logic, hope you will find it helpful, working fiddle
JAVASCRIPT
function selectAnswer(sel){
var a= document.querySelectorAll('label');
console.log(this.value);
for(i=0;i<a.length;i++){
a[i].style.display='inline'
}
document.querySelectorAll('.checkbox'+sel.value)[0].style.display='none';
}
while i change your onchange function to this->
onchange="selectAnswer(this)"
Hoping this helps you.

<div style="display:none">
<label class="checkbox" for="checkbox1" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Three" id="checkbox3" data-toggle="checkbox">
One
</label>
</div>
<div >
<label class="checkbox" for="checkbox1" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Four" id="checkbox4" data-toggle="checkbox">
Two
</label>
<br/>
</div>
add div to all labels and apply the css property "display:none" when you click the checkbox hope this will work

Develop Reference

JavaScript is the programming language of the Web.

How to add text in input depending on a checkbox? - javascript

Related

How to remove disabled attribute from button if checked box is true?

live search in input with checkbox filter value

How to auto check radio button basis of two radio button groups

Retain Multiple Radio Buttons checked after page refresh

How to show item selected from dropdown should not appear in checkbox list

Categories

Resources