I have a search page that uses a form and checkboxes to display results. When the page reloads with the new results, I want to display something like this at the top of the page so users can easily remove one of their selections:
X Blue X Red X Black
My checkboxes look like this:
<input type="checkbox" name="color[]" id="color_white" value="white">White
<input type="checkbox" name="color[]" id="color_blue" value="blue" checked="checked">Blue
<input type="checkbox" name="color[]" id="color_red" value="red" checked="checked">Red
<input type="checkbox" name="color[]" id="color_orange" value="orange">Orange
<input type="checkbox" name="color[]" id="color_purple" value="purple">Purple
<input type="checkbox" name="color[]" id="color_black" value="black" checked="checked">Black
How do I go about getting the selected checkboxes, and then duplicating them at the top of the page so a user can just click on the X to make it "uncheck?"
Click events and form submission is done in jquery, so I'm assuming that this can be done that way too. Can anyone help? Thank you!
I would suggest adding a blank div at the top
<div id="checked"></div>
And then on load create a button for each checked input
$(function(){
$('input[type=checkbox]').each(function(){
if($(this).attr('checked')=='checked'){
$('#checked').append('<input id="'+$(this).attr('id').substring(6)+'" type="button" value="'+$(this).attr('id')+'">')
}
});
$('input').on('click',function(){
var i='color_'+$(this).attr('id');
$('#'+i).prop('checked','');
$(this).remove();
});
});
If a button is clicked remove the check and remove itself.
Related
I need to hide a label & radio button after a checkbox was checked a page before. I need this to hide a radio button in a order process. The problem is that the checkbox and the label&radio are not at the same page.
This is my checkbox:
<input id="coupon" class="checkbox" name="coupon" value="yes" type="checkbox">
And this are the two elements I want to hide at the next page:
<input id="payment_paypal_1" class="radio" name="payment_paypal" value="2" required="" type="radio">
<label id="payment_paypal_2" for="payment_paypal">PayPal</label>
Thank you all in advance!
If on the same page then using jquery, you can do it like this -
$("#coupon").click(function() {
if ($(this).prop('checked')===true){
console.log("checked") ;
$('#payment_paypal_1').hide();
$('#payment_paypal_2').hide();
}
else {
console.log(" un checked") ;
$('#payment_paypal_1').show();
$('#payment_paypal_2').show();
}
});
In my dashboard there are 4 radio button. I need show only one in one condition. And each button has different values
<input type="radio" name="payment_method" id="payment_method" value="Online-Others">
<input type="radio" name="payment_method" id="payment_method" value="Cash">
<input type="radio" name="payment_method" id="payment_method" value="wallet">
<input type="radio" name="payment_method" id="payment_method" value="online">
Here I need to show only cash button. Should I make different ids for each button? Or using this am I able to show that?
You can remove elements by values with a attribute selector:
// removes all 'payment_method' radios where 'value' is not 'Cash'
$(".payment_method[value!=Cash]").remove();
But as ids are unique in HTML, you could (must) better change them:
<input type="radio" name="payment_method" id="payment_method_others" value="Online-Others">
<input type="radio" name="payment_method" id="payment_method_cash" value="Cash">
<input type="radio" name="payment_method" id="payment_method_wallet" value="wallet">
<input type="radio" name="payment_method" id="payment_method_online" value="online">
JS:
// removes all 'payment_method' radios where 'id' is not 'payment_method_cash'
$(".payment_method:not(#payment_method_cash)").remove();
No need to add ID or Class
$('input[name=payment_method][value=wallet]').prop('checked',true); //if you need to highlight "wallet"
$('input[name=payment_method][value=Cash]').prop('checked',true); //if you need to highlight "Cash"
Your question in not much clear for me, are you expecting something like this ?
$('#payment_method_cash').on('change', function() {
// Show cash payment button and options.
console.log('Cash option checked : ' + $(this).prop('checked'));
});
$('#payment_method_wallet').on('change', function() {
// Show wallet payment button and options.
console.log('wallet option checked : ' + $(this).prop('checked'));
});
$('#payment_method_online').on('change', function() {
// Show online payment button and options.
console.log('online option checked : ' + $(this).prop('checked'));
});
$('#payment_method_other').on('change', function() {
// Show other payment button and options.
console.log('Other option checked : ' + $(this).prop('checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="payment_method" id="payment_method_other" value="Online-Others">
<input type="radio" name="payment_method" id="payment_method_cash" value="Cash">
<input type="radio" name="payment_method" id="payment_method_wallet" value="wallet">
<input type="radio" name="payment_method" id="payment_method_online" value="online">
You can remove id attribute and can use value attribute.
html
<input type="radio" name="payment_method" value="Online-Others">
<input type="radio" name="payment_method" value="Cash">
<input type="radio" name="payment_method" value="wallet">
<input type="radio" name="payment_method" value="online">
jquery code will be like
//if you want to show only Cash radio button
$(document).ready(function() {
$("input[value!='Cash']").css('display','none');
});
Alternately if you want to checked one radio button out of four use below jquery.
//if you want to checked Cash radio button out of four use below
$(document).ready(function() {
$("input[value='Cash']").attr('checked','true');
});
Hope it will help.
my JS code is bellow:
// JavaScript Document
function bubbleColor() {
if($("#Checkbox1").is(":checked") && $("#Checkbox2").is(":checked"))
{
$(".bubble").css("background-color", "red");
}
}
var el = document.getElementById(".bubble");
el.onclick = bubbleColor;
And my targeted HTML:
<div id="circle" class="bubble">
<p class="circle_text">
#6
</p>
</div>
<br/><br/>
<input type="checkbox" value="1" id="Checkbox1" name="Checkbox1"/> Answer one <br/>
<input type="checkbox" value="1" id="Checkbox2" name="Checkbox2"/> Answer two <br/>
<input type="checkbox" value="1" id="Checkbox3" name="a3"/> Answer three <br/>
Desired output:
When somebody checks [selects] both the Checkbox1 and Checkbox2, the #6 background should be Red color.
Problem:
The code does not seem to work.
Any help please?
Im assuming you are using jquery (as you are changing css with jquery)
The behaviour you describe in your question implies that changing the checkbox should trigger a verification, so why do you attach the bubbleColor function to clicking on the .bubble div?
Try something like this:
// Alternatively you could use a class to select the checkboxes
$("input[type='checkbox']").change(bubbleColor);
Ofcourse ideally you should change your function to remove the red color if you uncheck the boxes:
function bubbleColor() {
if ($("#Checkbox1").is(":checked") && $("#Checkbox2").is(":checked")) {
$(".bubble").css("background-color", "red");
} else {
$(".bubble").css("background-color", "transparent");
}
}
Fiddle: http://jsfiddle.net/sQCcF/2/
Edit:
If what you want is to ensure user only selects 1 option then you should use radio buttons instead of checkboxes, as that is the default behavior:
<input type="radio" name="inputname" value="1"/>
<input type="radio" name="inputname" value="2"/>
<input type="radio" name="inputname" value="3"/>
The name has to be the same for the inputs, but each one will have a different value, selecting one will automatically unselect the other.
Problem is at
var el = document.getElementById(".bubble");
You are selecting element with ID of .bubble (bubble is a class)
Change it to and check :
var el = document.getElementById("circle");
First of all you attach an event handler for the click event on div with class "bubble".
Then, you use document.getElementById method to select an element but you use as argument the class of that element, not the ID.
For this to work you need to attach the click event handler to checkbox elements.
Something like this:
$('input[type="checkbox"]').click(function() {
bubbleColor();
});
Replace var el = document.getElementById(".bubble");
el.onclick = bubbleColor;
with
$(".bubble").click(bubbleColor) ;
should work.
Try this code
HTML
<div id="circle" class="bubble">
<p class="circle_text">
#6
</p>
</div>
<br/><br/>
<input type="checkbox" value="1" id="Checkbox1" name="Checkbox1" class="chBox"/> Answer one <br/>
<input type="checkbox" value="1" id="Checkbox2" name="Checkbox2" class="chBox" /> Answer two <br/>
<input type="checkbox" value="1" id="Checkbox3" name="a3" class="chBox" /> Answer three <br/>
JQUERY
$(document).ready(function(){
// you can use '.chBox class or input[type='checkbox']'
$('.chBox').bind('click', function(){
if($("#Checkbox1").is(":checked") && $("#Checkbox2").is(":checked"))
{
$(".bubble").css("background-color", "red");
}else{
$(".bubble").css("background-color", "#fff");
}
});
});
I am writing a form, it has checkboxes, and I wrote a script to show and hide them (specifically hide all other checkboxes when one of them is selected).
I reached this far when I need this to hide the input checkboxes, but what this code below is doing, is: it shows only 1 of checkboxes (the second one). Why, how can I hide both of the checkboxes at the same time ?
$('input:checkbox.individual' && 'input:checkbox.organization').stop(true,true).fadeIn("normal")
this is my html:
<div class="field check check-entity">
<label for="entity_type">For what kind of entity are you requesting sponsorship?<span class="form_required">*</span></label><br><br>
<input type="checkbox" name="entity_type" value="entity_project" class="project"/><label for="entity_project" class="lalbe_project">Project</label>
<input type="checkbox" name="entity_type" value="entity_individual" class="individual"/><label for="entity_individual"class="label_individual">Individual</label>
<input type="checkbox" name="entity_type" value="entity_organization" class="organization"/><label for="entity_organization" class="label_organization">Organisation</label>
</div>
Use a , in the selection string to select multiple groups of elements
$('input.individual:checkbox, input.organization:checkbox')
// ^ see here
Is this the effect you wanted to achieve?
http://jsfiddle.net/z37br/
HTML:
<div class="field check check-entity">
<label for="entity_type">For what kind of entity are you requesting sponsorship?
<span class="form_required">*</span>
</label>
<br><br>
<input type="checkbox" name="entity_type" value="entity_project" data-type="project"/>
<label for="entity_project" class="lalbe_project">Project</label>
<input type="checkbox" name="entity_type" value="entity_individual" data-type="individual"/>
<label for="entity_individual"class="label_individual">Individual</label>
<input type="checkbox" name="entity_type" value="entity_organization" data-type="organization"/>
<label for="entity_organization" class="label_organization">Organisation</label>
</div>
JS:
$('input').change(function() {
if ($(this).prop('checked')) {
var clickedCheckboxType = $(this).attr('data-type');
$('input').each(function() {
if (clickedCheckboxType != $(this).attr('data-type')) {
$(this).fadeOut('fast');
$(this).next().fadeOut('fast');
}
});
}
else {
$('input').fadeIn('fast');
$('input').next().fadeIn('fast');
}
});
I have a set of checkboxes that have a name like
form[check][..]
where .. is a number (id). I would have another checkbox that checked would check all the previous checkboxes, a sort of check/uncheck all. The problem is, how can with jQuery get all that checkboxes?
EDIT 1
this is my current html markup:
<input type="checkbox" value="1" name="form[check][1]" />
<input type="checkbox" value="1" name="form[check][2]" />
<input type="checkbox" value="1" name="form[check][3]" />
<input type="checkbox" value="1" name="form[check][..]" />
<input type="checkbox" name="checkAll" />
Add a class to the checkboxes you want checked, and select them using that class
$('.myCheckbox').prop('checked', true);
$('[name="checkAll"]').on('change', function(){
$('input[name^="form[check]"]:checkbox').prop('checked', $(this).prop('checked'));
});