Develop Reference

jquery function on click event in odoo is not working

i am trying bellow jquery code to perform some dynamic changes to my front view to make the odoo switch toggle to behave like radio button.so it could be selected one at a time like radio button
Note: console.log("test") is working but the code with css selector is not working
please guide me how i run my script to work it fine
$(document).ready(function(){
$(".wk_checked_question").click(function(){
alert("you click me!");
});
console.log("test");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
*test.html**
<tbody>
<tr>
<td class="question_id" style="width:70%">Q1. t-shirt coler
size</td>
<td class="question_id" style="width:50%">$ 120.00</td>
<td><label class="switch">
input class="wk_checked_question" data-id="2" type="checkbox">
<span class="check_box round"></span>
</label>
</td>
</tr>
<tr>
<td class="question_id" style="width:70%">Q2. t-shirt size</td>
<td class="question_id" style="width:50%"> Free</td>
<td>
<label class="switch">
<input class="wk_checked_question" data-id="1" type="checkbox">
<span class="check_box round"></span>
</label>
</td>
</tr>
</tbody>

Maybe this is what you are looking for:
$(document).ready(function(){
$("body").on("click",".wk_checked_question",function(ev){
$(".wk_checked_question").each((i,cb)=>cb.checked=(cb==this));
this.checked=true; // a "real" radio button cannot be unchecked ...
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:500px">
<tbody>
<tr>
<td class="question_id" style="width:70%">Q1. t-shirt color size</td>
<td class="question_id" style="width:50%">$ 120.00</td>
<td><label class="switch"><input class="wk_checked_question" data-id="2" type="checkbox">
<span class="check_box round"></span></label></td>
</tr>
<tr>
<td class="question_id" style="width:70%">Q2. t-shirt size</td>
<td class="question_id" style="width:50%"> Free</td>
<td>
<label class="switch">
<input class="wk_checked_question" data-id="1" type="checkbox">
<span class="check_box round"></span></label></td>
</tr>
</tbody>
</table>
After a click on a checkbox the .each() loop goes over all checkboxes with the same class and sets only the one being identical to the clicked ono (this). All others are unchecked.
I used "delegated event attachment" with jQuery.on() as suggested in #freedomn-m's comment. This has the advantage that it will work on target elements (.wk_checked_question) that don't even exist at the time of the event attachment.
Your HTML was also missing the <table> tags around your <tbody> which I added.
Edit
Coming back to this answer I realized that I could simplify the script even further and allow for an option to be unselected again by using this:
$("body").on("click",".wk_checked_question",function(ev){
let newstate=this.checked;
$(".wk_checked_question").prop("checked",false);
this.checked=newstate
});

dynamically putting form fields using append in my form but not getting values ( the name in URL ) while submitting the form in jquery

I am trying to insert input field in my div onclick of check box. and it is working but when i submit the form the value is not received to me of that input box
check box
<form action="{{ url('product_uplo') }}" method="get" enctype="multipart/form-data" accept-charset="utf-8">
<tr>
<table class="table">
<tr>
<td>
<label><input type="checkbox" id="ELarge" name="pro_size[]" onclick="a('ELarge')" value="ELarge"> Extra Large</label>
</td>
<td>
<label><input type="checkbox" id="Large" name="pro_size[]" onclick="a('Large')" value="Large"> Large</label>
</td>
<td>
<label><input type="checkbox" id="Medium" name="pro_size[]" onclick="a('Medium')" value="Medium"> Medium</label>
</td>
<td>
<label><input type="checkbox" id="Small" name="pro_size[]" onclick="a('Small')" value="Small"> Small</label>
</td>
<td>
<label><input type="checkbox" id="ESmall" name="pro_size[]" onclick="a('ESmall')" value="ESmall"> Extra Small</label>
</td>
</tr>
</table>
</tr>
<tr>
<td>Price</td>
<td>
<div id="set"></div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" class="form-control btn btn-primary">
</td>
</tr>
</form>
JQuery code
<script type="text/javascript">
function a(extra){
if($('#'+extra+'').is(":checked")){
$('#set').append("<div id="+"price"+extra+"><label>"+extra+"</label><input type='text' name='pro_price["+extra+"]' class='form-control' placeholder="+extra+" /></div>");
}else{
$('#price'+extra).remove();
}
}
</script>
When I submit the form the url is like this
http://www.asggas.com/product_uplo?dat=pro_type=Girls+Cloth&pro_name=asadsfd&brand=sadf&Material=sadf&pro_color=sdf&pro_des=sadf&pro_size%5B%5D=ELarge&pro_size%5B%5D=Large&pro_quantity=5446&galary%5B%5D=
it doesn't pass pro_price[Elarge] ...
Please help

after searching to much i got the answer. because of i am using table tag it's now sending the data. so remove the table tag and it will work

How to store values(i.e. 'Y'- for checked, 'N' - for unchecked) of multiple checkbox in database using angularjs?

I've attached the screenshot of my module. I want the store the values('Y','N') of selected checkbox in database
<tr data-ng-repeat="data in RoleOperation track by $index">
<td>{{$index + 1}}</td>
<td>
<label>{{RoleOperation[$index].vname}}</label>
</td>
<td>
<label>{{RoleOperation[$index].id}}</label>
</td>
<td class="text-center">
<input type="checkbox" data-ng-model="data.viewflg[$index]" />
</td>
<td class="text-center">
<input type="checkbox" data-ng-model="data.addflg[$index]" />
</td>
<td class="text-center">
<input type="checkbox" data-ng-model="data.editflg[$index]" />
</td>
<td class="text-center">
<input type="checkbox" data-ng-model="data.deleteflg[$index]" />
</td>
</tr>
Here RoleOperation is Object, which contains names of categories.
How to give value to data-ng-model? And how to access particular checkbox in controller?
plz help me..

You can use ng-true-value and ng-false-value to set your preferred values.
To set Y and N use the below code.
<input type="checkbox" data-ng-model="data.viewflg[$index]" ng-true-value="'Y'" ng-false-value="'N'">
-- EDIT --
Here is a sample

cancel( reset the html ) button is not working

I am new to html, javascript, and css.
I do not know why, but my cancel button is not working at all.
<!DOCTYPE html>
<html>
<head>
<!-- set the page title and link with java script and css files -->
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="hw4.css">
<script src="hw4.js"></script>
</head>
<body>
<section>
<table>
<tr>
<td class="first">Post to</td>
<!-- create two post to buttons -->
<td class="second"><input id="entire" type="radio" name="post"
value="entire" checked>Entire Class <input type="radio"
id="individual" name="post" value="individual">Individual
Student(s)/instructor(s)</td>
</tr>
<tr>
<td class="first">Select Folder(s)</td>
<td class="second">
<!-- create six homework checkboxes -->
<div class="hw">
<input id="hw1" type="checkbox"><label for="hw1">hw1</label>
<input id="hw2" type="checkbox"><label for="hw2">hw2</label>
<input id="hw3" type="checkbox"><label for="hw3">hw3</label>
<input id="hw4" type="checkbox"><label for="hw4">hw4</label>
<input id="hw5" type="checkbox"><label for="hw5">hw5</label>
<input id="hw6" type="checkbox"><label for="hw6">hw6</label>
</div>
</td>
</tr>
<tr>
<td class="first">Summary
<div style="font: 10px Arial">(100 charactors or less)</div>
</td>
<td class="second"><input id="summary" type="text" size="25"
value="Enter a one line summary...!" onclick="this.value='';"></td>
</tr>
<tr>
<td class="first">Details</td>
<!-- create detail text area. -->
<td class="second"><textarea id="details" name="textarea"
rows="10" cols="50" wrap='off'></textarea></td>
</tr>
<tr>
<td class="first">Posting Options</td>
<!-- create two option check boxes -->
<td><input id="option1" type="checkbox"> Make this an
announcement (note appears on the course page)</br> <input id="option2"
type="checkbox"> Send email notifications immediately
(bypassing student's email preferences, if neccesory)</td>
</tr>
<tr>
<td></td>
<td>
<input id="post" type="submit" value="Post My Note!" onClick="check()">
<input id="cancel" type="reset" value="Cancel" />
</td>
</table>
</section>
</body>
</html>
when I run this code, everything works well, but the cancel button is not working.
I think I did something wrong, because it worked like 30 mins ago, but
now it is not working at all and I cannot figure out what is wrong...!!

You have no form tag. A reset-button clears values inside a form.
2 Solutions:
Wrap your input-elements inside a <form><!-- elements here --></form>
Write a piece of script to clear the elements you want to clear when you click on the clear-button.

Try This:
Reset button only working for form tag. So please add form tag in your code as I shown in demo.
<script src="hw4.js"></script>
</head>
<body>
<section>
<table>
<form>
<tr>
<td class="first">Post to</td>
<!-- create two post to buttons -->
<td class="second"><input id="entire" type="radio" name="post"
value="entire" checked>Entire Class <input type="radio"
id="individual" name="post" value="individual">Individual
Student(s)/instructor(s)</td>
</tr>
<tr>
<td class="first">Select Folder(s)</td>
<td class="second">
<!-- create six homework checkboxes -->
<div class="hw">
<input id="hw1" type="checkbox"><label for="hw1">hw1</label>
<input id="hw2" type="checkbox"><label for="hw2">hw2</label>
<input id="hw3" type="checkbox"><label for="hw3">hw3</label>
<input id="hw4" type="checkbox"><label for="hw4">hw4</label>
<input id="hw5" type="checkbox"><label for="hw5">hw5</label>
<input id="hw6" type="checkbox"><label for="hw6">hw6</label>
</div>
</td>
</tr>
<tr>
<td class="first">Summary
<div style="font: 10px Arial">(100 charactors or less)</div>
</td>
<td class="second"><input id="summary" type="text" size="25"
value="Enter a one line summary...!" onclick="this.value='';"></td>
</tr>
<tr>
<td class="first">Details</td>
<!-- create detail text area. -->
<td class="second"><textarea id="details" name="textarea"
rows="10" cols="50" wrap='off'></textarea></td>
</tr>
<tr>
<td class="first">Posting Options</td>
<!-- create two option check boxes -->
<td><input id="option1" type="checkbox"> Make this an
announcement (note appears on the course page)</br> <input id="option2"
type="checkbox"> Send email notifications immediately
(bypassing student's email preferences, if neccesory)</td>
</tr>
<tr>
<td></td>
<td>
<input id="post" type="submit" value="Post My Note!" onClick="check()">
<input id="cancel" type="reset" value="Cancel" />
</td>
</form>
</table>
</section>
</body>
</html>
Enjoy :)

JS/jQuery Change Image on Hover of <tr>

I have some HTML shown below, which is generated dynamically in an ASP Classic form.
There can be any amount of groups/tables (Size/Color) with any amount of rows/options.
Each group/table has an img tag, and each row/option has a hidden field with its corresponding image URL.
On the hover of each row, I need to change the src attribute of the image of that group to that row's image URL, using JS or jQuery (something that works in ASP classic).
The HTML can be changed if needed for it to work.
Thank you.
<table>
<tr>
<td style="font-weight: 700" colspan="2">
Color<input id="colorSortOrder" type="hidden" value="1" />
</td>
</tr>
<tr>
<td>
<input id="radioRed" type="radio" name="Color" value="R-" />
<label for="radioRed">
Red</label>
<input type="hidden" value="Image1.jpg" />
</td>
<td rowspan="3">
<img />
</td>
</tr>
<tr>
<td>
<input id="radioOrange" type="radio" name="Color" value="O-" />
<label for="radioOrange">
Orange</label>
<input type="hidden" value="Image2.jpg" />
</td>
</tr>
<tr>
<td>
<input id="radioBlue" type="radio" name="Color" value="B-" />
<label for="radioBlue">
Blue</label>
<input type="hidden" value="Image3.jpg" />
</td>
</tr>
</table>
<table>
<tr>
<td style="font-weight: 700" colspan="2">
Size<input id="sizeSortOrder" type="hidden" value="2" />
</td>
</tr>
<tr>
<td>
<input id="radioLarge" type="radio" name="Color" value="LA-" />
<label for="radioLarge">
Large</label>
<input type="hidden" value="Image4.jpg" />
</td>
<td rowspan="3">
<img />
</td>
</tr>
<tr>
<td>
<input id="radioMedium" type="radio" name="Color" value="ME-" />
<label for="radioMedium">
Medium</label>
<input type="hidden" value="Image5.jpg" />
</td>
</tr>
<tr>
<td>
<input id="radioSmall" type="radio" name="Color" value="SM-" />
<label for="radioSmall">
Small</label>
<input type="hidden" value="Image6.jpg" />
</td>
</tr>
</table>
...which looks something like:

I would change the HTML just a little bit to reduce the JavaScript parsing needed by adding data attributes for the image src like this
http://jsfiddle.net/muDJ9/
and with the use of JavaScript replace you can edit out extensions for the alt tags
EDIT: This also runs the fastest I just ran tests on the others submitted using the console.time() profiler
FINAL: http://jsfiddle.net/FV9cw/

You can do it as under
Live Demo
$('label[for]').closest('tr').mouseenter(function(){
$(this).siblings().find('img').hide();
$(this).find('img').attr('src', $(this).find('input[type=hidden]').attr('value')).show();
});

$("input[type='radio']").hover(function(){
var src = $(this).parent().find("input[type='hidden']").val();
$(this).parent().parent().parent().find("img").attr("src",src);
});
Line 1 detects hover.
Line 2 go up to td and looks for the hidden input inside td and takes the value
Line 3 go up three times td > tr > table and looks for img and sets his attribute src with the image.