I have a checkbox with 5 options. Only two of these can be selected. What I am trying to do is pass the value checked to a dropdown list. Since two checkboxes can be selected, I would like their values to be passed to two dropdown lists. Here's what I have so far.
HTML
<input class="theme" type="checkbox" name="theme" value="adventure" id="adventure"/><label for="adventure">Adventure</label>
<input class="theme" type="checkbox" name="theme" value="attraction" id="attraction"/><label for="attraction">Attraction</label>
<input class="theme" type="checkbox" name="theme" value="culture" id="culture"/><label for="culture">Culture</label>
<input class="theme" type="checkbox" name="theme" value="leisure" id="leisure"/><label for="leisure">Leisure</label>
<input class="theme" type="checkbox" name="theme" value="nature" id="nature"/><label for="nature">Nature</label>
<select id="list2">
<option value="adventure">Adventure</option>
<option value="attraction">Attractions</option>
<option value="culture">Culture</option>
<option value="leisure">Leisure</option>
<option value="nature">Nature</option>
</select>
<select id="list1">
<option value="adventure">Adventure</option>
<option value="attraction">Attractions</option>
<option value="culture">Culture</option>
<option value="leisure">Leisure</option>
<option value="nature">Nature</option>
</select>
jQuery
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).attr("value")=="adventure"){
$("#list1").val("adventure");
}
if($(this).attr("value")=="attraction"){
$("#list2").val("attraction");
}
if($(this).attr("value")=="culture"){
$(".cultureInterests").toggle();
}
if($(this).attr("value")=="leisure"){
$(".leisureInterests").toggle();
}
if($(this).attr("value")=="nature"){
$(".natureInterests").toggle();
}
});
As you can see, this method is faulty as the order of selecting a checkbox is beyond my control and I won't be able to tell where to pass the value. Any help is highly appreciated.
EXAMPLE
Here's a JSFiddle of what I am trying to achieve. Notice how the dropdown lists value change when you click on Adventure or Attractions.
http://jsfiddle.net/ajitks/3hdbgw79/
Thank you so much!
Try something like this:
$('input[type="checkbox"]').click(function() {
if ($(this).is(':checked')) {
if ($('input[type="checkbox"]:checked').length == 1) {
$('select#list1').val($(this).val());
} else {
$('select#list2').val($(this).val());
}
}else{
$('select#list1').val($('select#list2').val())
$('select#list2').val('')
}
});
if you don't want if else condition we can use Conditional (Ternary) Operator.
ANSWER
Check out this FIDDLE. It works!
$('.next').click(function() {
var i=1;
$('input[type="checkbox"]:checked').each(function(){
$('select#list'+i).val($(this).val());
i++;
});
Related
I have this jquery to check a radio button on page load:
$('input[value="modelos"]').attr('checked',true);
And then I have a dropdown list:
<select id="talents_meta_category" name="talents_meta_category">
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
How can I have input[value="modelos"] checked only if and when <option value="tab_1495127126289">Modelos</option> is selected?
You need on change condition with if like this :
$("select#talents_meta_category").change(function () {
if ($(this).val() === "tab_1495127126289") {
$('input[value="modelos"]').attr('checked',true);
}else{
$('input[value="modelos"]').attr('checked',false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="talents_meta_category" name="talents_meta_category">
<option value="">Please Select</option>
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
</br>
<input type="checkbox" name="modelos 1" value="modelos"> modelos 1<br>
<input type="checkbox" name="modelos 2" value="modelos"> modelos 2<br>
<input type="checkbox" name="modelos 3" value="modelos"> modelos 3<br>
Checkbox dynamically change based on condition (select option value)
You can try this, but I had to put in a blank option into the menu, however if that's unacceptable let me know and I'll do something else.
$("select#talents_meta_category").change(function () {
if ($(this).val() === "tab_1495127126289") {
$('input[value="modelos"]').attr('checked',true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="talents_meta_category" name="talents_meta_category">
<option></option>
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
<input type="radio" value="modelos">
You can check whether a option by testing the value attribute of the select
$(function(){
if($('#talents_meta_category').val()){
$('input[name="favorites"][value="modelos2"]').attr('checked',true);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="talents_meta_category" name="talents_meta_category">
<option value=""></option>
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463" selected>Música</option>
</select>
<label for="modelos"><input type="radio" name="favorites" value="modelos"></label>
<label for="modelos"><input type="radio" name="favorites" value="modelos2"></label>
You can use onchange function.
$("#talents_meta_category").on('change',function(){
let value = $(this).children("option:selected").val();
if(value=="tab_1495127126289"){
$('input[value="modelos"]').attr('checked',true);
}else{
$('input[value="modelos"]').attr('checked',false);
}
});
Something like this should do the trick:
// Your check the radio on page load
$('input[value="modelos"]').attr('checked', true);
// Check if `modelos` is selected
if ($('input[value="modelos"]').prop('checked')) {
// Add the `selected` attribute to the <option />
$('option[value="tab_1495127126289"]').attr('selected', true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='radio' value='modelos' />
<select id="talents_meta_category" name="talents_meta_category">
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
Hope this helps,
You can do it many different ways, here is just one....
var checkMe = 'tab_1495127126289';
$(function(){
$('input[name=talents_meta_category][value=' + checkMe + ']').prop('checked',true)
});
I have following code for drop down select showing drop down list using text and values.i google many codes as possible but none of them worked.what i wanted to show the selected drop down menu item in alert dialog.I already tried jquery and javascript codes but they are not working please help me to out of this problem
<div class="col-sm-1"></div>
<div class="col-sm-3">
<div class="fleft " id="drop-down">
<select id="cd-dropdown" class="cd-select" >
<option value="1" >Home</option>
<option value="2" >Movies</option>
<option value="3" >T.V. Shows</option>
<option value="4" >Photos</option>
<option value="5" >Site Help</option>
</select>
</div>
</div>
Using JQuery, you could do something like this:
$('#cd-dropdown').bind('change', function () {
alert($(this).find('option:selected').text());
});
If you want the value instead of the text, use .val()
on changing
$(document).ready(function(){
$("#cd-dropdown").change(function(){
alert($(this).find('option:selected').val()); // val or text
});
});
or on loading
$(document).ready(function () {
alert($("#cd-dropdown").find('option:selected').val()); // val or text
});
Updated link
HTML code:
<div class="col-sm-1"></div>
<div class="col-sm-3">
<div class="fleft " id="drop-down">
<select id="cd-dropdown" class="cd-select" onmousedown="this.value='';" onchange="jsFunction(this.value);" >
<option value="1" >Home</option>
<option value="2" >Movies</option>
<option value="3" >T.V. Shows</option>
<option value="4" >Photos</option>
<option value="5" >Site Help</option>
</select>
</div>
</div>
JS code:
function jsFunction(value)
{
alert(value);
}
You can do so using jQuery like this
$(document).on('change',"#cd-dropdown", function(){
alert($(this).val()); // will display selected option's value
alert($(this).find('option:selected').text()); //will display selected option's text
});
I have a group of dynamic rows each with a dropdown and checkboxes and need to change the individual dropdown value of that row if all its checkboxes are selected.
Currently I can only get this to work if I select all checkboxes in all rows.
How can I make it so only a row's dropdown changes when the checkboxes it belongs to are all selected?
I setup this fiddle with markup of what works right now. Thanks for the help!
http://jsfiddle.net/uyv3mk7b/
<!--First row eventRegistrations[1]-->
<select class="regSelect" name="eventRegistrations[1].eventRegistrationStatusTypeID" id="registrationStatusSelect">
<option value="1">Pending</option>
<option value="2">Attended</option>
</select>
<input type="checkbox" class="regChecked" name="eventRegistrations[1].markAttendance[1].attendanceDate" value="1">9/21/14
<input type="checkbox" class="regChecked" name="eventRegistrations[1].markAttendance[2].attendanceDate" value="2">9/22/14 <br>
<!--There could be multiple dynamic rows whose input names increment like eventRegistrations[i]-->
<!--Next dynamic row eventRegistrations[2]-->
<select class="regSelect" name="eventRegistrations[2].eventRegistrationStatusTypeID" id="registrationStatusSelect">
<option value="1">Pending</option>
<option value="2">Attended</option>
</select>
<input type="checkbox" class="regChecked" name="eventRegistrations[2].markAttendance[1].attendanceDate" value="1">10/23/14
<input type="checkbox" class="regChecked" name="eventRegistrations[2].markAttendance[2].attendanceDate" value="2">10/24/14
//Change dropdown to Attended when all of checkbox group is selected
//Currently only works when all 4 checkboxes are selected, not the 2 in each group/row
$('.regChecked:checked').length == $('.regChecked').length
$(".regChecked").change(function () {
if ($('.regChecked:checked').length == $('.regChecked').length) {
$('.regSelect').val('2');
}
});
You need to add a wrapper to your rows, like section, or div, and on change, you can loop through only the parents childrens collection.
Tyr this: http://jsfiddle.net/uyv3mk7b/3/
HTML
<!--First row eventRegistrations[1]-->
<section>
<select class="regSelect" name="eventRegistrations[1].eventRegistrationStatusTypeID" id="registrationStatusSelect1">
<option value="1">Pending</option>
<option value="2">Attended</option>
</select>
<input type="checkbox" class="regChecked" name="eventRegistrations[1].markAttendance[1].attendanceDate" value="1">9/21/14
<input type="checkbox" class="regChecked" name="eventRegistrations[1].markAttendance[2].attendanceDate" value="2">9/22/14 <br>
</section>
<!--There could be multiple dynamic rows whose input names increment like eventRegistrations[i]-->
<!--Next dynamic row eventRegistrations[2]-->
<section>
<select class="regSelect" name="eventRegistrations[2].eventRegistrationStatusTypeID" id="registrationStatusSelect2">
<option value="1">Pending</option>
<option value="2">Attended</option>
</select>
<input type="checkbox" class="regChecked" name="eventRegistrations[2].markAttendance[1].attendanceDate" value="1">10/23/14
<input type="checkbox" class="regChecked" name="eventRegistrations[2].markAttendance[2].attendanceDate" value="2">10/24/14
</section>
jQuery
//Change dropdown to Attended when all of checkbox group is selected
$(".regChecked").change(function() {
var checks = $(this).parent().find('.regChecked');
var allChecked = true;
$.each(checks, function(idx, value) {
if (!$(this).is(':checked')) {
allChecked = false;
}
});
if (allChecked) {
$(this).parent().find('.regSelect').val(2);
} else {
$(this).parent().find('.regSelect').val(1);
}
});
//When dropdown value is Attended, select all in checkbox group
$("select").change(function() {
if ($(this).val() === '2') {
$(this).parent().find('.regChecked').prop('checked', true);
}
});
You can add some sort of identifier to each group like
<select class="regSelect group-select-1" name="eventRegistrations[1].eventRegistrationStatusTypeID" id="registrationStatusSelect">
<option value="1">Pending</option>
<option value="2">Attended</option>
</select>
<input type="checkbox" class="regChecked group-1" name="eventRegistrations[1].markAttendance[1].attendanceDate" value="1">9/21/14
<input type="checkbox" class="regChecked group-1" name="eventRegistrations[1].markAttendance[2].attendanceDate" value="2">9/22/14 <br>
and then manipulate with this identifiers
$(".group-1").change(function () {
if ($('.group-1:checked').length == $('.group-1').length) {
$('.group-select-1').val('2');
}
});
Fiddle
UPD Added fiddle with else cases, thx to Roberto Linares.
P.S. ids have to be unique
My code works, but I'd like to clean it up and possibly reuse it instead of copying it.
I have a select box with each value selected checking or unchecking a group of checkboxes based on their class tag.
Is it possible to pass the class name .task_mod to a function where the following
$('.inside_border a.task_mod :checkbox').attr('checked', true);
$('.inside_border a.task_mod').css("background-color","#9dc6f4");
$('.inside_border a.task_mod').css("color","#fff");
can all be applied? That way, I can use this function for all the other checkboxes like so
check_mod(".links_mod");
$('[name="workspace_type"]').change(function()
{
if($(this).val() == "0")
{
$('.inside_border a :checkbox').attr('checked', false);
$('.inside_border a').css("background-color","#dfdfdf");
$('.inside_border a').css("color","#6e6d6d");
}
else if($(this).val() == "small_biz")
{
$('.inside_border a.task_mod :checkbox').attr('checked', true);
$('.inside_border a.task_mod').css("background-color","#9dc6f4");
$('.inside_border a.task_mod').css("color","#fff");
}
});
The Selectbox
<select name="workspace_type">
<option value="0">select please</option>
<option value="small_biz">Small Business</option>
<option value="freelance">Freelancer</option>
<option value="startup">Startup Company</option>
<option value="small_team">Small Team</option>
<option value="academic">Academic</option>
<option value="media">Media Organization</option>
<option value="personal">Personal</option>
</select>
The checkboxes
<div class="inside_border">
<input type="checkbox" name="add_mod"/>Tasks
<input type="checkbox" />Documents
<input type="checkbox" />Discussions
<input type="checkbox" />Links
<input type="checkbox" />Images
<input type="checkbox" />Customers
<input type="checkbox" />Projects
<input type="checkbox" />Members
</div>
If you don't understand, I can explain.
P.S. I know I should use Id(s) for the checkboxes but...
create this function:
function check_mod($target){
$target.css({
"background-color": "#9dc6f4",
"color":"#fff"
})
.find(":checkbox").attr('checked', true);
}
and than use like this:
check_mod($('.inside_border a.task_mod'));
Sure
$('.inside_border a.'+class+' :checkbox')
Getting the class can be done by $(this).parent()[0].className.
Ok this is very anoying, and it is probably very simple. I want to start my web page with disabled checkboxes, and after particlar line in listbox is selected to enable those boxes. So I put this in onload method
onload = function () {
for (i = 0; i < document.frmMain.checkgroup.length; i++){
document.frmMain.checkgroup[i].disabled = true ;
}
}
it start my page with disabled boxes, now i want do enable them
function enableCheckboxes(){
if (document.frmMain.Vrste[document.frmMain.Vrste.selectedIndex].value == "Sendvici i Rostilj"){
for(i=0;i<document.frmMain.checkgroup.length;i++){
document.frmMain.checkgroup[i].enabled = true;
}
}
}
it goes in to the for loop, but it never enable those checkboxes. I cannot figure it why.
and this is html part, where i call enablecheckbox function:
<select name="Vrste" onChange="PopulatePodvrste(); enableCheckboxes();" size="8">
<option value="Pica">Pica</option>
<option value="Barbarina domaca trpeza">Barbarina domaca trpeza</option>
<option value="Slana Palacinka">Slana Palacinka</option>
<option value="Slatka Palacinka">Slatka Palacinka</option>
<option value="Sendvici i Rostilj">Rostilj i sendvici</option>
<option value="Dobro jutro sa Barbarom">Dobro jutro sa Barbarom</option>
<option value="Chicken Meni">Chicken Meni</option>
<option value="Posebna Ponuda">Posebna Ponuda</option>
<option value="Salate">Salate</option>
</select>
And finally actual checkboxes:
<input type="checkbox" name="checkgroup" >Susam</input><br>
<input type="checkbox" name="checkgroup" >Cili</input><br>
<input type="checkbox" name="checkgroup" >Tartar</input><br>
<input type="checkbox" name="checkgroup" >Urnebes</input><br>
<input type="checkbox" name="checkgroup" >Krastavac</input>
Try instead:
document.frmMain.checkgroup[i].disabled = false ;
if would add the jquery library to your page then I would add:
$(document).ready(function() {
$("input[name='checkgroup']").attr("disabled", "disabled");
})
function enableCheckboxes() {
$("input[name='checkgroup']").removeAttr("disabled");
}
If you don't want to use jquery then just change your enable line to be:
document.frmMain.checkgroup[i].disabled = false ;