I'm trying to find see if we can make a checkbox selected if we chose an option from the dropdown menu. Here's a mock-up code of what I'm trying to modify.
$('.stackoverflow').on('change', function() {
$(this).parent().next().find('input:checkbox').attr("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkboxes">
<div class="checkbox_wrapper">
<input type="checkbox" id="How" /> How</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="Do" /> do</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="I" /> I </div>
<div class="checkbox_wrapper">
<input type="checkbox" id="Force" /> force </div>
<div class="checkbox_wrapper">
<input type="checkbox" id="The" /> the</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="checkbox" /> checkbox
<select class="stackoverflow">
<option value="to">to</option>
<option value="be">be</option>
<option value="selected">selected</option>
<option value="when">when</option>
<option value="we">we</option>
<option value="select">select</option>
<option value="an">an</option>
<option value="option">option</option>
</select>
</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="not this one" /> not this checkbox but the previous one</div>
I'm trying to have the checkbox "checkbox" be selected if I do select an option from the dropdown menu. Is there an easy way to do this? When searching stackoverflow, the closest thing that I found was to have the next one be selected and not the current one. Thank you very much for any help at all.
Just reference the correct checkbox correctly?
In your case, you have this:
$(this).parent().next().find('input:checkbox').attr("checked", true);
this refers to the select
parent refers to <div class="checkbox_wrapper">
next would then refer to <div class="checkbox_wrapper">
and finally find('input:checkbox') would find: <input
type="checkbox" id="not this one" />
Since the checkbox you want is a child of the same parent element that the select is in, the next() method call is what's causing the problem.
So, you could write:
$(this).parent().find('input:checkbox').attr("checked", true);
But, there are many ways to access an element. If it has an id, that is the simplest and most efficient way. So you are better off writing:
$('#checkbox').prop("checked", true);
Also, use .prop instead of .attr as .attr fails when you manually uncheck the checkbox and then select an item from the drop down.
$('.stackoverflow').on('change', function() {
$('#checkbox').prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkboxes">
<div class="checkbox_wrapper">
<input type="checkbox" id="How" /> How</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="Do" /> do</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="I" /> I </div>
<div class="checkbox_wrapper">
<input type="checkbox" id="Force" /> force </div>
<div class="checkbox_wrapper">
<input type="checkbox" id="The" /> the</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="checkbox" /> checkbox
<select class="stackoverflow">
<option value="to">to</option>
<option value="be">be</option>
<option value="selected">selected</option>
<option value="when">when</option>
<option value="we">we</option>
<option value="select">select</option>
<option value="an">an</option>
<option value="option">option</option>
</select>
</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="not this one" /> not this checkbox but the previous one</div>
You have a couple of options to check the checkbox:
$(document).ready(function() {
$(".stackoverflow").on("change", function() {
//$("#checkbox").prop("checked", true);
$(this).prev("input[type='checkbox']").prop("checked", true);
})
})
Here is a fiddle of it working based on your example: https://jsfiddle.net/gz6mab4k/
Hurray, you are using the relative position of your dom elements to locate each other. I assume that's because you're going to get rid of all the IDs and add this structure many times to your page. So you have a small error in the javascript handler, as mentioned in a comment you break stuff by having .next(), which will force the handler to look for a checkbox in the div coming after the select's parent which is the one that contains checkbox id='not this one'. So you want:
$('.stackoverflow').on('change', function() {
$(this) // the select
.parent() // its parent DIV
.find('input:checkbox') // the only checkbox in the parent div
.attr("checked", true);
});
Related
I would like to be able to edit a multi-select field when ("Update Data?") Checkbox is checked, and disabled the field again, when checkbox is un-checked.
Important is that checked status always leads to being able to edit, meanwhile un-checked means field is disabled, regardless if I load the form with a checked box or as un-checked as the initial state (I can save either or)
I find several useful answers but struggling with syntax to combine those into my solution.
Below can toggle once, then it gets stuck:
$(function() {
$("#checkbox1").change(function() {
if ($("#field2").attr('disabled', !this.checked)) {
$("#field2").removeAttr("disabled");
} else {
$("#field2").attr("disabled", "disabled");
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
<div id="div_id_product" class="form-group row"> <label for="field2" class="col-form-label col-sm-4">
Multiselect
</label>
<div class="col-sm-7">
<select name="multiselect" class="select2-show-search selectmultiple form-control" id="field2" disabled="disabled" multiple style="width: 100%;">
<option value="1" selected>Product 1 </option>
<option value="3" selected>Product 3</option>
<option value="2">Product 2</option>
</select>
</div>
</div>
<div class="form-group row" id="checkbox1"> <label for="id_to_update" class="col-form-label col-sm-4">
Update Data?
</label>
<div class="col-sm-7">
<div class="input-group"> <input type="checkbox" name="to_update" class="checkboxinput" id="id_to_update"> <span class="input-group-append"></span> </div>
</div>
</div>
</form>
Just change your JS to this. You have the change listener on the wrong id.
The listener should be on #id_to_update (input) instead of #checkbox1 which is the div.
$(function() {
$("#id_to_update").change(function() {
$("#field2").prop('disabled', !this.checked);
});
})
Here is the solution you are looking for
$(function() {
$('#field-editable').change(function() {
$('#firstname').prop('disabled', !this.checked);
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
<label for="field-editable">
<input type="checkbox" id="field-editable">
do you want to edit
</label>
<input type="text" name="firstname" id="firstname" disabled="disabled">
</form>
I have a dropdown list like this:
<select name="product" id="product" class="ui fluid search dropdown" >
<option value="mp3">MP3 player</option>
<option value="camera">Camera</option>
<option value="mobile">Mobile</option>
<option value="dvd">DVD player</option>
</select>
when a client select each one, some related check-boxes will appear. each item has got its own check-boxes. for example when they select mp3, check-boxes appear like this
<div class="ui segment" id="mp3">
<div class="ui toggle checkbox">
<input type="checkbox" name="public">
<label>Price</label>
</div>
<div class="ui toggle checkbox">
<input type="checkbox" name="public">
<label>Weight</label>
</div>
<div class="ui toggle checkbox">
<input type="checkbox" name="public">
<label>Storage</label>
</div>
</div>
And have a button at the end
<button class="ui blue basic button" id="search">Search</button>
what is the jquery code to check if the button is clicked, show an alert contains the name of the item in dropdown and check-boxes which are checked?
Need to say, that SO is not a free code-writing service, so you have to provide what did you try, but for the first time it's OK, just notice that.
Here is what you're trying to achieve:
function whichIsSelected() {
var checkedArr = [];
var dtopdownVal = $("#product").val();
$("input[type='checkbox']").each(function() {
if($(this).prop("checked")) {
checkedArr.push($(this).prop("name"));
}
});
alert(`Selected item from dropdown: ${dtopdownVal}. Checked checkboxes: ${checkedArr}`)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="product" id="product" class="ui fluid search dropdown" >
<option value="mp3">MP3 player</option>
<option value="camera">Camera</option>
<option value="mobile">Mobile</option>
<option value="dvd">DVD player</option>
</select>
<div class="ui segment" id="mp3">
<div class="ui toggle checkbox">
<input type="checkbox" name="Price">
<label>Price</label>
</div>
<div class="ui toggle checkbox">
<input type="checkbox" name="Weight">
<label>Weight</label>
</div>
<div class="ui toggle checkbox">
<input type="checkbox" name="Storage">
<label>Storage</label>
</div>
</div>
<button class="ui blue basic button" id="search" onclick="whichIsSelected()">Search</button>
<!-- what is the jquery code to check if the button is clicked, show an alert contains the name of the item in dropdown and check-boxes which are checked? -->
At first, I'm just getting the dropdown value via $("#product").val();. Then, I select all checkboxes via $("input[type='checkbox']"), then, I iterate through selected checkboxes via .each() and pushing name property of only checked checkboxes to checkedArr array. And finally I'm showing the info with simple alert.
You can see this solution https://jsfiddle.net/dpdvmh8x/1/
Read more:
https://api.jquery.com/click/
https://stackoverflow.com/a/1965137/6063698
Running a script where I need to check if the value of checkbox is checked or not, and then run the jQuery code for hide and doing a show based upon specific checked value. I am not able to fix it.
Trying with this code
$(".choosezoho").click(function() {
var checkValue = $("input[type='radio']").is(':checked');
alert(checkValue);
});
This gives me true on which checkbox I check
This is my html
<div class="selectbox_radio">
<blockquote>
<div title="128167215">Training</div>
<input type="hidden" name="customer_name" id="customer_name" value="12817215~Training">
</blockquote>
<input type="radio" class="choosezoho" name="usethisexisting" checked value="12817215">Use Existing
<input type="radio" class="choosezoho" name="usethisexisting" value="12817215">Create New
<br/>
<small>If You Check "Choose New" Please Choose a New Contact from below List</small>
<br/>
</div>
<div class="selectbox" style="display:none;">
<select name="customer_name" id="customer_name_select" class="selectItemsLists">
<option></option>
</select>
</div>
and what I am trying is: if the checkbox is choose new, it should load the select box and hide the above and vice versa in other case.
Also it should check what is the initial selection and based upon that trigger in the jQuery code.
Try to use $(".choosezoho").change() instead of click and than use $(this) to see if it is checked.
Please check below snippet.
To achieve this I have changed the values of radio buttons to identify and show/hide accordingly.
And the existing and new customer HTML is wrapped with ids so we can make show/hide accordingly.
$(".choosezoho").on('change',function() {
var checkValue = $('input[name=usethisexisting]:checked').val()
if(checkValue=="new"){
$("#existingCustomer").hide();
$("#newCustomer").show();
}else{
$("#existingCustomer").show();
$("#newCustomer").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selectbox_radio">
<blockquote id="existingCustomer">
<div title="128167215">Training</div>
<input type="hidden" name="customer_name" id="customer_name" value="12817215~Training">
</blockquote>
<input type="radio" class="choosezoho" name="usethisexisting" checked value="existing">Use Existing
<input type="radio" class="choosezoho" name="usethisexisting" value="new">Create New
<br/>
<div id="newCustomer" style='display:none;'>
<small>If You Check "Choose New" Please Choose a New Contact from below List</small>
<br/>
</div>
<div class="selectbox" style="display:none;">
<select name="customer_name" id="customer_name_select" class="selectItemsLists">
<option></option>
</select>
</div>
</div>
$(".choosezoho").on('change',function() {
var checkValue = $('input[name=usethisexisting]:checked').val()
if(checkValue=="new"){
$("#existingCustomer").hide();
$("#newCustomer").show();
$('.selectbox').show();
}else{
$("#existingCustomer").show();
$("#newCustomer").hide();
$('.selectbox').hide();
}
});
<div class="selectbox_radio">
<blockquote id="existingCustomer">
<div title="128167215">Training</div>
<input type="hidden" name="customer_name" id="customer_name" value="12817215~Training">
</blockquote>
<input type="radio" class="choosezoho" name="usethisexisting" checked value="existing">Use Existing
<input type="radio" class="choosezoho" name="usethisexisting" value="new">Create New
<br/>
<div id="newCustomer" style='display:none;'>
<small>If You Check "Choose New" Please Choose a New Contact from below List</small>
<br/>
</div>
<div class="selectbox" style="display:none;">
<select name="customer_name" id="customer_name_select" class="selectItemsLists">
<option></option>
</select>
</div>
</div>
You should give each of your radio inputs a unique id, and then put them in a div. That way you can show / hide the entire div.
Then you can bind a change event to the Create New radio input and see if it is checked, if so you can show the select box and hide the radio fields.
$("#createNewID").bind("change",function() {
if($(this).is(':checked')){
$('.selectbox').show();
$('#radioInput').hide();
}
See JFiddle: https://jsfiddle.net/1h2xaL5x/
$(".choosezoho").on('change',function() {
var checkValue = $('input[name=usethisexisting]:checked').val()
if(checkValue=="new"){
$("#existingCustomer").hide();
$("#newCustomer").show();
$('.selectbox').show();
}else{
$("#existingCustomer").show();
$("#newCustomer").hide();
$('.selectbox').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="selectbox_radio">
<blockquote id="existingCustomer">
<div title="128167215">Training</div>
<input type="hidden" name="customer_name" id="customer_name" value="12817215~Training">
</blockquote>
<input type="radio" class="choosezoho" name="usethisexisting" checked value="existing">Use Existing
<input type="radio" class="choosezoho" name="usethisexisting" value="new">Create New
<br/>
<div id="newCustomer" style='display:none;'>
<small>If You Check "Choose New" Please Choose a New Contact from below List</small>
<br/>
</div>
<div class="selectbox" style="display:none;">
<select name="customer_name" id="customer_name_select" class="selectItemsLists">
<option></option>
</select>
</div>
</div>
Now it is updated
This solution is not very different from previous ones, however, it shows some small details that seem useful to me. The switch allows widespread use for more cases and makes things clearer.
I understand that the "input type text" must also be shown in the "Select New" option, the list appears in the other case. Right?
There are also minor changes in html.
$(".choosezoho").bind("change",function() {
if($(this).is(':checked')){
switch( $(this).attr('id') ) {
case "createNew":
$('#nameSelect1').hide();
$('#newCustomerDiv').show();
break;
case "useExisting":
$('#nameSelect1').show();
$('#newCustomerDiv').hide();
break;
}
}
});
//setDefault
$('#useExisting').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selectbox_radio" >
<blockquote>
<div title="128167215"
id="trainingID">
Training
</div>
<div id="newCustomerDiv">
<label for="customerName">New customer name:</label>
<input type="input"
id="customerName"
name="customer_name"
id="customer_name"
value="12817215~Training">
</div>
</blockquote>
<input type="radio"
id = "useExisting"
class="choosezoho"
name="usethisexisting"
checked value="12817215">
Use Existing
<input type="radio"
id="createNew"
class="choosezoho"
name="usethisexisting"
value="12817215">
Create New
<br/>
<small>If You Check "Choose New" Please Choose a New
Contact from below List</small>
<br/>
</div>
<div id="nameSelect1" class="selectbox" style="display:none;">
<select name="customer_name" id="customer_name_select"
class="selectItemsLists">
<option value="John Doe">John Doe</option>
<option value="Jane Doe">Jane Doe</option>
</select>
</div>
I am need to get the id before and after html element of dropdown list on change. Please see blow source code.
When Fund name selected I need to get the previous selected checkbox id or name ( Cash / Epf ) & after selected checkbox id or name ( No.of Units Reedem / Amount Reedem / All units).
Thanks in advance.
$(document).ready(function () {
$('.units').change(function () {
alert($(this).attr('id'));
alert($(this).before().parent().parent().html());
});
});
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<div class="setup-content" id="form-3">
<div id="repurchase">
<div class="lblHead">REPURCHASE REQUEST</div>
<div class="form-group">
1.<input type="checkbox" name="Fm3CheckBoxList1[]" id="fm3chk11" value="CashPlan" class="singlecheckbox plan" /><label for="fm3chk11">Cash Plan</label>
<input type="checkbox" name="Fm3CheckBoxList1[]" id="fm3chk12" value="EPFPlan" class="singlecheckbox plan" /><label for="fm3chk12">EPF Plan</label>
</div>
<div class="form-group">
<div class="col-lg-6">
<label>Fund Name</label>
<select id="fundId" class="form-control drplst units" AppendDataBoundItems="true">
<option Value=""></option>
<option Value="123">123</option>
<option Value="369">369</option>
</select>
</div>
<div class="col-lg-6">
<div class="clearfix"></div>
<input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk21" value="No_OfUnitToRedeem" class="singlecheckbox" /><label for="fm3chk21">No. of Unit to Redeem</label>
<input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk22" value="Amount_ToRedeem" class="singlecheckbox" /><label for="fm3chk22">Amount to Redeem</label>
<input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk23" value="All_Units" class="singlecheckbox" /><label for="fm3chk23">All Units</label>
<asp:TextBox ID="Fm3TextBox2" runat="server" class="form-control" placeholder="AMOUNT"></asp:TextBox>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
Try this :
$(document).ready(function () {
$('.units').change(function () {
alert($(this).closest('.form-group').prev().find('.singlecheckbox:checked').attr('id'));
alert($(this).parent().next().find('.singlecheckbox:checked').attr('id'));
});
});
This is working for single checked box, if more than one checkbox was chekced, you need to iterate that and doing something with that.
Assuming your plans are mutually exclusive, you would want radio buttons to represent them, unless that F3m... indicates some JS framework that would turn appropriately decorated checkboxes into mutually exclusive selections. Maybe you don't want them to be mutually exclusive. If that's the case I'll update my answer. Either way, you can use another attribute on the group of checkboxes to aggregate them all, such as name. See my changes to the code snippet (below) for using name to find the selected plan. You could assign all checkboxes in a particular group a name, class, or modify their IDs to include some base to use in a selector. You could put them inside a container element (div) for easier reference, and then bind your inputs' events...
var lastPlanSelection = "none";
$('input[name=targetSet]').on('click', function() { lastPlanSelection = $(this).val(); });
Modifying your snippet to find the selected radio button...same principle could be applied to checkboxes using class attribute.
$(document).ready(function () {
$('.units').change(function () {
var selectedPlan = $('input[name=plan]:checked');
alert("Selected Plan: " +
(selectedPlan.length === 1 ? selectedPlan.val() : "none"));
});
});
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<div class="setup-content" id="form-3">
<div id="repurchase">
<div class="lblHead">REPURCHASE REQUEST</div>
<div class="form-group">
1.<input type="radio" id="cashPlan" name="plan" value="Cash"><label for="cashPlan">Cash Plan</label><br/>
<input type="radio" id="epfPlan" name="plan" value="EPFPlan"><label for="epfPlan">EPF Plan</label>
</div>
<div class="form-group">
<div class="col-lg-6">
<label>Fund Name</label>
<select id="fundId" class="form-control drplst units" AppendDataBoundItems="true">
<option Value=""></option>
<option Value="123">123</option>
<option Value="369">369</option>
</select>
</div>
<div class="col-lg-6">
<div class="clearfix"></div>
<input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk21" value="No_OfUnitToRedeem" class="singlecheckbox" /><label for="fm3chk21">No. of Unit to Redeem</label>
<input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk22" value="Amount_ToRedeem" class="singlecheckbox" /><label for="fm3chk22">Amount to Redeem</label>
<input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk23" value="All_Units" class="singlecheckbox" /><label for="fm3chk23">All Units</label>
<asp:TextBox ID="Fm3TextBox2" runat="server" class="form-control" placeholder="AMOUNT"></asp:TextBox>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
I need some help displaying a div with a form inside of it whenever someone selects a certain option from a tag. My code is this:
<script type="text/javascript">
$(function() {
$('#contactOptionSelect').change(function() {
$('.emailForm').hide();
$('#' + $(this).val()).show();
});
});
</script>
<div class="contactSelect" id="contactOptionSelect">
<label for="selectContact">Contact us: </label>
<select name="selectContact" class="selectContactType" style="width: 150px;"/>
<option class="opt" value="">Please select</option>
<option class="opt" id="helpOpt" value="">Help and Support</option>
<option class="opt" id="emailOpt" value="">Email</option>
<option class="opt" id="visitOpt" value="">Visit us!</option>
<option class="opt" id="phoneOpt" value="">Phone</option>
</select>
</div>
<div class="emailForm" id="emailFormId">
<form id="contactUsForm" method="post" action="">
<div class="formSubject">
<label for="inputSubject">Subject</label>
<input type="text" width="50px" id="inputSubject" />
</div>
<div class="formBody">
<label for="inputBody">Email</label>
<textarea rows="15" cols="50" id="inputBody"></textarea>
</div>
<div class="formSubmit">
<input type="submit" id="inputSubmit" value="Send!"/>
</div>
</form>
</div>
And I want to display the last form when the email option is selected. I kinda want it to work like this: http://www.apple.com/privacy/contact/ High standards I know but whatever haha Thanks in advance for any help!
Are you looking for something like this? http://jsbin.com/okakuy/edit#javascript,html
Whenever the select option is changed, we hide whichever div is visible, and show whichever div has the current select value as its id attribute.
$("#parts").on("change", function(o){
$(".panels")
.find("> div:visible")
.slideUp()
.end()
.find("#" + o.target.value)
.slideDown();
});
Coupled with this markup:
<select id="parts">
<option>foo1</option>
<option>foo2</option>
<option>foo3</option>
</select>
<div class="panels">
<div id="foo1">This is foo1</div>
<div id="foo2">This is foo2</div>
<div id="foo3">This is foo3</div>
</div>