Change the value of select dropdown when checkbox is unchecked - javascript

I have to do a event when checkbox is unchecked then select dropdown value is set to be null or default.
Html code:
<div class="checkbox">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_8am_10am" id="tomorrow_8am_10am" value="8am-10am">8am - 10am</label>
<i class="tomorrow_8am_10am box">
<select name="pref_tomorrow_8am_10am">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>
<div class="checkbox">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_10am_12pm" id="tomorrow_10am_12pm" value="10am-12pm">10am - 12pm</label>
<i class="tomorrow_10am_12pm box">
<select name="pref_tomorrow_10am_12pm">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>
<div class="checkbox ">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_12pm_2pm" id="tomorrow_12pm_2pm" value="12pm-2pm">12pm - 2pm</label>
<i class="tomorrow_12pm_2pm box">
<select name="pref_tomorrow_12pm_2pm">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>
In above code i am append/show dropdown on click of checkbox.
Now i have to do this when i uncheck the checkbox at that time set the value of dropdown to be null/default.
Javascript code:
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("id");
$("." + inputValue).toggle();
});
This is my JS code, from this i am appending the select div beside my checkbox.
Can anyone help me for that?

Try this! :D
$(document).ready(function() {
$('select').on('click change',function() {
$(this).closest('div.checkbox').find('input:checkbox').prop('checked',$(this).val()>0);
});
$('input:checkbox').on('click change',function() {
if (!$(this).is(':checked')) $(this).closest('div.checkbox').find('select').val('-1');
});
});
See working demo on codeply:
http://www.codeply.com/go/7t3ZvFz5yF

