I am using basic HTML to create two different divs, each having some checkboxes as options.(Basically I'm creating a test module). I have checked some checkboxes of the first div. Now, when I go to the second div, and click on the text i.e the label of some checkboxes, the corresponding checkboxes of the first div are getting unchecked. This should not happen. Please help me out
Sorry guys. Did not post the code. These are two different divs
First One:
<div class="form-check">
<input class="form-check-input" type="checkbox" name="csuite_2" id="opB" value="B">
<label class="form-check-label" >
Daily
</label>
</div>
<br/>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="csuite_2" id="opC" value="C">
<label class="form-check-label" >
Once a month
</label>
</div>
Second One
<div class="form-check">
<input class="form-check-input" type="checkbox" name="expectation_3" id="opB" value="B">
<label class="form-check-label" >
Fund Manager
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="expectation_3" id="opD" value="D">
<label class="form-check-label" >
Launching my own startup
</label>
</div>
<br/>
I have tried not wrapping the label to the checkbox and it works fine. But is there a way I can do it by wrapping the label and stopping this thing from happening?
I hope this is your problem.
Basically its because of the similar id & for.
As you can see in the below code I have used Bike & Car as id in "div1" and the same id's are being used in the "div2". So make sure to give a unique id and corresponding for values.
<!DOCTYPE html>
<html>
<body>
<div class="div1">
<label for="Bike">
<input id="Bike" type="checkbox"> I have a bike
</label><br>
<label for="Car">
<input id="Car" type="checkbox"> I have a car
</label><br>
<div>
<br><br><br>
<div class="div2">
<label for="Bike">
<input id="Bike" type="checkbox"> I have a bike
</label><br>
<label for="Car">
<input id="Car" type="checkbox"> I have a car
</label><br>
<div>
</body>
</html>
Related
I have this field at my form for calculating Value Added Tax:
<form method="post" action="" id="form-product">
<div class="col-md-4">
<div class="form-check">
<input class="form-check-input" type="radio" id="vat" name="vat" value="on">
<label class="form-check-label">
Calculate VAT
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" id="vat" name="vat" value="off" checked>
<label class="form-check-label">
Do not calculate VAT
</label>
</div>
</div>
</form>
Now within jQuery, I want to check that if the radio button is set to the value on, do the calculation.
So how can I do that with jQuery.
I would really appreciate any idea or suggestion from you guys...
Thanks in advance.
I have added a listener to get the value from the radio button.
$('#form-product input').on('change', function() {
alert($('input[name=vat]:checked', '#form-product').val());
});
Here's an example:
for more info in Jquery refer to this question
I have 3 radiobuttons. I want they act like radiobuttons : if the user click one, the other can't be clicked. But somehow my buttons are acting like checkboxes, the user can select all 3. Here is my code, what am i missing ? Thanks !
<div class="form-group">
<div class="form-item" id="form-item-hi_status1">
<label for="input-status1" ></label>
<input class="radio-input" type="radio" id="input-hi_status1" name="input-hi_status1" data-label="Option 1" data-mask="radiobutton" value="1">
<label class="radio-label">Option 1</label>
</div>
<div class="form-item" id="form-item-hi_status2">
<label for="input-status2" ></label>
<input class="radio-input" type="radio" id="input-hi_status2" name="input-hi_status2" data-label="Option 2" data-mask="radiobutton" value="2">
<label class="radio-label">Option 2</label></div>
<div class="form-item" id="form-item-hi_status3">
<label for="input-status3" ></label>
<input class="radio-input" type="radio" id="input-hi_status3" name="input-hi_status3" data-label="Option 3" data-mask="radiobutton" value="3"><label class="radio-label">Option 3</label>
</div>
Here is an image showing the problem. I DON'T USE W3Schools as a learning resource, i just used their HTML editor to show the example.
All the radio buttons in a group must have the same value for the name attribute. That's what makes them mutually exclusive.
Here's the documentation for <input type='radio'> which includes:
The "name" setting is an important attribute of radio buttons, as it
identifies which group a radio button belongs to. Because groups of
radio buttons act as a unit, you must specify a common name for all
related radio buttons. When two or more radio buttons share a name,
selecting one of the buttons will unselect all of the others with the
same name. If you have more than one group of radio buttons on a
single page, the buttons in different groups must have different
"name" attributes.
Radio buttons are grouped together using the name attribute. give them the same name.
<div class="form-group">
<div class="form-item" id="form-item-hi_status1">
<label for="input-status1" ></label>
<input class="radio-input" type="radio" id="input-hi_status1" name="input-hi_status" data-label="Option 1" data-mask="radiobutton" value="1">
<label class="radio-label">Option 1</label>
</div>
<div class="form-item" id="form-item-hi_status2">
<label for="input-status2" ></label>
<input class="radio-input" type="radio" id="input-hi_status2" name="input-hi_status" data-label="Option 2" data-mask="radiobutton" value="2">
<label class="radio-label">Option 2</label>
</div>
<div class="form-item" id="form-item-hi_status3">
<label for="input-status3" ></label>
<input class="radio-input" type="radio" id="input-hi_status3" name="input-hi_status" data-label="Option 3" data-mask="radiobutton" value="3">
<label class="radio-label">Option 3</label>
</div>
Below code is html produced from opencart 2
No radio button is selected when loading page.
How can i have selected the Value="2" as default checked. (javascript or CSS)
<div id="payment-custom-field1" class="form-group custom-field" data-sort="0">
<label class="control-label">Invoice</label>
<div id="input-payment-custom-field1">
<div class="radio">
<label>
<input type="radio" value="2" name="custom_field[1]">
Receipt
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="1" name="custom_field[1]">
Invoice
</label>
</div>
</div>
</div>
Solution with javascript
(function() {
document.getElementsByName("custom_field[1]")[0].checked=true;
})();
<input type="radio" id="sample" value="2" name="custom_field[1]">
Receipt
</label>
Using javascript:
document.getElementById("sample").checked = true;
Using html:
You can simply add checked attribute to your html element
Using the element name:
(function() {
document.getElementsByName("custom_field[1]")[0].checked=true;
})();
https://jsfiddle.net/pandiyancool/vb73q59w/
You can simply add checked attribute
<input type="radio" value="2" name="custom_field[1]" checked>
The solution with javascript was the below code:
document.getElementsByName("custom_field[1]")[0].checked=true;
Thank you Pandiyan Cool
I have the following form on my page JSBin
Each option on the page has a text associated with it(like option1: R50, where R is the currency) with the total price of the product is on top of the page (R500). I want that price to be updated based on the option text value. Like selecting weight- 30kg should add R50 to the total value at the top and update it and deselecting it should update again. I need to use Javascript take the price from the option text-split the currency from the numerical value-add id to the base price; but I can't figure out how to do it and for all the three option types.
html
<div class="col-sm-4">
<ul class="list-unstyled">
<li id="thisIsOriginal">
<h2>R500</h2>
</li>
</ul>
<div id="product">
<hr>
<h3>Available Options</h3>
<div class="form-group required">
<label class="control-label">Radio</label>
<div id="input-option218">
<div class="radio">
<label>
<input type="radio" name="option[218]" value="5">
Small (+R12)
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="option[218]" value="6">
Medium (+R45)
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="option[218]" value="7">
Large (+R50)
</label>
</div>
</div>
</div>
<div class="form-group required">
<label class="control-label">Checkbox</label>
<div id="input-option223">
<div class="checkbox">
<label>
<input type="checkbox" name="option[223][]" value="8">
Checkbox 1 (+R50)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="option[223][]" value="9">
Checkbox 2 (+R44)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="option[223][]" value="10">
Checkbox 3 (+R22)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="option[223][]" value="11">
Checkbox 4 (+R65)
</label>
</div>
</div>
</div>
<div class="form-group required">
<label class="control-label" for="input-option227">weight</label>
<select name="option[227]" id="input-option227" class="form-control">
<option value=""> --- Please Select --- </option>
<option value="19">30kg (+R50)</option>
<option value="17">10kg</option>
<option value="18">20kg (+R24)</option>
</select>
</div>
You could use jQuery, and change the text like this:
$(".thisIsOriginal h2").text(//new value)
Now that you know this, you can achieve what you want by doing some basic if/else statements based on a "change" event in your form groups (see Monitoring when a radio button is unchecked)
Here you need to attach onchnage handler on all the controls.
I have done for the radio button. You can try similar things for other contols.
http://jsbin.com/garibomohi/1/edit?html,js,output
Hope this helps you out.
I have this setup:
<style>.selectit{display:none;}</style>
<div id="foo">
<label class="selectit">
<input type="checkbox" name="one" id="one" checked>
One
</label>
<label class="selectit">
<input type="checkbox" name="two" id="two">
Two
</label>
<label class="selectit">
<input type="checkbox" name="three" id="three" checked>
Three
</label>
</div>
I only want to display the Label tags for the checked inputs and hide the labels for others.
something like show() for the checked inputs labels and hide() for the unchecked ones.
example of working code:
<style>.selectit{display:none;}</style>
<div id="foo">
<label class="selectit" style="display:block">
<input type="checkbox" name="one" id="one" checked>
One
</label>
<label class="selectit">
<input type="checkbox" name="two" id="two">
Two
</label>
<label class="selectit" style="display:block">
<input type="checkbox" name="three" id="three" checked>
Three
</label>
</div>
or maybe perhaps, make a new div and only show the text of the checked labels in that div.
<style>.selectit{display:none;}</style>
<div id="foo">
<label class="selectit">
<input type="checkbox" name="one" id="one" checked>
One
</label>
<label class="selectit">
<input type="checkbox" name="two" id="two">
Two
</label>
<label class="selectit">
<input type="checkbox" name="three" id="three" checked>
Three
</label>
</div>
<div id="output">One - Three</div>
is this even possible? or do I need to do this by appending a div that searches the whole checkboxes? Any help is appreciated because I've exhausted all my options already and I'm out of ideas. Thank you in advance.
You can filter checked checkboxes using filter method.
$('#foo input[type=checkbox]').filter(function(){
return this.checked;
}).prev('label').show();
Disclaimer: This answer is just based on your title question
I'd go with pure CSS for that. Like
label {
display: none;
}
input:checked + label {
display: block;
}
You would just need to adjust your markup a little.
Example: http://jsfiddle.net/ZpmGd/