Develop Reference

Assign different actions for two radio buttons in html

I am a newbie in html and js. I have been trying to check possible discussions about my problem, but couldn't find anything similar.
Here is my problem: I need to have two radio buttons and I would like to show different buttons for each radio button selection that could take the page further actions (i.e. if radio button A selected, show exit button, if radio button B selected show next button. In this direction, I started to create something, but I stuck at the point of creating conditional actions.
In my php file I have the following codes:
<div>
<label><input type="radio" id="noc" name="c" value="f_c" onchange="disp_button(this.checked);"> no action</label><br>
<label><input type="radio" id="co" name="c" value="t_c" onchange="disp_button(this.checked);"> take action</label><br>
</div>
<div class="header_format"><p id="hidden_field" style="display:none;" <input onclick="do_this();" type="button" class="btn btn-primary" value="Continue" />Next</button></div></p>
<div class="header_format"><p id="hidden" style="display:none;" <input onclick="do_that();" type="button" class="btn btn-primary" value="Exit" />Exit</button></div></p>
in addition to the js file, which contains the functions for php file. I defined specific function for my radio button actions like that below in my js file:
function disp_button(checked){
var button1 = document.getElementById("noc");
var button2 = document.getElementById("co");
if (button1.checked){
show_exit_button("noc radio button selected");
}else if (button2.checked) {
show_next_button("co radio button selected");
}
}
So, I would appreciate any help to put those things together. Thanks for your time.

Bootstrap button plugin conflicting with Vue checkbox click event

When I add bootstrap.min.js to my Vue application my checkboxes #click event is not being initiated. More specifically when using bootstrap's button-group with data-toggle="buttons" If I remove bootstrap.min.js then the checkbox click event works as normal. What is causing this?
Link to Codepen
https://codepen.io/ben_jammin/pen/gNPVvw?editors=1000
<div class="btn-group btn-group-toggle shadow mb-3" data-toggle="buttons" role="group" aria-label="String Operations">
<label class="btn btn-primary">
<input #click="reverseString" type="radio" name="options" checked> Reverse
</label>
<label class="btn btn-primary">
<input type="radio" name="options"> Palindrone
</label>
<label class="btn btn-primary">
<input type="radio" name="options"> Uppercase
</label>
<label class="btn btn-primary">
<input type="radio" name="options"> Reset
</label>
</div>
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js
Bootstrap Button plugin
https://getbootstrap.com/docs/4.3/components/buttons/#button-plugin

Vue and Jquery are not meant to be together and it'll conflict at some point.
As it says on the Bootstrap website:
Many of our components require the use of JavaScript to function.
Specifically, they require jQuery, Popper.js, and our own JavaScript
plugins.
I would recommend you to use bootstrap-vue or if you want to try another framework, Element or Vuetify:
https://bootstrap-vue.js.org/docs/components/button-group
https://element.eleme.io/#/en-US/component/installation
https://vuetifyjs.com/en/components/button-groups
If you REALLY NEED IT, you can use a wrapper component but it's better to avoid it.
Here are a few more details about how to deal with it: https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

programmatically setting Bootstrap radio button text

I am trying to set up a set of radio buttons using Bootstrap in javascript
The code I am trying is:
var viewedFilterButtons = $("<div>").addClass("btn-group").attr("data-toggle", "buttons");
viewedFilterButtons.append($("<label>").addClass("btn").addClass("btn-primary").append($("<input>").attr("id", "viewed-important").attr("type","radio").attr("name","viewed-filter").attr("value","important").attr("autocomplete","off").append($("<label for=\"viewed-important\">").text("Important"))));
viewedFilterButtons.append($("<label>").addClass("btn").addClass("btn-primary").append($("<input>").attr("id", "viewed").attr("type","radio").attr("name","viewed-filter").attr("value","viewed").attr("autocomplete","off").text("Reviewed")));
(note that I'm trying 2 different things to get the text into the button -- in the first input I'm embedding a label and in the second I'm just trying to set the text of the input. Neither is working right now.)
This generates the following HTML:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input id="viewed-important" name="viewed-filter" value="important" autocomplete="off" type="radio">
<label for="viewed-important">Important</label>
</input>
</label>
<label class="btn btn-primary">
<input id="viewed" name="viewed-filter" value="viewed" autocomplete="off" type="radio">Reviewed
</label>
</div>
Note that the input doesn't seem to be closed in the second case. I'm getting this HTML from the Web Console Inspector in Firefox.
What I'm getting is a set of tiny radio buttons with no text. The toggle behavior works fine.
What am I missing here? When I manually generate a set of labels for radio buttons like this directly in the HTML it works fine.
<label class="btn btn-primary">
<input id="viewed" name="viewed-filter" value="viewed" autocomplete="off" type="radio">Reviewed</input>
</label>

This is because you append the <label> inside the <input/>.
You're trying to do this :
<input> <label>Important</label> </input>
However, <input/> is a self-closing tag, not a container like a <div>.
You should design your structure like this :
<label> <input/> Important </label>

input elements cannot have children w3 specification. Put the label after it.
var viewedFilterButtons = $("#mainDiv").addClass("btn-group").attr("data-toggle", "buttons");
var inputElem = $("<input>").attr("id", "viewed-important").attr("type","radio").attr("name","viewed-filter").attr("value","important").attr("autocomplete","off");
viewedFilterButtons.append(inputElem)
.append($("<label for=\"viewed-important\">").addClass("btn").addClass("btn-primary").text("Important"));
<link href="https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
<div id="mainDiv"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How does the toggle button work with checkboxes?

I'm referring to the Toggle buttons with checkboxes which I don't understand. There we have the example (I have added some ids):
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input id="c1" type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input id="c2" type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input id="c3" type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
I can click on the third button or use $('#c3').closest('.btn').button('toggle') to set the third button as pressed. That is visually okay. However, the checkbox input does not get the checked attribute, and that is what I'm missing. Why doesn't this happen automatically? Am I required to do this manually?
Update and solution:
As Marcos Pérez Gude revealed: The inspector of Firefox (or Elements in Chrome) doesn't show changes regarding the checked state of a checkbox. There you can modify or see other things but currently (Firefox 40) the checked state cannot be trusted. That was my fault.

Setting a radio button to checked in jquery not showing it as checked in view

On document ready I'm setting a radio button to checked, I want the user to see the button as highlighted/discolored. But nothing is showing in the view.
Here is my html. Nothing shows it as being checked in the view or HTML. It's the same color as all the other radio buttons.
<div class="btn-group" data-toggle="buttons" id="SpaceType">
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="0" autocomplete="off"> House
</label>
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="1" autocomplete="off"> Apartment
</label>
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="2" autocomplete="off"> Studio
</label>
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="3" autocomplete="off"> Other
</label>
</div>
Here is my jquery.
if ($("#YogaSpaceType").val() != "") {
var t = $("#YogaSpaceType").val();
var element = '#SpaceType.' + t;
//$(element).prop('checked', true);
$('input:radio[id=SpaceType][id=0]').prop('checked', true);
}
I tried both lines including the one that is commented out.
If I add 'checked' to the element like below the HTML shows it as checked but I see nothing in the view as checked, it still looks unchecked.
<input type="radio" name="typeoptions" id="0" autocomplete="off" checked> House

It looks like you want to change this a bit to be more like http://www.mkyong.com/jquery/how-to-select-a-radio-button-with-jquery/. The problem here is you are trying to use the input keyword in jquery, but your html is button groups.
From that page, the HTML is:
<input type="radio" name="sex" value="Male">Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown">Unknown</input>
and then the JS is $('input:radio[name=sex]')[2].checked = true;
If it's necessary to leave them as button groups, you'll need to change your JS line to be more like $("#0").prop('checked', true). You could also chain the div ids together like this: $("#SpaceType #0").prop('checked', true);

It was a little confusing, but the class attribute 'active' needs to be added to the label. Not the checked attribute. This is a little confusing but understood now.

$('input[type="radio"][id="0"]').prop('checked', true)
Multiple value check for id, will end up in 0 elements.