Show different ellements if any checkbox is checked in jquery - javascript

I have the following HTML structure:
<div>
<span class="city-search-text">Choose City</span>
</div>
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />1</label>
<label><input type="checkbox" name="option[]" value="2" />2</label>
<label><input type="checkbox" name="option[]" value="3" />3</label>
<label><input type="checkbox" name="option[]" value="4" />4</label>
</div>
If any checkbox is selected, span with class city-search-text should be replace with:
<a class="cancel-all" href="#">Cancel all</a>
When i uncheck all check boxes, link with class cancel-all should be replaced with span with class city-search-text.
I have this jquery code. It replaces the span when i check some box, but doesn't replace it back when i uncheck all checkboxes.
var Checkboxes = $('.multiselect').find(':checkbox');
var CitySearch = '<span class="city-search-text">Choose City</span>';
var InactiveText = $('.city-search-text');
var CancellAll = '<a class="cancel-all" href="#">Cancell All</a>';
var ActiveText = $('.cancel-all');
Checkboxes.click(function(){
if(Checkboxes.is(':checked')){
InactiveText.replaceWith(CancellAll);
}
else{
ActiveText.replaceWith(CitySearch);
}
});

jQuery is not live on the DOM all the time. You'll have to explicitly look for the element each time you want to replace. So do not use the variables ActiveText & InactiveText, instead use $(".cancel-all").replaceWith(CitySearch) and $(".city-search-text").replaceWith(CancelAll)

You shouldn't replace your content all the time. Just show and hide your elements when needed:
$(function(){
var Checkboxes = $('.multiselect input[type=checkbox]');
var CitySearch = $('.city-search-text');
var CancelAll = $('.cancel-all');
CitySearch.show();
CancelAll.hide();
Checkboxes.click(function(){
if(Checkboxes.is(':checked')){
CitySearch.hide();
CancelAll.show();
}
else{
CitySearch.show();
CancelAll.hide();
}
});
});
Fiddle

Try this:
JavaScript:
var checkbox = $('.multiselect').find(':checkbox');
var choose = $('.city-search-text');
var cancel = $('.cancel-all');
checkbox.click(function(){
if(checkbox.is(':checked')){
cancel.show();
choose.hide();
}
else {
cancel.hide();
choose.show();
}
});
HTML:
<div>
<span class="city-search-text">Choose City</span>
<a class="cancel-all" href="#">Cancel all</a>
</div>
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />1</label>
<label><input type="checkbox" name="option[]" value="2" />2</label>
<label><input type="checkbox" name="option[]" value="3" />3</label>
<label><input type="checkbox" name="option[]" value="4" />4</label>
</div>
Fiddle: http://jsfiddle.net/aSa3T/

Instead of replacing the html. You can show and hide the options you want.
html
<div>
<span class="city-search-text">Choose City</span>
<a style="display:none" class="cancel-all" href="#">Cancell All</a>
</div>
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />1</label>
<label><input type="checkbox" name="option[]" value="2" />2</label>
<label><input type="checkbox" name="option[]" value="3" />3</label>
<label><input type="checkbox" name="option[]" value="4" />4</label>
</div>
js
$(".multiselect :checkbox").click(function()
{
if($(".multiselect :checked").length > 0)
{
$(".city-search-text").hide();
$(".cancel-all").show();
}
else
{
$(".city-search-text").show();
$(".cancel-all").hide();
}
});

Related

How to save the input from a radio input in html/js

Hello I need your help to find a way to save my radio input and print it to the screen so I know that it is saved. I have this HTML:
if (document.getElementById('a1').checked) {
rate_value1 = document.getElementById('a1').value;
document.writeln(rate_value1);
}
if (document.getElementById('a2').checked) {
rate_value2 = document.getElementById('a2').value;
document.writeln(rate_value2);
}
if (document.getElementById('a3').checked) {
rate_value3 = document.getElementById('a3').value;
document.writeln(rate_value3);
}
if (document.getElementById('a4').checked) {
rate_value4 = document.getElementById('a4').value;
document.writeln(rate_value4);
}
if (document.getElementById('a5').checked) {
rate_value5 = document.getElementById('a5').value;
document.writeln(rate_value5);
}
<div class='input-form' id="div1">
<h4 id="myText" contenteditable="true">Customize</h4>
<input type="radio" name="rating" value="5" id="a5" ><label for="5">5</label>
<input type="radio" name="rating" value="4" id="a4" ><label for="4">4</label>
<input type="radio" name="rating" value="3" id="a3" ><label for="3">3</label>
<input type="radio" name="rating" value="2" id="a2" ><label for="2">2</label>
<input type="radio" name="rating" value="1" id="a1" ><label for="1">1</label>
</div>
<button type='button' id='but_add' value='Add new'>Add Rating Nums</button>
Thank you for your time
Try creating another element above your <div> and target it whenever you click a radio button.
<p id="details"></p>
<div>
<input type="radio" name="rating" value="5" id="a5" Onclick="display(this.value)" ><label >5</label>
</div>
In your js:
<script>
function display(x){
document.getElementById('details').innerHTML = x;
}
</script>

