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 cha

Solution 1:

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

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="o_field_radio o_vertical o_field_widget o_required_modifier in_out bg"style="width:70px;"><divclass="o_radio_item"><inputname="in_out"class="o_radio_input"type="radio"data-index="0"data-value="I"id="radio1032_I"data-color='#adff2f'><labelclass="o_form_label"for="radio1032_I">進貨</label></div><divclass="o_radio_item"><inputname="in_out"class="o_radio_input"type="radio"checked="true"data-index="1"data-value="O"id="radio1032_O"data-color="#ffc0cb"><labelclass="o_form_label"for="radio1032_O">出貨</label></div></div>

Solution 2:

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");
    }
    elseif(v =='I') {
        bg.css("background-color","#ffc0cb");
    }
});
$('div[name=in_out]').trigger('click');

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="o_field_radio o_vertical o_field_widget o_required_modifier in_out bg"name="in_out"style="width:70px;"><divclass="o_radio_item"><inputclass="o_radio_input"type="radio"data-index="0"data-value="I"id="radio1032_I"><labelclass="o_form_label"for="radio1032_I">進貨</label></div><divclass="o_radio_item"><inputclass="o_radio_input"type="radio"checked="true"data-index="1"data-value="O"id="radio1032_O"><labelclass="o_form_label"for="radio1032_O">出貨</label></div></div>

Solution 3:

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:

<fieldclass="in_out"name="in_out"widget="radio"/>

2. the div is wrap by a div class='bg', I just miss it.

3. 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");
    }
    elseif(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.