We Keep Coding

onclick function on radio cannot trigger second one at first click

I have two radio type inputs.
I want background change its color when radio switch to different input.
As the pic downbelow,
I met a problem that while click first one it can change color immediately,
but click second can not change at first click.
I need to click two times in second one to change its color.
<div class="o_field_radio o_vertical o_field_widget o_required_modifier in_out bg" name="in_out" style="width:70px;">
<div class="o_radio_item">
<input class="o_radio_input" type="radio" data-index="0" data-value="I" id="radio1032_I">
<label class="o_form_label" for="radio1032_I">進貨</label>
</div>
<div class="o_radio_item">
<input class="o_radio_input" type="radio" checked="true" data-index="1" data-value="O" id="radio1032_O">
<label class="o_form_label" for="radio1032_O">出貨</label>
</div>
</div>
var bg = $('.bg');
// check-box value decide background-color.
$(document).on('click', "div[name='in_out']", function(event){
var v = $("div[name='in_out'] div input:checked").attr('data-value');
if (v =='O') {
bg.css("background-color","#adff2f");
}
else if(v =='I') {
bg.css("background-color","#ffc0cb");
}
});
Do anyone knows how to solve this error?

First thing , you need to have same name for radio buttons. Secondly you may not need this line $(document).on('click', "div[name='in_out']", function(event){ since the elements are not dynamically loaded.So no need to delegate it from the document. Also var v = $("div[name='in_out'] div input:checked").attr('data-value'); line will be redundant. Besides you can have the color as the data-attribute of the radio button & use change instead of click. So on change get the data attribute and set it using .css
var bg = $('.bg');
// check-box value decide background-color.
$('.o_radio_input').on('change', function(event) {
bg.css("background-color", $(this).data('color'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="o_field_radio o_vertical o_field_widget o_required_modifier in_out bg" style="width:70px;">
<div class="o_radio_item">
<input name="in_out" class="o_radio_input" type="radio" data-index="0" data-value="I" id="radio1032_I" data-color='#adff2f'>
<label class="o_form_label" for="radio1032_I">進貨</label>
</div>
<div class="o_radio_item">
<input name="in_out" class="o_radio_input" type="radio" checked="true" data-index="1" data-value="O" id="radio1032_O" data-color="#ffc0cb">
<label class="o_form_label" for="radio1032_O">出貨</label>
</div>
</div>

You do not have any element with class bg in the markup. You also should group them by setting the name attribute.
The html document is generate by framework ODOO. So I can not change its name attribute
If you are not able to change the HTML manually then you can set the name attribute on document ready
You can try the following way:
// Set the name attribute on document ready
$('document').ready(function(){
$('.bg .o_radio_input').attr('name', 'myRadio');
});
var bg = $('.bg');
// check-box value decide background-color.
$(document).on('click', "div[name='in_out']", function(event){
var v = $("div[name='in_out'] div input:checked").attr('data-value');
if (v =='O') {
bg.css("background-color","#adff2f");
}
else if(v =='I') {
bg.css("background-color","#ffc0cb");
}
});
$('div[name=in_out]').trigger('click');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="o_field_radio o_vertical o_field_widget o_required_modifier in_out bg" name="in_out" style="width:70px;">
<div class="o_radio_item">
<input class="o_radio_input" type="radio" data-index="0" data-value="I" id="radio1032_I">
<label class="o_form_label" for="radio1032_I">進貨</label>
</div>
<div class="o_radio_item">
<input class="o_radio_input" type="radio" checked="true" data-index="1" data-value="O" id="radio1032_O">
<label class="o_form_label" for="radio1032_O">出貨</label>
</div>
</div>

I miss some info:
1.The html document is generate by framework ODOO. So I can not change its name atrribute.
the view template is deploy by xml document.
the origin code is looks like this:
<field class="in_out" name="in_out" widget="radio"/>
the div is wrap by a div class='bg', I just miss it.
In order to show more clearly, I add alert function.
It will show you message while you click.
var bg = $('.bg')
// check-box value decide background-color.
$(document).on('click', "div[name='in_out']", function(event){
alert('clicked');
let v = $("div[name='in_out'] div input:checked").attr('data-value');
if (v =='O') {
bg.css("background-color","#adff2f");
}
else if(v =='I') {
bg.css("background-color","#ffc0cb");
}
});
$('div[name=in_out]').trigger('click');
and the result looks like this:
Mamun's script is working well here.
But when it runs on ODOO, it will work as the pic.

Javascript event to change its child to checked

I want an event in which when i click the list tag so the radio button gets checked.
<li class="morning-time">
<div class="morning-icon"></div>
<div class="timeTxt">Morning <span>7am - 12am</span></div>
<div class="checkBox">
<label>
<input type="radio" class="option-input checkbox" id="rbt_Time1" name="rbt_Time" value="1" data-text="Morning 7am - 12am">
<span></span>
</label>
</div>
<div class="clear"></div>
</li>

You will have to include jquery for using the following code:
$(function() {
$('.morning-time').on('click', function(){
$('.option-input', $(this)).prop("checked", true);
});
});
Here, on li(class='morning-time'), the radio(class='option-input') is searched inside(the li tag) and set checked.

You need setAttribute to do so AND to explain the code, radio styled input have a checked attribute. Just set it to true and the input get check.
Here the code :
function CheckMe()
{
var radioInput = document.getElementById("rbt_Time1");
radioInput.setAttribute("checked", "true");
}

How to remove a div containing a checkbox with a specific id?

I have different checkboxes generated dynamically.
Each checkboxes are contained within a div.
I would like to do the following action with jquery:
If a checkbox has an id="aucune", then remove its container (the div containing the checkbox with the id="aucune") from the html page.
I tried the following code:
// wait for DOM to be ready
$(document).ready(function() {
var empty = $("input:checkbox[id=aucune]");
if (empty == true) {
$(this).parent().remove();
}
});
Here is a the very simplified html:
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="xxx" name="xxx" date-name="xxx">
<label for="xxx">xxx</label>
</div>
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="aucune" name="aucune" date-name="aucune">
<label for="aucune">aucune</label>
</div>
Here is my codepen:
I am quite new to code, I apologize for my silly simple question.

You can directly select the id with jQuery and remove the parent.
$('#acune').parent().remove();
Or if you know the class of the parent element
$('#acune').parent('.wrapper-checkbox').remove();

You are wrongly referencing this. It should be this way:
Replace this with empty.
Replace the boolean check with count.
Note: You can also use $("#aucune") instead of the selector $("input:checkbox[id=aucune]").
// wait for DOM to be ready
$(document).ready(function() {
// Or here you can also use $("#aucune").
var empty = $("input:checkbox[id=aucune]");
// Check if it is found.
if (empty.length > 0) {
// Remove the parent.
empty.parent().remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="xxx" name="xxx" date-name="xxx">
<label for="xxx">xxx</label>
</div>
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="aucune" name="aucune" date-name="aucune">
<label for="aucune">aucune</label>
</div>
Boom! And the checkbox is gone! :)

You can directly use the aucune id selector in your JQuery and then get the closest div with class wrapper-checkbox to remove it:
$(document).ready(function() {
var empty = $("#aucune");
if (empty.length !== 0){
$(empty).closest('.wrapper-checkbox').remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="xxx" name="xxx" date-name="xxx">
<label for="xxx">xxx</label>
</div>
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="aucune" name="aucune" date-name="aucune">
<label for="aucune">aucune</label>
</div>

Try to do this..
$(document).ready(function() {
var checkbox = $("input:checkbox[id=aucune]");
if (checkbox.length > 0) {
checkbox.parent().remove();
}
});

Get Checkbox to toggle div based on only the string inside a checkbox's label - jQuery

I'm trying to create a script to hide divs based on just the label of a "checked" checkbox. And do it without having to use a specific value, id or attribute. I was previously shown how to do it using spans/divs, but checkboxes have got me stumped.
My example in jsfiddle:
http://jsfiddle.net/6qLX7/2/
HTML:
<fieldset class="filter-row">
<div class="row-section">
<div class="row-heading">art</div>
<ul>
<li>
<div class="checkbox">
<input type="checkbox" name="studio art" value=".studio_art" id="studio_art" />
<label for="studio_art">studio art</label>
</div>
</li>
<li>
<div class="checkbox">
<input type="checkbox" name="ceramics" value=".ceramics" id="ceramics" />
<label for="ceramics">ceramics</label>
</div>
</li>
</ul>
</div>
</fieldset>
<fieldset class="filter-row">
<div class="row-section">
<div class="row-heading">studio art</div>
<ul>
<li>
<div class="checkbox">
<input type="button" value=".option1" name="option1" id="option1" />
</div>
</li>
<li>
<div class="checkbox">
<input type="button" value=".option2" name="option2" id="option2" />
</div>
</li>
</ul>
</div>
<div class="row-section ">
<div class="row-heading">ceramics</div>
<ul>
<li>
<div class="checkbox">
<input type="button" value=".option1" name="option1" id="option1" />
</div>
</li>
<li>
<div class="checkbox">
<input type="button" value=".option2" name="option2" id="option2" />
</div>
</li>
</ul>
</div>
</fieldset>
JS:
$(document).ready(function () {
$("input:checked").click(function () {
var clickedText = $(this).text();
$(".row-section").filter(function () {
return $(this).find("div").text() === clickedText;
}).toggle();
});
});

Forked fiddle: http://jsfiddle.net/ru8YL/1/
I've created a new selector to get the label text that accords with the checkbox: $(this).siblings('label').text().
Select all checkboxes instead of the buttons you previously used: $("input:checkbox").
Use the change event rather than click.
Use .is(':checked') to see if the checkbox is checked or not.
Send toggle a parameter to tell it to hide or show. This second parameter is specified in the documentation: http://api.jquery.com/toggle/
$("input:checkbox").change(function () {
var clickedText = $(this).siblings('label').text();
console.log(clickedText);
$(".row-section").filter(function () {
return $(this).find("div.row-heading").text() === clickedText;
}).toggle(this.checked);
});

$(document).ready(function () {
$("input").change(function () {
var isChecked = $(this).is(":checked");
});
});
use change event instead of click event

Here's my contribution. It just shows there's a large number of ways you can express the same thing using jQuery.
$(document).ready(function () {
$("input:checkbox").click(function () {
var clickedText = $(this).next('label').text();
$("fieldset:nth-child(2) .row-section").filter(function () {
return $('.row-heading', this).text() === clickedText;
}).toggle($(this).is(':checked'));
});
});
http://jsfiddle.net/LhuT9/1/
Compared this with Joe Frambach's answer, it differs by:
This example uses next instead of siblings
The filter function extracts the text using $('.row-heading', this).text() instead of $(this).find("div.row-heading").text()

Yet another alternative, though it's much the same with only minor differences:
// selects all input elements whose type is 'checkbox':
$('input[type="checkbox"]')
// binds an anonymous function to the 'change' event:
.on('change', function(){
// caching the this variable for later use:
var input = this,
// finding whether node.textContent or node.innerText is supported in the browser:
textProp = 'textContent' in document.body ? 'textContent' : 'innerText';
// selecting the '.row-section' elements,
$('.row-section')
// filtering that collection:
.filter(function(){
// using '$.trim()' to remove leading/trailing white-space
return $.trim($(this)
// finding the 'div.row-heading' elements within the current '.row-section':
.find('div.row-heading')
// retrieving its text:
.text())
// comparing for strict equality:
===
// finding the text of the label attached to the element
// the benefit of this approach is that it's independent
// of the DOM structure:
$.trim(input.labels[0][textProp]);
// showing if the input is checked, hiding if not:
}).toggle(input.checked);
// triggering the change event, so the anonymous function is called on page-load:
}).change();
JS Fiddle demo.
References:
JavaScript:
HTMLInputElement, to see a brief introduction to the labels property
jQuery:
$.trim().
change().
find().
filter().
on().
text().
toggle().

foreach radio button show more info

I am trying to make for each radio button, when it is clicked on to show the div with more infos about that clicked title, when another radio button is clicked then the to show info about that radio button and hide the other one that was clicked on:
HTML:
<input type="radio" id="1" />
<div class="event1">
content..
</div>
<input type="radio" id="2" />
<div class="event2">
content..
</div>
<input type="radio" id="3" />
<div class="event3">
content..
</div>
jQuery:
var i = 1;
while(i < 10) {
$('.event' + i).hide();
$("#" + i).click(function() {
$('.event' + i).show();
});
i++;
}

HTML
<input type="radio" name="radio" id="1" />
<div class="event">
content.. 1
</div>
<input type="radio" name="radio" id="2" />
<div class="event">
content.. 2
</div>
<input type="radio" name="radio" id="3" />
<div class="event">
content.. 3
</div>
JS
$('input[name=radio]').click(function() {
$('.event').hide();
$(this).next('.event').show();
});
CSS
.event {
display: none;
}
Fiddle
http://jsfiddle.net/UKn6D/

You can try changing your loop with "each"
$(function(){
$("input[type='radio']").each(function(){
$(this).change(function(){
if ($(this).is(':checked'))
$(this).next().show();
else
$(this).next().hide();
});
});
});
It would be preferrable if you assign a class to radio elements to focus specifically on them. Something like "radioElements" should be enough. Or you can also use id with a starter: "radio_1","radio_2" and then use the input[id^='radio_'].
In all the case you can use "each" function.
More deeply, if you want that all other radio "info" cut off change it to:
$(function(){
$("input[type='radio']").each(function(){
$(this).change(function(){
if ($(this).is(':checked')) {
$("input[type='radio']").next().hide();
$(this).next().show();
}
});
});
});

$('input[type="radio"]').on('change', function() {
var id = $(this).attr('id'); //Get the ID from the selected radio button
$('div:visible').hide(); //Hide visible Divs
$('div.event' + id).show(); //Show matched Div
});
You'll want to give the divs an additional class name and update the jQuery code here. You'll also want to make sure to assign a name attribute to the input elements so that they are all part of the same group -- assuming they are.

instead of having a while look like that why not simply have
<div id="input-container">
<input class="clickable" />
<div class="content"></div>
</div>
This will then work with multiple and the jQuery can just be like this
$('#input-container input.clickable').click(function() {
$(this).parent().find('div.content').hide();
$(this).next('div.content').show();
});
I haven't actually tested the above but I believe it should work for you & the reason to have the container ID is just to speed your jQuery up as it is faster to attach via #elementID first