I want to add an attribute to a HTML element without a value using JQuery
<input id="r1" type="radio name="r1" value="1">
Add required
<input id="r1" type="radio name="r1" value="1" required>
How can this be done without the =""after the attribute?
The standard practice would be to set the property to true
$("#r1").prop("required", true);
This actually results in markup that exactly reads
<input id="r1" required>
JSFiddle demo: http://jsfiddle.net/8SrED/
Related
I am creating a demo application, where I want to use radio buttons as buttons. For that I am using JQuery UI buttonset widget. It was working fine before but the actual problem began when I introduced the attribute runat="server", in order to retain the state during a post back. But after applying the attribute, buttonset widget stopped working on radio buttons.
So, I just want a solution where I can retain the state of the radio button controls and at the same time apply buttonset widget on them.
<div id="genderOptions">
<input type="radio" id="genderMale" value="Male" name="gender" />
<label for="genderMale" >Male </label>
<input type="radio" id="genderFemale" value="Female" name="gender"/>
<label for="genderFemale" >Female </label>
</div>
Output without runat="server" attribute
<div id="genderOptions">
<input type="radio" id="genderMale" value="Male" name="gender" runat="server" />
<label for="genderMale" >Male </label>
<input type="radio" id="genderFemale" value="Female" name="gender" runat="server" />
<label for="genderFemale" >Female </label>
</div>
This is the final output after specifying the attribute runat="server"
The runat="server" attribute used to dynamically change id and name attributes. Verify your rendered markup. Probably you will see something like
<input type="radio" id="ctl00_genderMale" value="Male" name="ctl00$gender" />
I assume you specify the input fields using ids in your JS which initializes the buttonset widget. Try to use tag or class selectors instead:
$("#genderOptions").buttonset({
items: "input[type=radio]"
});
I am using bootstrap for templating. I have a group of checkboxes. I want to use required property of bootstrap but, when I want to use it for group of checkboxes not for individual.
Is there is any way to impletement this.
Here is the reference image http://grab.by/Hm5m
Given
<form>
<input type="checkbox" name="whatever" value="1" required="required" class="required_group" />
<input type="checkbox" name="whatever" value="2" required="required" class="required_group" />
<input type="checkbox" name="whatever" value="3" required="required" class="required_group" />
<input type="checkbox" name="whatever" value="4" required="required" class="required_group" />
<input type="submit" name="submit" />
</form>
You could make it so that the user is required to check at least one checkbox:
$('form').on('click', '.required_group', function(){
$('input.required_group').prop('required', $('input.required_group:checked').length === 0);
});
This solution relies on the HTML5 required attribute (and browser support). It doesn't require any particular Bootstrap code, but it uses jQuery (which you're already using with Bootstrap), so you can customize it with the Bootstrap classes and widgets that make sense for your project.
I am trying to parse through a typical form using jquery. I want to obtain all details about the various fields in the form- viz field name, field type (eg radio/checkbox/list)...
How do I determine if a field allows multiple values to be selected? (eg in check box or list box)?
If this cannot be done using jquery, then can it be done using pure javascript? I already have with me a ref to the element for which this (whether multiple values are allowed or not) has to be determined...
Surround your control with some <div> as:
<div id="testCheck">
<input type="checkbox" checked="checked" value="1" />
<input type="checkbox" checked="checked" value="2" />
<input type="checkbox" checked="checked" value="3" />
<input type="checkbox" checked="checked" value="4" />
<input type="checkbox" checked="checked" value="5" />
<input type="checkbox" checked="checked" value="6" />
<input type="checkbox" checked="checked" value="7" />
<input type="checkbox" checked="checked" value="8" />
</div>
and check the selected or unselected elements using follwwing jquery code snippet. .size() will return the no of checked item and you can get the value of selected items by .val().
//Write your code when Document is loaded or some element click
$(document).ready(function() {
$("#testChk").click(function() {
alert($("#testCheck :checked").size());
//function to print the value of each checked checkboxes
$("#testCheck :checked").each(function() {
alert("value = " + $(this).val());
});
for more help follow these links:
How can I know which radio button is selected via jQuery?
have a look on jquery selector. you should watch bottom itms :password, :reset etc that you need to use.
http://api.jquery.com/category/selectors/
http://jquery-howto.blogspot.com/2008/12/how-to-check-if-checkbox-is-checked.html
Handling Checkboxes, Radio Buttons and Select Options in jQuery
Hope this help you little bit...
Is it possible to check or uncheck a set of checkboxes on a page a) without looping, and b) without using a Javascript framework such a jQuery?
This question is related but is about (un)checking all the checkboxes on a page with jQuery.
I expect the answer to my question will probably be "no", but if there's some weird, hacky way of doing it (not weird and not hacky is good too!) then I would like to know. Call it curiosity if you will.
Edit: I suppose what I'm really asking is for a way to do it in O(1) (constant time) rather than O(n) (linear time with respect to the number of checkboxes)
If the buttons are in a form, you can use a reset button if the default state is unchecked and you don't mind resetting all the other controls in the form. Otherwise, you have to use a loop regardless of whether you use POJS or a "framework".
Look ma, no script!
<form action="#">
<div>
<input type="checkbox" name="cb0">
<input type="checkbox" name="cb1">
<input type="checkbox" name="cb2">
<input type="checkbox" name="cb3">
<br>
<input type="reset" value="Uncheck all">
</div>
</form>
One way you can go about checking or unchecking a set of checkboxes on a page is to reference each one individually.
This meets both criteria "a" (no looping) and criteria b (no framework)
You could do it with map(), which may or may not be a loop, depending on how strict of a definition you use for "loop" :) But in all practical terms, it's just another way of casting a loop. I'd say the answer to your question is "no."
EDIT:
var checkboxes = getElement...
checkboxes.map(function(c) {
c.checked = true;
});
You may modify/override the full HTML code:
<div id="checkBoxes">
<input name="foo" type="checkbox" value="1" />
<input name="bar" type="checkbox" value="1" />
<input name="baz" type="checkbox" value="1" />
</div>
<script type="text/javascript">
function checkAll(){
document.getElementById("checkBoxes").innerHTML =
'<input name="foo" type="checkbox" value="1" checked="checked" />'
+'<input name="bar" type="checkbox" value="1" checked="checked" />'
+'<input name="baz" type="checkbox" value="1" checked="checked" />';
}
function uncheckAll(){
document.getElementById("checkBoxes").innerHTML =
'<input name="foo" type="checkbox" value="1" />'
+'<input name="bar" type="checkbox" value="1" />'
+'<input name="baz" type="checkbox" value="1" />';
}
</script>
no Loop, no Framework, just a little bit unesthetic..
I have a gender selection radio:
<div class="label-inputs" name="userFieldDiv" id="genderUserFieldDiv">
<label class="required">Sexo</label>
<input type="radio" class="check" value="F" name="userDto.gender" id="userDto.gender0">
<label for="userDto.gender0">Femenino</label>
<input type="radio" class="check" checked="checked" value="M" name="userDto.gender" id="userDto.gender1">
<label for="userDto.gender1">Masculino</label>
</div>
I'm trying to use a jQuery script to get the selected radio and paste it inside of a label.
$("#userDto\\.gender").change(function() { $("#genderLabel").html(this.value); });
The problem is that I'm using Spring, and when I use formRadioButton, it generates the id: userDto.gender but adds a 0 and 1 to the options. So I'm out of ideas about how to make the next HTML to get the value of the selected radio.
<div name="userLabelDiv" id="genderUserLabelDiv">
<label class="required">Sexo</label>
<label id="genderLabel">Masculino</label>
</div>
Could someone guide me through the problem? I can't find where is my error in the JS code. Thank you
The ids must be unique so what Spring is doing is just fine. Just use the name attribute for the selector instead of the id.
$('input[name="userDto\\.gender"]').change( ... )