Currently, the below HTML code only switches when you click the input (ie. the center switch).
I need the switch to happen when you click the labels (ie. Yes or No).
How to make that happen?
<div>
<span class="frm_off_label frm_switch_opt">No</span>
<label class="frm_switch">
<input type="checkbox" name="2002" id="field_2002" value="Yes" checked="checked"
data-off="No" data-sectionid="2002" data-frmval="Yes" placeholder="Yes">
<span class="frm_slider"></span>
</label>
<span class="frm_on_label frm_switch_opt">Yes</span>
</div>
What are the ways to make the click of Yes or No, do the same thing as clicking the input?
You can achieve this by setting the checked status of input -
HTML
<div>
<span class="frm_off_label frm_switch_opt">No</span>
<label class="frm_switch">
<input type="checkbox" name="2002" id="field_2002" value="Yes" checked="checked"
data-off="No" data-sectionid="2002" data-frmval="Yes" placeholder="Yes">
<span class="frm_slider"></span>
</label>
<span class="frm_on_label frm_switch_opt">Yes</span>
</div>
JS (with jquery)
$('.frm_off_label').on('click', function(){
$(this).next('label').find("input")[0].checked = false;
});
$('.frm_on_label').on('click', function(){
$(this).prev('label').find("input")[0].checked = true;
});
CSS (optioanl)
.frm_switch_opt{
cursor:pointer;
}
You can see it in action on jsfiddle
https://jsfiddle.net/guruling/tegmps9b/27/
You can use label combine with for="element_id" like for="field_2002" attribute to achieve it.
The for attribute specifies which form element a label is bound to.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label for="field_2002" class="frm_off_label frm_switch_opt">No</label>
<input type="checkbox" name="2002" id="field_2002" value="Yes" checked="checked"
data-off="No" data-sectionid="2002" data-frmval="Yes" placeholder="Yes">
<label for="field_2002" class="frm_on_label frm_switch_opt">Yes</label>
</div>
I have multiple radio buttons, each one inside a <span> with margin, so they seem like a button with a radio element inside. how can I check the radio button when I click anywhere inside the <span> parent element of the radio button
UX oriented
<span class="radio-box" id="white-box">
<input type="radio" id="white" name="colour"> White
</span>
<span class="radio-box" id="red-box">
<input type="radio" id="red" name="colour"> Red
</span>
<span class="radio-box" id="blue-box">
<input type="radio" id="blue" name="colour"> Blue
</span>
sorry, very noob at Javascript
thanks :)
This is exactly what label elements are for. Use those, rather than span elements:
<label class="radio-box" id="white-box">
<input type="radio" id="white" name="colour"> White
</label>
<label class="radio-box" id="red-box">
<input type="radio" id="red" name="colour"> Red
</label>
<label class="radio-box" id="blue-box">
<input type="radio" id="blue" name="colour"> Blue
</label>
When the label wraps the input like that, it's associated with that input. (If you couldn't use wrapping, you could use the for attribute to tell the label what the id of its associated input is.)
You could make it work with spans. Targeting just those spans:
$("span > input[type=radio][name=colour]").parent().on("click", function() {
$(this).find("input[type=radio][name=colour]").prop("checked", true);
});
or targeting any input[type=radio] inside a span.radio-box:
$("span.radio-box > input[type=radio]").parent().on("click", function() {
$(this).find("input[type=radio]").prop("checked", true);
});
But again, this is exactly what label is for, so best to use that.
If you want to do this without the <label> tag and without jquery and just vanilla JavaScript then here's a solution.
var radioBoxes = document.querySelectorAll("span.radio-box");
radioBoxes.forEach(function (box) {
var radioButton = box.querySelector("input[type='radio']");
box.addEventListener("click", function () {
radioButton.click();
});
});
I'm making a quiz app.To show the progress of the quiz there is question pallette of small boxes which turn yellow when users click on any of the the radio button to show that the user has attempted the question.Along with this there is a button to move to the previous question.To show the users initial answer I have used ng-checked directive with some logic in the controller.Everything is working fine but after attempting a question when I move to the next question and click on the same option as the previous question then the question pallette box does not turn yellow.But when I click on the other option it works fine.
.html
<div class="questionsBox" >
<div class="questions">{{liveCtrl.questions[liveCtrl.activeQuestion].question}}</div>
<ul class="answerList">
<li>
<label>
<input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===1" ng-click="liveCtrl.answers(liveCtrl.activeQuestion,1)" name="answerGroup" value="0" > {{liveCtrl.questions[liveCtrl.activeQuestion].optionA}}</label>
</li>
<li>
<label>
<input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===2" ng-click="liveCtrl.answers(liveCtrl.activeQuestion,2)" name="answerGroup" value="1" > {{liveCtrl.questions[liveCtrl.activeQuestion].optionB}}</label>
</li>
<li>
<label>
<input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===3" ng-click="liveCtrl.answers(liveCtrl.activeQuestion,3)" name="answerGroup" value="2" > {{liveCtrl.questions[liveCtrl.activeQuestion].optionC}}</label>
</li>
<li>
<label>
<input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===4" ng-click="liveCtrl.answers(liveCtrl.activeQuestion,4)" name="answerGroup" value="3" > {{liveCtrl.questions[liveCtrl.activeQuestion].optionD}}</label>
</li>
</ul>
<div class="questionsRow">
<button ng-disabled="liveCtrl.questions.length==liveCtrl.activeQuestion+1" class="subques btn btn-lg btn-secondary" ng-click="liveCtrl.nextQuestion()">Save & Next</button>
<button ng-click="liveCtrl.prevQuestion()" ng-disabled="liveCtrl.activeQuestion == 0" class="subques btn btn-lg btn-secondary" >Previous</button>
</div>
</div>
//Question Pallete
<div class="question-pallete">
<div id="{{$index}}" ng-repeat="question in liveCtrl.questions" class="square">
<a ng-click="liveCtrl.gotoQues($index)">
{{$index + 1}}
</a>
</div>
//jquery to give color to the boxes
<script type="text/javascript">
$(document).on('click',"input[name='answerGroup']",function(){
var qid=$(this).data('id');
console.log(qid);
$('#'+qid).addClass('box-color');
});
</script>
Controller functions
this.nextQuestion=()=>{
live.activeQuestion++;
//console.log(live.activeQuestion);
};
this.prevQuestion=()=>{
live.activeQuestion--;
//console.log(live.activeQuestion);
};
this.gotoQues=(qno)=>{
live.activeQuestion=qno;
}
this.answers=(qid,option)=>{
//console.log(qid);
live.useranswers[qid]={
q:option
};
When I'm tried to console qid in jquery part it outputs the same qid for the same option in the next question but it is not the case for other options.I think "data-id" in html is not updating for that case.Sorry If I was not able to explain it properly.
I find 2 issues with your implementation.
I don't see ng-model in any of your input field.
Why don't you use ng-class instead of using jquery to get the id and add class?
<label ng-class="val==0 ? 'highlight':''">
<input type="Radio" ng-model="val" ng-value="0">Option A</label>
Here is the jsfiddle link
My problem is that I have 2 blocks in modal and when I click on .emailInbound checkbox it toggle .in-serv-container open, but when I click on .accordion-heading to open comment part it makes .in-serv-container collapse.
What can be a reason?
HTML:
<label class="checkbox">
<input class="emailInbound" type="checkbox" onclick="toggleInServ(this)">Использовать Email для регистрации обращений
</label>
<div id='in-serv-container'>
<div><strong>Настройка входящей почты</strong></div>
<div>
<input class="emailOutserver" type="text" placeholder="Сервер входящей почты">
<input class="emailOutserverPort" type="text" placeholder="Порт">
</div>
<div>
<select class="emailOutProtocol half" style="width: 49%!important;">
<option value='usual'>Обычный</option>
<option value='ssl'>SSL</option>
</select>
<input class="emailInFolder half" type="text" placeholder="Папка входящей почты">
</div>
<div class="modal-body-container">
<input type="text" placeholder="Опции">
</div>
<button class="btn btn-link">Проверить подключение</button>
<hr>
</div>
<div class="accordion" id="comment-wrapper">
<div class="accordion-heading" data-toggle='collapse' data-target='#emailComment' onclick='toggleChevron(this)'>
<strong>Комментарий</strong> <i class='icon-chevron-right'></i>
</div>
<div id="emailComment" class="collapse" data-parent="#comment-wrapper">
<textarea class="emailComment"></textarea>
</div>
</div>
JS:
function toggleInServ(box){
var checked = $(box).prop('checked');
if(checked){
$('#in-serv-container').css('height', '170px');
}else{
$('#in-serv-container').css('height', '0px');
}
}
function toggleChevron(o){
var icon = $(o).children('[class*=icon]');
if(icon.hasClass('icon-chevron-right')){
icon.removeClass('icon-chevron-right');
icon.addClass('icon-chevron-down');
}else{
icon.removeClass('icon-chevron-down');
icon.addClass('icon-chevron-right');
}
}
If I'm in the right track at this, you want each dropdown to stay on opened if the checkbox is ticked? What ever is the case here, please provide us with your CSS-styling as well. Would be best if you'd give us JSFiddle of your case.
Changing just the
height
attribute of your CSS seems like a bad idea. Instead of that, you could try using
display: block;
and
display: none;
So it would really be a hidden field before it gets selected. Not the answer to the question itself, but just something to note.
It was because of 'bubbling'. I added e.stopPropoganation() and it help.
How can I achieve this dynamically using JavaScript?
onselect radio button 1: Shows div 1,2,5, hides (if not already hidden) divs 3,4,6,7
onselect radio button 2: Shows div 3,4,6,7, hides (if not already hidden) divs 1,2,5
<input type="radio" id="button-1" name="button" />Button 1
<input type="radio" id="button-2" name="button" />Button 2
<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
<div id="div-4"></div>
<div id="div-5"></div>
<div id="div-6"></div>
<div id="div-7"></div>
edit I formulated my question poorly, will formulate it better when at home after work..
To make it easier on yourself, add a class to the two groups of radio buttons, something like divGroup1, divGroup2
<div class="divGroup1" id="div-1"></div>
<div class="divGroup1" id="div-2"></div>
<div class="divGroup2" id="div-3"></div>
<div class="divGroup2" id="div-4"></div>
<div class="divGroup1" id="div-5"></div>
<div class="divGroup2" id="div-6"></div>
<div class="divGroup2" id="div-7"></div>
then in jQuery, do something like this:
$("#button-1").click(function()
{
$(".divGroup1").show();
$(".divGroup2").hide();
});
$("#button-2").click(function()
{
$(".divGroup2").show();
$(".divGroup1").hide();
});
the solution is in jQuery
<input type="radio" id="button-1" name="button" />Button 1
<input type="radio" id="button-2" name="button" />Button 2
<div class="c1" id="div-1"></div>
<div class="c2" id="div-2"></div>
<div class="c1" id="div-3"></div>
<div class="c2" id="div-4"></div>
<div class="c1" id="div-5"></div>
<div class="c2" id="div-6"></div>
<div class="c2" id="div-7"></div>
$('#button-1').click(function(){
$('.c1').show();
$('.c2').hide();
})
$('#button-2').click(function(){
$('.c2').show();
$('.c1').hide();
})
Try to use the following parts from jquery
$('#button-1').click(function(){.... your code here .... });
$('#button-2').click(function(){.... your code here .... });
and
$('#div-1').show();
and
$('#div-2').hide();
and when you put it all together it will all work.
JQuery - click methods. Hide the relevant divs in the function, which will hide them whatever their state.
Try this:
$('#button-1').select(function() {
$('#div-1, #div-2, #div-5').show();
$('#div-3, #div-4, #div-6, #div-7').hide();
});
$('#button-2').select(function() {
$('#div-1, #div-2, #div-5').hide();
$('#div-3, #div-4, #div-6, #div-7').show();
});
JSFiddle seems to be slow but I think this should work:
http://jsfiddle.net/nfypC/4/
$('#div-1').hide();
$('#div-2').hide();
$('#div-3').hide();
$('#div-4').hide();
$('#div-5').hide();
$('#div-6').hide();
$('#div-7').hide();
$("#button-1").click(function () {
$('#div-1').show();
$('#div-2').show();
$('#div-5').show();
$('#div-3').hide();
$('#div-4').hide();
$('#div-6').hide();
$('#div-7').hide();
});
$("#button-2").click(function () {
$('#div-1').hide();
$('#div-2').hide();
$('#div-5').hide();
$('#div-3').show();
$('#div-4').show();
$('#div-6').show();
$('#div-7').show();
});
This is relatively basic to do. As others are suggesting, i would suggest using a third party javascript library like jQuery or PrototypeJs.
If you choose jQuery, the following pages should help you out: http://api.jquery.com/show/, http://api.jquery.com/hide/ and http://docs.jquery.com/Main_Page
If you choose PrototypeJS: http://www.prototypejs.org/api/element/show, http://www.prototypejs.org/api/element/hide and http://www.prototypejs.org/learn.
In future, I would recommend you visit these resources first as most of the answers here are making use of libraries like this.
Also, these libraries do ALOT. Really worth getting to know them!
First, what do you mean by dynamically? You'll have to code the relationship somewhere.
What you add a custom attribute to your divs like:
<input type="radio" id="button-1" name="button" />Button 1
<input type="radio" id="button-2" name="button" />Button 2
<div id="div-1" linktoButton="button-1"></div>
<div id="div-2" linktoButton="button-1"></div>
<div id="div-3" linktoButton="button-2"></div>
<div id="div-4" linktoButton="button-2"></div>
<div id="div-5" linktoButton="button-1"></div>
<div id="div-6" linktoButton="button-2"></div>
<div id="div-7" linktoButton="button-2"></div>
Then you could have a single onclick event that would take the id of the button you click, show all divs where linktoButton="button-1' and hide the rest.
You can use the "Has Attribute" selector in jQuery
http://api.jquery.com/has-attribute-selector/
Just remember that this way will have to walk through every element in the dom and may be slow. You may want to have a container div that you can get by ID and just use the attribute selector within the children.
Hope this points you in the right direction, and remember, there's 100 ways to skin this cat.
<input type="radio" onclick="hideDivOneTwoAndFiveAndShowThreeFourSixAndSeven()" id="button-1" name="button" />Button 1
<input type="radio" onclick="showDivOneTwoAndFiveAndHideThreeFourSixAndSeven()" id="button-2" name="button" />Button 2
function hideDivOneTwoAndFiveAndShowThreeFourSixAndSeven(){
$("#div-1,#div-2,#div-5").hide();
$("#div-3,#div-4,#div-5,#div-7").show();
}
function showDivOneTwoAndFiveAndHideThreeFourSixAndSeven(){
$("#div-1,#div-2,#div-5").show();
$("#div-3,#div-4,#div-5,#div-7").hide();
}