jQuery - Calculate the value by multiplying it by the checkbox values

I need to calculate the value total, which is a product of initial value (let's say 10) and the factors A, B, C and D, which are equal to, let's say 2, 3, 4 and 5.
The combination of factors should be selected by user via checking the corresponding boxes. The problem is that I need to repeat this many times independently in a form and the solution below (for two of these sections) does not separate this process correctly. If these were text values, I would do e.g. var $text = $(".result", $section);
Basically, I do not understand how to relate numerical variable to these sections. Also, it would be great to have this initial value (10) in the Result field even if none of the boxes are checked.
$(document).ready(function() {
$(".factor-checkbox").click(function(event) {
var $section = $(this).closest(".section");
var total = 10;
$(".factor-checkbox:checked").each(function() {
total *= parseInt($(this).val());
});
$('.result').val(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" class="result"></label>
</div>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" class="result"></label>
</div>
I assume that you want the rows to be independent:
$(document).ready(function() {
$(".factor-checkbox").click(function(event) {
var $section = $(this).closest(".section"),
initial = parseInt($section.find('.result').data('initial')),
total = initial;
$section.find("input:checked").each(function() {
total *= parseInt($(this).val());
});
$section.find('.result').val(total === initial ? initial : total);
});
// getting the total values
$(".res_button").click(function() {
var $section = $(this).closest(".section");
var total = $section.find('.result').val();
console.log(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" data-initial="10" value="10" class="result"></label>
<label><button class="res_button">Result 1 line</button></label>
</div>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" data-initial="20" value="20" class="result"></label>
<label><button class="res_button">Result 2 line</button></label>
</div>
$(document).ready(function() {
$(".factor-checkbox").click(function() {
var $section= $(this).closest(".section")
var total = 10;
$section.find(".factor-checkbox:checked").each(function() {
total *= parseInt($(this).val());
});
$section.find(".result").val(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" value="10" class="result"></label>
</div>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" value="10" class="result"></label>
</div>

Checking which checkbox was checked

I am implementing Multiple select with checkboxes and jQuery as described at http://www.1stwebdesigns.com/blog/development/multiple-select-with-checkboxes-and-jquery
This is the example shown in the website:
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />Green</label>
<label><input type="checkbox" name="option[]" value="2" />Red</label>
<label><input type="checkbox" name="option[]" value="3" />Blue</label>
<label><input type="checkbox" name="option[]" value="4" />Orange</label>
<label><input type="checkbox" name="option[]" value="5" />Purple</label>
<label><input type="checkbox" name="option[]" value="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>
The dropdown list with checkboxes is showing as expected. Please note that there are three such lists being displayed on one page. How to identify them individually?
The question is how do I determine using javascript which of the checkboxes under each of the lists have been selected. I also need to obtain the value of the selected item. Which of these have to tagged with an id?
$('input[type="checkbox"]').on('change',function(){
$(this).closest('.multiselect').find('span').empty();
$(this).closest('.multiselect').find('input[type="checkbox"]:checked').each(function(){
$(this).closest('.multiselect').find('span').append($(this).val()+' | ');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />Green</label>
<label><input type="checkbox" name="option[]" value="2" />Red</label>
<label><input type="checkbox" name="option[]" value="3" />Blue</label>
<label><input type="checkbox" name="option[]" value="4" />Orange</label>
<label><input type="checkbox" name="option[]" value="5" />Purple</label>
<label><input type="checkbox" name="option[]" value="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>
<br>
Checked values: <span></span>
</div>
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />Green</label>
<label><input type="checkbox" name="option[]" value="2" />Red</label>
<label><input type="checkbox" name="option[]" value="3" />Blue</label>
<label><input type="checkbox" name="option[]" value="4" />Orange</label>
<label><input type="checkbox" name="option[]" value="5" />Purple</label>
<label><input type="checkbox" name="option[]" value="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>
<br>
Checked values: <span></span>
</div>
you can try this below, it will display the value of each checkbox who is checked
function check(){
var e = document.getElementsByClassName('check-box');
var total = e.length;
for (var i=0; i<total; i++){
if (total[i].checked){ alert(total[i].value); }
// or alert(i); if you just need the index
}
}
Here is an example which may help you:
$(':checkbox').change(function(){
var liste2 = $(':checkbox:checked').map(function() {
return this.value;
}).get();
$('span').text(liste2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />Green</label>
<label><input type="checkbox" name="option[]" value="2" />Red</label>
<label><input type="checkbox" name="option[]" value="3" />Blue</label>
<label><input type="checkbox" name="option[]" value="4" />Orange</label>
<label><input type="checkbox" name="option[]" value="5" />Purple</label>
<label><input type="checkbox" name="option[]" value="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>
<br>
Checked values: <span></span>
</div>

Change innerhtml of label when radio button is checked

I want to add innerhtml to my label, when a radio button is checked.
By default the label does not have any value.
I want to change the value of the label based on the value of the radio button.
But I want to define my own value for this.
So the label for value 1 should be: "Label 1"
Label for value 2 should be "Label 2" etc.
I use this for star rating, so when a next radio button is checked, it should remove the value of the previous label.
This is my current html:
<ul class="rating">
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio">
<label class="full" for="Degelijkheid-1-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio">
<label class="full" for="Degelijkheid-2-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio">
<label class="full" for="Degelijkheid-3-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio">
<label class="full" for="Degelijkheid-4-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio">
<label class="full" for="Degelijkheid-5-5"></label>
</span>
</li>
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[2]" id="Design-1-5" value="1" class="radio">
<label class="full" for="Design-1-5"></label>
<input type="radio" name="ratings[2]" id="Design-2-5" value="2" class="radio">
<label class="full" for="Design-2-5"></label>
<input type="radio" name="ratings[2]" id="Design-3-5" value="3" class="radio">
<label class="full" for="Design-3-5"></label>
<input type="radio" name="ratings[2]" id="Design-4-5" value="4" class="radio">
<label class="full" for="Design-4-5"></label>
<input type="radio" name="ratings[2]" id="Design-5-5" value="5" class="radio">
<label class="full" for="Design-5-5"></label>
</span>
</li>
</ul>
Try solution acc. to you.
You can combile "Label" as string to rvalue variable.
i.e var rvalue="Label"+$(this).attr('value');
like as:
$('.radio[name="rating[2]"]').change(function(){
var rvalue='';
if($(this).attr('value')=='1')
{
rvalue='Bad';
}
else if($(this).attr('value')=='5')
{
rvalue='Amazing';
}
$(this).parent('.ratingSelector').find('.full').html('');
$(this).next('label').html(rvalue);
});
Working example: http://jsfiddle.net/7wLbyn2c/4/
<input type="radio" onClick="getInnerHtml($(this))">
// call getInnerHtml function in all radio buttons and then write the function
function getInnerHtml(thisVal) {
alert(thisVal.innerHtml());
}
use the below code
<input type="radio" name = 'somename' onclick="getvalue(this)">
<script>
function getvalue(ref) {
alert(ref.value);
}
</script>
We are just passing the reference to this particular radio button as parameter in the onclick event function and then simply use .value attribute used in javascript. You can also use onchange event.
Edited
function getvalue(ref) {
for(i=ref.value;i<=5;i++)
{
$(this).next('label').appned(i);
}
}
Try this
$('input:radio').click(function() {
$('label').text('');
$(this).next('label').html('Label '+$(this).attr('value'));
});
http://jsfiddle.net/nm8ha2p9/1/
Well I did something with pure JS. I hope it helps you. It's on codepen. This are functions I used:
function setValue(obj)
{
if(obj.checked){
clearLabels();
var lbls = document.getElementsByTagName("LABEL");
var lbl = undefined;
for(var i=0;i<lbls.length; i++)
{
if(lbls[i].htmlFor == obj.id)
{
lbl = lbls[i];
break;
}
}
if(lbl != undefined){
lbl.innerHTML = obj.value;
}
}
}
function clearLabels()
{
var lbls = document.getElementsByTagName("LABEL");
for(var i=0;i<lbls.length;i++){
lbls[i].innerHTML="";
}
}
Using pure JS, no jQuery.
Labels are set in your HTML, so you can easily have whatever you want.
Labels use a class to hide them when not wanted.
Uses delegated event listener, listening for click to bubble.
[].forEach.call(document.querySelectorAll('.ratingSelector'), function (node) {
var labels = node.querySelectorAll('.full');
node.addEventListener('click', function (evt) {
var target = evt.target;
if (target.classList.contains('radio')) {
[].forEach.call(labels, function (label) {
label.classList.add('hidden');
});
evt.target.nextElementSibling.classList.remove('hidden');
}
}, false);
});
.hidden {
display:none
}
<ul class="rating">
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio">
<label class="full hidden" for="Degelijkheid-1-5">Label 1</label>
<input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio">
<label class="full hidden" for="Degelijkheid-2-5">Label 2</label>
<input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio">
<label class="full hidden" for="Degelijkheid-3-5">Label 3</label>
<input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio">
<label class="full hidden" for="Degelijkheid-4-5">Label 4</label>
<input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio">
<label class="full hidden" for="Degelijkheid-5-5">Label 5</label>
</span>
</li>
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[2]" id="Design-1-5" value="1" class="radio">
<label class="full hidden" for="Design-1-5">Label 1</label>
<input type="radio" name="ratings[2]" id="Design-2-5" value="2" class="radio">
<label class="full hidden" for="Design-2-5">Label 2</label>
<input type="radio" name="ratings[2]" id="Design-3-5" value="3" class="radio">
<label class="full hidden" for="Design-3-5">Label 3</label>
<input type="radio" name="ratings[2]" id="Design-4-5" value="4" class="radio">
<label class="full hidden" for="Design-4-5">Label 4</label>
<input type="radio" name="ratings[2]" id="Design-5-5" value="5" class="radio">
<label class="full hidden" for="Design-5-5">Label 5</label>
</span>
</li>
</ul>

Not getting default checked on radio button

I have 10 radio buttons with unique name and these radio buttons are divided into two div. I mean each div have 5 radio buttons and i want to show only one div at a time with first radio button checked. what i want is visible div should have first radio button checked by default. but please note all radio buttons have unique name on a same page.
Below is my code for reference.
<style>
#secondopt, #firstopt { display: none;}
</style>
<script>
function checkme(){
if (document.getElementById("opt1").checked == true){
document.getElementById("firstopt").style.display = "block"
document.getElementById("secondopt").style.display = "none";
}
if (document.getElementById("opt2").checked == true){
document.getElementById("firstopt").style.display = "none"
document.getElementById("secondopt").style.display = "block";
}
}
</script>
<form name="form1">
<label><input type="radio" name="opt" id="opt1" onclick="checkme()" /> First opt</label>
<label><input type="radio" name="opt" id="opt2" onclick="checkme()" /> Second Opt</label>
<div id="firstopt">
<label><input type="radio" name="items" value="data1" />Item 1</label>
<label><input type="radio" name="items" value="data2" />Item 2</label>
<label><input type="radio" name="items" value="data3" />Item 3</label>
<label><input type="radio" name="items" value="data4"/>Item 4</label>
<label><input type="radio" name="items" value="data5"/>Item 5</label>
</div>
<div id="secondopt">
<label><input type="radio" name="items" value="data6"/>Item 6</label>
<label><input type="radio" name="items" value="data7"/>Item 7</label>
<label><input type="radio" name="items" value="data8"/>Item 8</label>
<label><input type="radio" name="items" value="data9"/>Item 9</label>
<label><input type="radio" name="items" value="data10"/>Item 10</label>
</div>
</form>
How to achive this?
As you have divided radio buttons in two div, you should also use group property/name of radio
buttons. Here give two different groups names and then use selected/checked property using radio button id.
do this
<form name=frmone>
<INPUT TYPE="Radio" Name="payment" Value="CC">Credit Card
<INPUT TYPE="Radio" Name="payment" Value="DC">Debit Card
<INPUT TYPE="Radio" Name="payment" Value="PP">PayPal
</form>
<script>
var len = document.frmOne.payment.length;
for (i = 0; i < len; i++) {
document.frmOne.payment[i].checked ;
break;
}
</script>

Categories