Javascript event to change its child to checked - javascript

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");
}

Related

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.

Add required to input of hidden div when radio is checked

What I'm trying to do is to set hidden div with inputs depended on checked radio input.
This is the logic:
If the first radio is checked the first div is shown, there I want to add hidden inputs with some values...
If the second radio is checked I want the input to be added with required..
And, it shouldn't be required if the 2nd radio isn't checked...
I've tried a few things over some time and got some effects but can't get it work as I want, Here is the code that i'm currently trying to work with, sorry but it's messed up and fails...
So Any help will be much appreciated...
/*
// this code is working but I messed the HTML while trying to get it work with the other code below...
$(document).ready(function() {
$("div.hiddendiv").hide();
check();
$("input[name$='name02']").change(check);
function check() {
var test = $("input[name$='name02']:checked").val();
$("div.hiddendiv").hide();
$("#" + test).show();
}
}
*/
// The code i'm trying to work with...
$(function() {
var radio = $("#closed");
var hidden = $("#hide");
hidden.hide();
checkbox.change(function() {
if (checkbox.is(':checked')) {
hidden.show();
//add required
$('#name02').prop('required', true);
} else {
hidden.hide();
//clear when hidden checked
$("#name02").val("");
//remove required
$('#name02').prop('required', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="closed" value="01"> Closed
<input type="radio" id="open" value="02"> Open
<div name="01" class="hiddendiv">
<input name="name01" type="hidden" value="code">
</div>
<div name="02" id="hide" class="hiddendiv">
<input name="name02" type="text" value="">
</div>
Here is the JSFiddle,
try this code
give same name of radio button so it will work as a group and
also set id of input tag as name02 so its use as a #name02 in jquery
so it will work
$(function() {
var radio = $("#closed");
var hidden = $("#hide");
hidden.hide();
$(this).click(function() {
if ($('#closed').is(':checked')) {
hidden.show();
$('#name02').prop('required', true);
} else {
hidden.hide();
//clear when hidden checked
$("#name02").val("");
//remove required
$('#name02').prop('required', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name='btn' id="closed" value="01"> Closed
<input type="radio" name='btn' id="open" value="02"> Open
<div name="01" class="hiddendiv">
<input name="name01" type="hidden" value="code">
</div>
<div name="02" id="hide" class="hiddendiv">
<input name="name02" id="name02" type="text" value="">
</div>
Part of your problem is that you need to set the name attribute of your radio buttons to be the same value, otherwise the HTML won't know that they belong to the same group.
I've updated the JSfiddle here
https://jsfiddle.net/hba4d83k/2/
What i have done is add a change event handler to your the radio group and then did some conditional logic to show/hide the relevant inputs.

jquery syntax for .on("change","input[name^=

Project Focus
Toggle Checkbox(es)
Special Requirement
Need to bind the new(dynamically) added div.id container that holds these checkboxes. Note: this div.id has been dynamically generated (client-side).
Status
My Working Fiddle successfully toggles between 1(one) or 0(none) checkboxes.
The HTML
<div id="bind_id">
<input type="checkbox" name="iso_01[]" class="setTitlePre1" value="L/R" />
<label for name "iso_01" class="isoVar1">No.1</label>
<input type="checkbox" name="iso_01[]" class="setTitlePre2" value="Alt" />
<label for name "iso_01" class="isoVar2">No.2</label>
</div>
Working Script
var checkboxes;
checkboxes = $("input[name^=iso_01]").change(function (e) {
checkboxes.not(this).prop("checked", false);
}
});
Desired Result
I'm having trouble with syntax for updating .click() to .on("click","input..." see Bound Fiddle
Updated Script
var checkboxes;
checkboxes = $("#bind_id").on("change", "input[name^=iso_01]", function (e) {
if (this.checked) {
checkboxes.not(this).prop("checked", false);
}
});
Your issue is,
checkboxes = $("#bind_id").on
is not doing what you think it is doing. It is not storing all the matched nodes.
Try this instead:
In the callback, change
checkboxes.not(..)
to
$('input[name^=iso_01]').not(this).prop("checked", false);
Working fiddle
Or if they are loaded dynamically, you can use $('#bind_id').find('input[name^=iso_01]')
This is not what checkboxes are for. You should be using radio buttons:
<input type="radio" name="example" value="1" id="1">
<label for="1">one</label>
<input type="radio" name="example" value="2" id="2">
<label for="2">two</label>
The problem is checkboxes is the #bind_id element, not the checkboxes. You would need to find the children from that element, to get the child checkbox elements.
Working Example:
var wrapper;
wrapper = $("#bind_id").on("change", "input[name^=iso_01]", function (e) {
if (this.checked) {
wrapper.find("input[name^=iso_01]").not(this).prop("checked", false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="bind_id">
<input type="checkbox" name="iso_01[]" class="setTitlePre1" value="L/R" />
<label for name "iso_01" class="isoVar1">No.1</label>
<input type="checkbox" name="iso_01[]" class="setTitlePre2" value="Alt" />
<label for name "iso_01" class="isoVar2">No.2</label>
</div>

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

Categories