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));
});
});
Related
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>
I currently have a bootstrap tab panel which consists of 3 tabs. Each tab has various number of checkboxes (I do not have control over this they are populated dynamically). What I am trying to achieve is to select the radio button with the id that matches my variable lets say 3. However, if the id does not match I always want to select the last check box.
This is what I have come up with so far.
var defaultSelection = 3;
if (defaultSelection) {
var radioOptions = document.querySelectorAll('[name="firstSet"], [name="secondSet"], [name="thirdSet"]');
for (var i = 0; i < radioOptions.length; i++)
{
if (radioOptions[i].id === defaultSelection)
{
document.querySelector("input[name=" + radioOptions[i].name + "][id=\'" + defaultSelection + "\']").checked = true;
} else {
//not entirly sure how to check the last item here in the particular tab
}
}
}
Markup looks like:
<div class="d-flex flex-wrap">
<label class="radio-inline">
<input type="radio" name="firstSet" id="1" value="1"> 1
</label>
<label class="radio-inline btn-sm">
<input type="radio" name="firstSet" id="2" value="2"> 2
</label>
<label class="radio-inline btn-sm radio-active">
<input type="radio" name="firstSet" id="3" value="3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="firstSet" id="4" value="4"> 4
</label>
<label class="radio-inline">
<input type="radio" name="firstSet" id="5" value="5"> 5
</label>
</div>
<div class="d-flex flex-wrap">
<label class="radio-inline">
<input type="radio" name="secondSet" id="25" value="25"> 25
</label>
<label class="radio-inline">
<input type="radio" name="secondSet" id="27" value="27"> 27
</label>
</div>
<div class="d-flex flex-wrap">
<label class="radio-inline">
<input type="radio" name="thirdSetSet" id="55" value="55"> 55
</label>
</div>
The above works to check the radio with the id which matches my variable but I'm not entirely sure how to select the last option in a particular tab if none are select or match my variable entry.
Any pointers would be helpful.
One way you could go about this is by keeping track of whether the default radio button has been found and checked, and if that's not the case, then just check the last radio button.
Here's an example that implements this solution:
var defaultSelection = 3;
if (defaultSelection) {
var firstSet = document.querySelectorAll('[name="firstSet"]');
var secondSet = document.querySelectorAll('[name="secondSet"]');
var thirdSet = document.querySelectorAll('[name="thirdSet"]');
var tabs = [].concat(firstSet, secondSet, thirdSet);
tabs.forEach(function(tab) {
// keep track of whether default has been checked and
// grab the last radio button from the tab
var isDefaultChecked = false;
var lastRadioButton = tab[tab.length - 1];
for (var i = 0; i < tab.length; i++) {
var radio = tab[i];
var isDefaultSelection = parseInt(radio.id, 10) === 3;
// check the default radio button and
// set `isDefaultChecked` to true
if (isDefaultSelection) {
radio.checked = true;
isDefaultChecked = true;
}
}
// if no radio button was checked,
// check the last radio button
if (!isDefaultChecked) {
lastRadioButton.checked = true;
}
});
}
<div class="d-flex flex-wrap">
<label class="radio-inline">
<input type="radio" name="firstSet" id="1" value="1" /> 1
</label>
<label class="radio-inline btn-sm">
<input type="radio" name="firstSet" id="2" value="2" /> 2
</label>
<label class="radio-inline btn-sm radio-active">
<input type="radio" name="firstSet" id="3" value="3" /> 3
</label>
<label class="radio-inline">
<input type="radio" name="firstSet" id="4" value="4" /> 4
</label>
<label class="radio-inline">
<input type="radio" name="firstSet" id="5" value="5" /> 5
</label>
</div>
<div class="d-flex flex-wrap">
<label class="radio-inline">
<input type="radio" name="secondSet" id="25" value="25" /> 25
</label>
<label class="radio-inline">
<input type="radio" name="secondSet" id="27" value="27" /> 27
</label>
</div>
<div class="d-flex flex-wrap">
<label class="radio-inline">
<input type="radio" name="thirdSet" id="55" value="55" /> 55
</label>
</div>
i am trying to add mutliple choice exam questions (like survey) to my site. For that i am using js and jquery. i added feature to make sure all group buttons have been checked. But the error is that I cannot resolve properly checking of selected ones. Js check only first if and if it is true then all questions have been answered true, if not then all answers are wrong.
here is my js code:
function doAjaxPost() {
var result = 4;
var rightAnswers = 0;
var allmarked = 0;
var response = "";
$('.answers').each(function() {
if ($(this).find('input[type="radio"]:checked').length > 0) {
allmarked = allmarked + 1;
} else {
alert("not all checked");
}
});
if (allmarked == result) {
allmarked = 0;
if ($("input[#name=7]:checked").val() == "right") {
rightAnswers = rightAnswers + 1;
}
if ($("input[#name=8]:checked").val() == "right") {
rightAnswers = rightAnswers + 1;
}
if ($("input[#name=9]:checked").val() == "right") {
rightAnswers = rightAnswers + 1;
}
if ($("input[#name=10]:checked").val() == "right") {
rightAnswers = rightAnswers + 1;
}
$('#info').html(rightAnswers + " / " + result);
}
}
here is my html:
<div class="clearfix single_content">
<div class="tom-right">
<h4 class="tom-right">1.4</h4>
<br />
<ul class="answers">
<input type="radio" name="9" value="1" id="9a" />
<label for="9a">1</label>
<br/>
<input type="radio" name="9" value="2" id="9b" />
<label for="9b">2</label>
<br/>
<input type="radio" name="9" value="3" id="9c" />
<label for="9c">3</label>
<br/>
<input type="radio" name="9" value="right" id="9d" />
<label for="9d">right</label>
<br/>
</ul>
</div>
</div>
<div class="clearfix single_content">
<div class="tom-right">
<h4 class="tom-right">1.5</h4>
<br />
<ul class="answers">
<input type="radio" name="10" value="1" id="10a" />
<label for="10a">1</label>
<br/>
<input type="radio" name="10" value="2" id="10b" />
<label for="10b">2</label>
<br/>
<input type="radio" name="10" value="3" id="10c" />
<label for="10c">3</label>
<br/>
<input type="radio" name="10" value="right" id="10d" />
<label for="10d">right</label>
<br/>
</ul>
</div>
</div>
i am stack to this point. it frankly seems stupid question but i am not spesialized in js. Thus, any assist would be appreciated
Because of this radio group selection, so you can only choose one; if you want to achieve that situation, you need to use checkbox to achieve;and the way to resolve ploblem is every options bind clickevent when clicking one of checkboxes,then the click func can achieve every option choosed
you can try this:
you can create an object with questions and related correct answers:
function doAjaxPost() {
var result = $('.answers').length;
var rightAnswers =0 ;
var response= "" ;
var error=false;
var correct_answers = [{question_number:1,answers_number:5},
{question_number:10,answers_number:2},
{question_number:9,answers_number:3}];
$('.answers').each(function(){
if($(this).find('input[type="radio"]:checked').length > 0){
var question_number=$(this).find('input[type="radio"]:checked').attr("name");
var answer_number =$(this).find('input[type="radio"]:checked').val();
$.each(correct_answers, function( index, value ) {
if(question_number==value.question_number && answer_number==value.answers_number)rightAnswers++;
});
}
else error=true;
});
if(error) alert("not all checked"); //display the error once
else $('#info').html(rightAnswers + " / " + result);
}
$('#check_values').click(function(){
doAjaxPost();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="clearfix single_content">
<div class="tom-right">
<h4 class="tom-right">1.4</h4> <br />
<ul class="answers">
<input type="radio" name="9" value="1" id="9a" />
<label for="9a">1</label><br/>
<input type="radio" name="9" value="2" id="9b" />
<label for="9b">2</label><br/>
<input type="radio" name="9" value="3" id="9c" />
<label for="9c">3</label><br/>
<input type="radio" name="9" value="4" id="9d" />
<label for="9d">4</label><br/>
</ul>
</div>
</div>
<div class="clearfix single_content">
<div class="tom-right">
<h4 class="tom-right">1.5</h4> <br />
<ul class="answers">
<input type="radio" name="10" value="1" id="10a" />
<label for="10a">1</label><br/>
<input type="radio" name="10" value="2" id="10b" />
<label for="10b">2</label><br/>
<input type="radio" name="10" value="3" id="10c" />
<label for="10c">3</label><br/>
<input type="radio" name="10" value="4" id="10d" />
<label for="10d">4</label><br/>
</ul>
</div>
</div>
<input type="button" id="check_values" value="Check"/>
<p id="info"></p>
This code tries to get the value of the value attribute in the checked radio button in each radio group. but can't get it to work. Thanks
let doc = {};
$('.radio-group').each(function () {
doc.id = $(this).attr('_id');
$(this).children.each(function () {
let validName = $($(this):checked).attr('value');
doc.checkedName = validName;
}
})
<div class='radio-group' _id='abc'>
<label class='radio-item'>
<input class='radio-icon' value='value 1' name='g' type='radio'></input>
<span class='radio-label'>choose me </span>
</label>
<label class='radio-item'>
<input class='radio-icon' value='value 2' name='g' type='radio'></input>
<span class='radio-label'>choose me </span>
</label>
</div>
Using $(".radio-group input:checked") you can select every checked input that is child of .radio-group.
$(".radio-group input").click(function(){
var doc = [];
$(".radio-group input:checked").each(function(index) {
var id = $(this).closest(".radio-group").attr('_id');
doc.push(id);
});
console.log(doc);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio-group" _id="id1">
<input type="radio" />
<label>Item 1</label>
</div>
<div class="radio-group" _id="id2">
<input type="radio" />
<label>Item 2</label>
</div>
<div class="radio-group" _id="id3">
<input type="radio" />
<label>Item 3</label>
</div>
<div class="radio-group" _id="id4">
<input type="radio" />
<label>Item 4</label>
</div>
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>