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.
Related
I have 2 radio box inputs that I want to check when I select an option from a select dropdown menu.
I have a select box as like this:
<div id="checkout-shipping-method-load">
<select id="shipping-method">
<option value="option1">1 twister ($14.99 + $6.99 S&H)</option>
<option value="option2">1 twister ($14.99 + $6.99 S&H)</option>
</select>
</div>
And radio boxes like:
<input type="radio" class="radio" checked="checked" id="s_method_flatrate2_flatrate2" value="flatrate2_flatrate2" name="shipping_method">
<input type="radio" class="radio" id="s_method_flatrate_flatrate" value="flatrate_flatrate" name="shipping_method">
How can I make the selected option equal the selected radio button?
For example, if the first option is selected, then the first radio box is checked, or vice-versa.
It is very simple on using jquery,
$('#shipping-method').on('change', function(){
var criteria = $(this).val(); // will give you selected option value
if(criteria === 'Your Value') // your condition here
{
$('#s_method_flatrate2_flatrate2').attr('checked',true); // checking the radio button
}
});
You can similarly add conditionals to choose your radio buttons
Simple solution based on positions of related elements:
$('#shipping-method').change(function(){
var optionSelected = $("option:selected", this);
$(".radio:eq("+ optionSelected.index() +")").prop("checked", true);
});
Try:
https://jsfiddle.net/nwk5fez9/
Remove checked="checked" from radio button and try.
<div id="checkout-shipping-method-load">
<select id="shipping-method">
<option value="option1">1 twister ($14.99 + $6.99 S&H)</option>
<option value="option2">1 twister ($14.99 + $6.99 S&H)</option>
</select>
</div>
<input type="radio" class="radio" id="s_method_flatrate2_flatrate2" value="flatrate2_flatrate2" name="shipping_method">
<input type="radio" class="radio" id="s_method_flatrate_flatrate" value="flatrate_flatrate" name="shipping_method">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$('#shipping-method').change(function(){
var option= $('#shipping-method').val();
if(option == 'option1') {
$('#s_method_flatrate2_flatrate2').attr('checked',true);
}
if(option == 'option2') {
$('#s_method_flatrate_flatrate').attr('checked',true);
}
});
</script>
I really like San Krish's solution, but for the sake of completeness, here's my answer (in plain JS):
I'm simply going to check for the change event on the select box, then set the corresponding index of the radio buttons.
var select = document.getElementById("shipping-method"),
rbs = document.getElementsByName("shipping_method");
select.addEventListener("change", function () {
rbs[select.selectedIndex].checked = true;
});
<div id="checkout-shipping-method-load">
<select id="shipping-method">
<option value="option1">1 twister ($14.99 + $6.99 S&H)</option>
<option value="option2">1 twister ($14.99 + $6.99 S&H)</option>
</select>
</div>
<input type="radio" class="radio" checked="checked" id="s_method_flatrate2_flatrate2" value="flatrate2_flatrate2" name="shipping_method">
<input type="radio" class="radio" id="s_method_flatrate_flatrate" value="flatrate_flatrate" name="shipping_method">
Please note, that if you use this, the indices of the options and radio buttons must correspond; it would be wise to add other checks in the event listener.
You can set the checked property of the radio button using Jquery, like so:
JQUERY:
$('#shipping-method').change(function() {
if ($(this).val() === "option1") {
$('#flatrate').prop('checked', true);
} else if ($(this).val() === "option2") {
$('#flatrate2').prop('checked', true);
} else {
$('#flatrate2').prop('checked', false);
$('#flatrate').prop('checked', false);
}
});
NOTES:
Since JQuery 1.6, you should be using prop() and not attr().
I've also added a default "SELECT" option to your drop down (see
below), with logic to unset both radio buttons if that default is
selected. This is not required, but I added it in case it's useful for you.
HTML:
<div id="checkout-shipping-method-load">
<select id="shipping-method">
<option value="">SELECT</option>
<option value="option1">1 twister ($14.99 + $6.99 S&H)</option>
<option value="option2">1 twister ($14.99 + $6.99 S&H)</option>
</select>
</div>
<input type="radio" class="radio" id="flatrate2" value="flatrate2_flatrate2" name="shipping_method">Flat 2
<input type="radio" class="radio" id="flatrate" value="flatrate_flatrate" name="shipping_method">Flat 1
JSFiddle Demo here.
I have my HTML code and my JavaScript code like this (I'm using jQuery)
HTML :
<input type="checkbox" name="type" value="program" id="box-1" /> Desktop Programming
<select name="lang-1" id="select-1" disabled>
<option value="c">C/C++</option>
<option value="vb">VB</option>
<option value="cs">C#</option>
</select><br /><br />
<input type="checkbox" name="type" value="web" id="box-2" /> Web Development
<select name="lang-2" id="select-2" disabled>
<option value="asp">ASP</option>
<option value="php">PHP</option>
<option value="ror">Ruby on Rails</option>
</select><br /><br />
JavaScript (jQuery) :
$(document).ready(function(){
var x;
$("#box-" + x).click(function(){
var $this = $(this);
if ($this.is(":checked")) {
$("#select-" + x).prop('disabled', false);
} else {
$("#select-" + x).prop('disabled', true);
}
});
});
And I want when I checked the programming checkbox, the programming select option (beside the checkbox) is enable. As well as when I checked the web dev checkbox, the web dev select option is enable. But my code doesn't work. Can anybody help me?
You're better off using classes in stead of ID's with a random number.
I would give all my checkboxes the class "box" and the id 1, 2, 3 and so on.
Also, I think $this doesn't work. It has to be $(this).
Then your code would look like (working example):
$(document).ready(function(){
$('.box').click(function(){
var x= $(this).attr("id");
if ($(this).is(":checked")) {
$("#select-" + x).prop('disabled', false);
} else {
$("#select-" + x).prop('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="type" value="program" class="box" id="1" /> Desktop Programming
<select name="lang-1" id="select-1" disabled>
<option value="c">C/C++</option>
<option value="vb">VB</option>
<option value="cs">C#</option>
</select><br /><br />
<input type="checkbox" name="type" value="web" class="box" id="2" /> Web Development
<select name="lang-2" id="select-2" disabled>
<option value="asp">ASP</option>
<option value="php">PHP</option>
<option value="ror">Ruby on Rails</option>
</select><br /><br />
For things like this use classes , no need for ID.
Right now your variable x is undefined and without a loop to parse the ID's it won't work
<input type="checkbox" class="box" /> Desktop Programming
<select name="lang-1" class="select" disabled>
JS
$('input:checkbox.box').change(function(){
$(this).next('.select').prop('disabled', !this.checked);
});
If the layout is such that the select is not right after the input we can modify traverse a bit
Hi you can do something like this working demo
Please have one same class to all of your checkbox here i taken as checkbox then your HTML will look like this
<input type="checkbox" name="type" value="program" class="checkbox" id="box-1" /> Desktop Programming
<select name="lang-1" id="select-1" disabled>
<option value="c">C/C++</option>
<option value="vb">VB</option>
<option value="cs">C#</option>
</select><br /><br />
<input type="checkbox" name="type" value="web" class="checkbox" id="box-2" /> Web Development
<select name="lang-2" id="select-2" disabled>
<option value="asp">ASP</option>
<option value="php">PHP</option>
<option value="ror">Ruby on Rails</option>
</select><br /><br />
add write this jquery
$(document).ready(function(){
$('.checkbox').on('change',function(){
var checked_id = $(this).prop('id');
var a = checked_id.slice(4);
$("#select-"+a).prop('disabled',!this.checked);
});
});
So there are lots of answers here, much of which are better ways to do what you are trying with smaller cleaner code. But for the sake of it I am adding this answer to show you what was wrong with code you wrote and a working example.
So you declared variable x but never assigned it a value. It seems like you wanted to loop over the checkboxes and use the index x to assign the event. Since you started using IDs with 1 we need to compensate in the code for it. Then since x has no scope to our event directly we need to find the value of x since when the event runs it will only have the last value of x.
All HTML I left the same and only altered the javascript. As I said there are much better ways to do this and there are many answers here that show it but this is to show you what you were doing wrong.
Fiddle: https://jsfiddle.net/quyn4y23/
$(document).ready(function() {
// Find all checkboxes and get the length of all found
var x, inputs = $('input[type="checkbox"]'), length = inputs.length;
// For each checkbox assign event
for (x = 1; x <= length; x++) {
$("#box-" + x).click(function() {
var $this = $(this);
// Find the number in the checkbox id
var x = $this.attr('id').replace("box-", "");
// Use number to find correct select
if ($this.is(":checked")) {
$("#select-" + x).prop('disabled', false);
} else {
$("#select-" + x).prop('disabled', true);
}
});
}
});
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++;
});
I'm am fairly new to JavaScript; I have been googling all day for this but i only found how to enable and disable one textbox using one checkbox.
Here is my code
JavaScript
function enable_text(status){
status=!status;
document.sr2.other_text.disabled = status;
}
HTML
<form name=sr2 method=post>
<input type="checkbox" name=others onclick="enable_text(this.checked)">
Others
<input type=text name=other_text>
</form>
Note: the code I posted is only for a textbox that when uncheck in checkbox it will be enabled.
My question is how do you disable select tag and enable a textbox after unchecking a checkbox?
Add an id to your text box then just put the below onclick of your checkbox instead of the function call.
<form name=sr2 method=post>
<input type="checkbox" name=others onclick= "document.getElementById('id_of_txtbox').disabled=this.checked;">Others
<input type=text name=other_text>
Here's the HTML
<input type="text" id="txt" disabled="disabled"/>
<select name="sel" id="sel">
<option value="test1">Test 1</option>
</select>
<input type="checkbox" name="vehicle" value="Car" checked="checked" onclick="enableText(this.checked)">Uncheck to Disable Select and Enable Text
And the JavaScript is
function enableText(checked){
if(!checked){
document.getElementById('sel').disabled = true;
document.getElementById('txt').disabled = false;
}
else{
document.getElementById('sel').disabled = false;
document.getElementById('txt').disabled = true;
}
}
Select is disabled and text is enabled on uncheking the checkbox and vice versa. Hopefully that helps.
Based on your question, are you trying to present a dropdown but then allow them to enter other values not in the dropdown?
If so, here is another way to approach it:
HTML:
<select name="RenewalTerm" id="RenewalTerm">
<option value="12">12 Month</option>
<option value="24">24 Month</option>
<option value="36">36 Month</option>
<option value="Other">Other</option>
</select>
<span id="RenewalTermOtherFields">
<label labelfor="RenewalTermManual" >Enter Renewal Term: </label>
<input type="text" name="RenewalTermManual" id="RenewalTermManual" />
</span>
JavaScript/jQuery:
$(document).ready(function() {
$('#RenewalTermOtherFields').hide();
$('#RenewalTermManual').val($('#RenewalTerm').val());
$('#RenewalTerm').change(function() {
var selectedItem = $("select option:selected").val();
if (selectedItem !== 'Other') {
$('#RenewalTermOtherFields').hide();
$('#RenewalTermManual').val($('#RenewalTerm').val());
}
else
{
$('#RenewalTermManual').val('');
$('#RenewalTermOtherFields').show();
}
});
});
See It In Action!: http://eat-sleep-code.com/#/javascript/dropdown-with-other-field
This will allow you to select "other" from the list, and when you do it will automatically display a textbox for free-form entry.
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 ;