I tried to design a form, which is now to complicated for me to describe so I created a fiddle: http://jsfiddle.net/tLh72acj/
I think this shows my problem: I can't access the radio-input:
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<input type="radio" name="bestellart" value="vor" id="vor" checked />
<label for="vor">CAN'T</label>
<input type="radio" name="bestellart" value="eil" id="eil" />
<label for="eil">TOUCH</label>
<input type="radio" name="bestellart" value="ewg" id="ewg" />
<label for="ewg">THIS!</label>
</fieldset>
I want to control the radio buttons when I click on them, but if I click on any other place inside the collapsible I want it to open (but not if I use the radio buttons). How do I have to handle this?
Is that what you want ?
JsFiddle
if ($(this).closest(".ui-collapsible").hasClass('ui-collapsible-collapsed')){
$(this).closest(".ui-collapsible").collapsible({collapsed: false});
}
else{
$(this).closest(".ui-collapsible").collapsible({collapsed: true});
}
Here is an update with comments : JsFiddle
Related
How to make one button default radio button when html code does not contain options directly, data coming directly from server.
In my project I have one radio button field "Applies To".
The radio button options are not mentioned in the code as you see, I should make one option select by default, if options are not directly mentioned in the code.
How can I make one button default in this case?
<div class="row row-margin">
<label style="margin-top: 34em;margin-left: -1em;">Applies To:</label>
<label class="input" *ngFor="let question of QuestionnaireAppliesTo">
<label class="radio">
<span class="tableCellDisplay customRadioInline">
<input type="radio" [(ngModel)]="questionnaire.EntityTypeUniqueID"
name="AppliesTo" class="radio-custom" [value]="question.UUID" id="type_{{question.UUID}}">
<label for="type_{{question.UUID}}" class="radio-custom-label">{{question.Name}}</label>
</span>
</label>
</label>
</div>
My typescript code:
getQuestionnaireCategories() {
this.lookupValues.then((response: any) => {
this.QuestionnaireAppliesTo = response.QUESTIONNAIRECATEGORIES;
});
};
Okay, so I got a custom radio button:
<label class="radiobtn" id="region">EUW
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
And I'd like to store the text next to it (EUW) into a localStorage item called "region", when the radio button is checked.
There are multiple radio buttons of this and i want to do it for all of them.
Each custom radio button has another value (EUW, EUNE, JP, KR, etc...)
Everything else is similar.
So I kinda tried to figure out how I could do that, but I couldn't came across a good solution.
Do you guys have some good solutions? :O
Thank you for any help, I appreciate it.
Cheers!
You create custom radio buttons all with same class radiobtn, then in JQuery on radiobtn class click event check if radio button is checked, get label text and store it in localStorage.
JSFiddle
https://jsfiddle.net/mLst49h8/
HTML
<label class="radiobtn" >EUW
<input type="radio" name="radio" >
<span class="checkmark"></span>
</label>
<label class="radiobtn" >EUNE
<input type="radio" name="radio" >
<span class="checkmark"></span>
</label>
JQuery
$( ".radiobtn" ).click(function() {
if($(this).children("input").is(":checked")) {
// alert( $(this).text());
var region = $(this).text();
localStorage.setItem("region", region);
region = localStorage.getItem("region");
alert(region);
}
});
I need a four radio button. First iteration generates 2 radio button & second iteration generates 2 radio button. If i select one of the Radio button in first section , then one of the radio button in second selection is also selected. I want two section containing 2 radio button each which dont reflect the changes on each other. Any help pls
<div ng-controller="MainCtrl" >
<div data-ng-repeat="choic in choice" >
<form >
<input ng-model="parent.mustShow" class="label_align" type="radio" name="customer" value="no" ><div class="mediumSubhead"> Information housed </div><br/>
<input ng-model="parent.mustShow" class="label_align" type="radio" name="customer" value="yes" >
<div class="mediumSubhead"> Information housed outside </div></form>
</div>
</div>
Controller.js
var app = angular.module('EquityCompensation', []);
app.controller('MainCtrl', function($scope) {
$scope.choice = [{id: 'choic1'},{id: 'choic2'}];
});
I'd suggest you to put the mustShow variable inside the choice array. So that would help you make the track of the each element. That will make your ng-model declaration to ng-model="choic.mustShow"
And to show the outer input element you could use filter over there that will check that any of the choice has mustShow option is ticked then you show the input element.
Markup
<div data-ng-repeat="choic in choice">
<form>
<input ng-model="choic.mustShow" class="label_align" type="radio" name="customer" value="no">
<div class="mediumSubhead"> Information housed </div>
<br/>
<input ng-model="choic.mustShow" class="label_align" type="radio" name="customer" value="yes">
<div class="mediumSubhead"> Information housed outside </div>
</form>
</div>
<div ng-show="(choice | filter: {mustShow: 'yes'}).length > 0">
<input name="first_name" class="text_box_space" type="text" value="" style="color: black;" size="25" width="200px">
</div>
Demo Plunkr
How can I use radio buttons to change the name of the text area tag below. Im trying to allow users to choose if they want to enter in an item_id or a upc, and based on this selection, the param for the text area should change.
What I have so far:
<label for="item_ids">Item Ids</label>
<input type="radio" name="=type_radio" id="item_ids" value="<%=params['item_ids']%>">
<label for="upcs">Upc Numbers </label>
<input type="radio" name="type_radio" id="upcs" value="<%=params['upcs']%>">
<textarea rows="3" type="text" name="<either item_ids OR upcs" class="text ui-widget-content ui-corner-all" placeholder="separated by space or comma"><%=params['item_ids_upcs']%></textarea>
Try this:
$(function() {
$('input[type="radio"]').click(function() {
$('textarea').attr('name', $(this).attr('id'));
});
});
How can I prevent a user from selecting multiple checkboxes in HTML?
you should change it to radio button instead of check box!
<input type="radio" name="group1" id="item1" value="Milk">
<label for="item1">Milk</label>
<br/>
<input type="radio" name="group1" id="item2" value="Butter" checked>
<label for="item2">Butter</label>
<br/>
<input type="radio" name="group1" id="item3" value="Cheese">
<label for="item13">Cheese</label>
I had a use case where I needed use checkboxes--which, unlike radio buttons, allows a user to UNcheck... Here's an example of something I pieced together from another stackoverflow user:
<head>
<meta charset=utf-8 />
<title>and-or checkboxes</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<label for="checkbox1"><input type="checkbox" id="checkbox1" name="checkbox1" value="and" </label><span id="span_and">checkbox1</span><br>
<label for="checkbox2"> <input type="checkbox" id="checkbox2" name="checkbox2" value="or" </label><span id="span_or">checkbox2</span>
<script>
$(document).ready(function(){
$('#checkbox1').click(function() {
var checkedBox = $(this).attr("checked");
if (checkedBox === true) {
$("#checkbox2").attr('checked', false);
} else {
$("#checkbox2").removeAttr('checked');
}
});
});
$(document).ready(function(){
$('#checkbox2').click(function() {
var checkedBox = $(this).attr("checked");
if (checkedBox === true) {
$("#checkbox1").attr('checked', false);
} else {
$("#checkbox1").removeAttr('checked');
}
});
});
</script>
</body>
With a little work, you can combine the either/or two scripts into a single script. You probably don't need this now but I wanted to post it because it was very useful to me.
If you want that only one checkbox get selected at a time then its better to use radiobutton instead.
If you mean that you don't want multiple checkboxes from a same "logical group" to be checked at one time, you should use radio buttons instead of checkboxes.
<form>
<input type="radio" name="aGroup" value="choice1" /> Choice #1<br />
<input type="radio" name="aGroup" value="choice2" /> Choice #2
</form>
By using this, only 1 option can be checked at one time
Use Radio, and they must have the same name="".