Do something when checkbox is unchecked
Inside of your function, you can check whether the checkbox is checked/unchecked with:
if (this.checked)
or
if (!this.checked)
and put whatever code you want to execute based on this condition in the if block.
Select an option from dropdown with jQuery
You can use the value attribute of the option you want to select:
$('#yourDropdown select').val('valueOfOptionToBeSelected`);
Example:
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("id");
$("." + inputValue).toggle();
if (!this.checked) {
$("." + inputValue + ' select').val('-1');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_8am_10am" id="tomorrow_8am_10am" value="8am-10am">8am - 10am</label>
<i class="tomorrow_8am_10am box" style="display:none">
<select name="pref_tomorrow_8am_10am">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>
<div class="checkbox">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_10am_12pm" id="tomorrow_10am_12pm" value="10am-12pm">10am - 12pm</label>
<i class="tomorrow_10am_12pm box" style="display:none">
<select name="pref_tomorrow_10am_12pm">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>
<div class="checkbox ">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_12pm_2pm" id="tomorrow_12pm_2pm" value="12pm-2pm">12pm - 2pm</label>
<i class="tomorrow_12pm_2pm box" style="display:none">
<select name="pref_tomorrow_12pm_2pm">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>
Also, I'm not sure what your intention is, but you might want to add display: none to hide the drop down on page load, and then toggle the visibility when the user interacts with the checkbox.

I'm pretty sure I get what you want. When you check a box, it selects 1 (or whatever you would prefer). When you uncheck, it sets it back to no preference.
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("id");
if ($(this).is(":checked")) {
$("." + inputValue + " select").val(1);
} else {
$("." + inputValue + " select").val(-1);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_8am_10am" id="tomorrow_8am_10am" value="8am-10am">8am - 10am</label>
<i class="tomorrow_8am_10am box">
<select name="pref_tomorrow_8am_10am">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>
<div class="checkbox">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_10am_12pm" id="tomorrow_10am_12pm" value="10am-12pm">10am - 12pm</label>
<i class="tomorrow_10am_12pm box">
<select name="pref_tomorrow_10am_12pm">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>
<div class="checkbox ">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_12pm_2pm" id="tomorrow_12pm_2pm" value="12pm-2pm">12pm - 2pm</label>
<i class="tomorrow_12pm_2pm box">
<select name="pref_tomorrow_12pm_2pm">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>

if ($('.tomorrow-schedule-time').is(':checked')){
//
} else {
$('select').append('<option>Default</option>');
}

$('input[type="checkbox"]').on('change', function(){
var $select = $(this).parents('.checkbox').find('select');
console.log($select.length);
$select.val("1");
if (!$(this).is(':checked')) {
console.log('uncheck');
$select.val("-1");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_8am_10am" id="tomorrow_8am_10am" value="8am-10am">8am - 10am</label>
<i class="tomorrow_8am_10am box">
<select name="pref_tomorrow_8am_10am">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>
<div class="checkbox">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_10am_12pm" id="tomorrow_10am_12pm" value="10am-12pm">10am - 12pm</label>
<i class="tomorrow_10am_12pm box">
<select name="pref_tomorrow_10am_12pm">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>
<div class="checkbox ">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_12pm_2pm" id="tomorrow_12pm_2pm" value="12pm-2pm">12pm - 2pm</label>
<i class="tomorrow_12pm_2pm box">
<select name="pref_tomorrow_12pm_2pm">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>

Related

Select options with the same CSS class and jQuery

I am new to jQuery/JS and I have this problem: You can run my code and see that count is not correct:
$('.form-control').change(function() {
countTotal();
});
$('.form-control').change(function() {
countTotal();
});
function countTotal() {
var level1 = parseInt($(".form-control :selected").val(), 10);
var level2 = parseInt($(".form-control :selected").val(), 10);
var total = level1 * level1;
$(".form-group > #riz").val(total);
$(".form-group > #riz").attr("disabled", true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<input id="riz">
</div>
<hr>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<input id="riz">
</div>
My HTML has to stay the same, I have to find some way to jQuery work in this example and keep the HTML structure the same. If you have any idea how to solve this, feel free to comment or share code ideas.
I appreciate your help!
There is multiple problems with your code.
First, you are using the same id multiple times. ID must be unique.
Second, think this is wrong var total = level1 * level1; should be var total = level1 * level2;
Third, you don't need to use :selected in $(".form-control :selected").val(), since $(".form-control").val() will always take the value of the selected option, if your element is a select.
Now I have changed both your html and jquery so it will work to your requirement.
Demo
$('.form-control').change(function() {
countTotal($(this));
});
function countTotal(ele) {
var level1 = parseInt(ele.val() || 0, 10);
var level2 = parseInt(ele.siblings(".form-control").val() || 0, 10);
var total = level1 * level2;
ele.closest(".form-group").next().find(".riz").val(total);
ele.closest(".form-group").next().find(".riz").attr("disabled", true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<input class="riz">
</div>
<hr>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<input class="riz">
</div>

dynamically calculation of multiple select option data value

in my form there is 5 nationality selection box with data-value in it.
<select id="visitorcount" name="visitorcount">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div id="person1">
<select id="country1" name="visitor1">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person2" style="display:none">
<select id="country2" name="visitor2">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person3" style="display:none">
<select id="country3" name="visitor3" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person4" style="display:none">
<select id="country4" name="visitor4" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person5" style="display:none">
<select id="country5" name="visitor5" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="totalcost"></div>
first option is static and always present in form and other 4 select will be shown only when we select number of visitors.
Now what i want is, when i select option 1 it should show the data-fee value in div totalcost.
when we select option two then it should show option1 + Option 2 data-fee value, and so on similar with all other select option.
and when we reduce the number of visitor, it should reduce the cost.
i am just not able to understand how to deal with this.
i can get cost of first select option like this but do not how to deal with dynamically, showing and hiding the div according to number of visitor and then select the options and get the prices and reduce the prices when reduce number of visitor.
<script>
$('body').on('change', '#country1', function() {
var priceforcountry = $('option:selected', this).data('fee');
$('#totalcost').text(priceforcountry);
//alert(priceforcountry);
});
</script>
and when we select country in option 1 it should auto select the same option in all other 4 select boxes.
Like this?
You can use each by class selector for dynamic then check css display
$('body').on('change', '#visitorcount', function() {
for (var i = 1; i <= 5; i++) {
if (i <= $('#visitorcount').val()) {
$('#person' + i).show();
$('#country' + i).show();
} else {
$('#person' + i).hide();
$('#country' + i).hide();
}
}
});
$('body').on('change', '.ct,#visitorcount', function() {
var priceforcountry = 0;
$('.ct').each(function(index,element){
if($(element).parent().css("display") != "none"){
priceforcountry += +$('option:selected', this).data('fee');
}
});
$('#totalcost').text(priceforcountry);
//alert(priceforcountry);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="visitorcount" name="visitorcount">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div id="person1">
<select id="country1" name="visitor1" class="ct">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person2" style="display:none" >
<select id="country2" name="visitor2" class="ct">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person3" style="display:none">
<select id="country3" name="visitor3" style="display:none" class="ct">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person4" style="display:none">
<select id="country4" name="visitor4" style="display:none" class="ct">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person5" style="display:none">
<select id="country5" name="visitor5" style="display:none" class="ct">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="totalcost"></div>

Minus the value of option to itself on click

I'm trying to update the value of selectbox option after click. It should subtract the selected value to itself.
<div class="pull-left col-xs-12 col-sm-4 col-md-4">
<label for="rooms" style="color:black">No. of rooms: </label>
<select required tabindex="10" id="selectBoxStandard" name="n_rooms">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</div>
<div class="button-style-1" style="padding-bottom:80px" style="padding-bottom:40px"><a href="javascript:standardRoom()" ><i class="fa fa-calendar"></i><span class="mobile-visibility">BOOK
</span></a></div>
standardRoom function
function standardRoom()
{
$('#selectBoxStandard option').val(Number($("#selectBoxStandard").val()) - Number($("#selectBoxStandard option").val()));
}
If the selected value is 3 after click the remaining value should update to:
<div class="pull-left col-xs-12 col-sm-4 col-md-4">
<label for="rooms" style="color:black">No. of rooms: </label>
<select required tabindex="10" id="selectBoxStandard" name="n_rooms">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
To remove last childs from #selectBoxStandard based on option value:
$('button').on('click', standardRoom);
function standardRoom() {
$('#selectBoxStandard').find("option:nth-last-child(-n+" + $('#selectBoxStandard').val() + ")").remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pull-left col-xs-12 col-sm-4 col-md-4">
<label for="rooms" style="color:black">No. of rooms: </label>
<select required tabindex="10" id="selectBoxStandard" name="n_rooms">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<button>Update</button>
</div>
This will work but could probably be done a bit easier or better:
function standardRoom(){
var last_option = $('#selectBoxStandard option:last-child').val();
var selected_option = $('#selectBoxStandard').val();
$("#selectBoxStandard option").each(function() {
if($(this).val() > (last_option - selected_option)){
$(this).remove();
}
});
}
add this js
let total = 7
function changed(){
let selBox = document.getElementById('selectBoxStandard');
let value = selBox.value;
//remove all options
while(selBox.children.length > 0) selBox.removeChild(selBox.children[0]);
//add new options according to value;
for(let i = 0;i<7-value+1;i++){
selBox.innerHTML += `<option value="${i}">${i}</option>`
}
//resets value
selBox.value = value;
}
add onchange on ur select
<select onchange="changed()" required tabindex="10" id="selectBoxStandard" name="n_rooms">
if you want to change on btn click use this
<div onclick="changed()" class="button-style-1" style="padding-bottom:80px" style="padding-bottom:40px"><a href="javascript:standardRoom()" ><i class="fa fa-calendar"></i><span class="mobile-visibility">BOOK
</span></a></div>

Select options from only one item, jquery change each

So I'm trying to build a quickbuy of products with different variants in my list of products. The product has a set of avaialble options, that are collected from the select option with jQuery, passed to a input field and then submitted to the cart. The products are listed out by a loop. When I'm at the single product page it works fine, since all the option values are required.
But once in the list of products, it gets the options from all the products and passes them to all the submit fields. How can I scope a jquery function to work on only one product at a time
In the example below, I want the field to have only the values from the select options relevant to the product. Not th evalues from both product options.
$(document).ready(function() {
$(".variant-selected")
.change(function() {
var str = "";
$("select option:selected").each(function() {
str += $(this).val() + ".";
});
$("input[name='variant']").val(str.slice(0, -1));
})
.trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod1">
<h2>
Shirt
</h2>
<select class="variant-selected" name="select1">
<option value="1" selected>Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<select class="variant-selected" name="select2">
<option value="A" selected>Large</option>
<option value="B">Medium</option>
<option value="C">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
<div id="prod2">
<h2>Jeans
</h2>
<select class="variant-selected" name="select1">
<option value="4" selected>Orange</option>
<option value="5">Teal</option>
<option value="6">Forest</option>
</select>
<select class="variant-selected" name="select2">
<option value="D" selected>Large</option>
<option value="E">Medium</option>
<option value="F">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
here you have
$(document).ready(function() {
$(".variant-selected")
.change(function() {
var str = "";
$(this).parent().find("select option:selected").each(function() {
str += $(this).val() + ".";
});
$(this).parent().find("input[name='variant']").val(str.slice(0, -1));
})
.trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod1">
<h2>
Shirt
</h2>
<select class="variant-selected" name="select1">
<option value="1" selected>Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<select class="variant-selected" name="select2">
<option value="A" selected>Large</option>
<option value="B">Medium</option>
<option value="C">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
<div id="prod2">
<h2>Jeans
</h2>
<select class="variant-selected" name="select1">
<option value="4" selected>Orange</option>
<option value="5">Teal</option>
<option value="6">Forest</option>
</select>
<select class="variant-selected" name="select2">
<option value="D" selected>Large</option>
<option value="E">Medium</option>
<option value="F">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>

List item and statement html javascript

I have a html code (a list item), and it works fine, when you click it, it drops down the list item, here is the code:
<div class="list-item"> <strong class="table-cell">Choose:</strong> <span class="table-cell right">
<!-- <input type="text" name="numberofchildren" id="numberofchildren" value=""> -->
<select name="numberofchildren" id="numberofchildren" value="numberofchildren" >
<option value="Blood Group" selected disabled>NO CHILDREN</option>
<option value="No Children" >No Children</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
<option value="9" >9</option>
<option value="10" >10</option>
</select>
</span> </div>
But my question is this, how can I add a javascript code, that when a user chooses, for example "1" ( if he chose == "1" {...}, how can I do that.
Hope that I was clear, thank you very much for your time and effort.
function myfunction(select) {
if (select.value == "1") {
alert("You selected ONE");
} else {
alert("You selected: " + select.value);
}
}
<select name="numberofchildren" id="numberofchildren"
value="numberofchildren" onchange="myfunction(this)">
<option value="">Please select value...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

Categories