Develop Reference

Change attribute

I've got a selection/dropdown with ID #pa_buy-sell[]. What I want to do is if the value is "buy" I want to change the attribute data-required="yes" to data-required="no" from a input field with class wpuf__regular_price_657. I also want to hide the span with class required. The code has to work in WordPress.
I'm quite new in this, so I'm not sure what's the right code. But I thought something like this could be a good starting point:
$('#pa_buy-sell[]').change(function(){
if($(this).val() == 'buy'){
//something need to happen here
}
});
Can someone help me with this?

Your code is correct until now. You have to replace the comment with the following lines:
$('.wpuf__regular_price_657').data('required','no');
$('span.required').hide();

To change the attribute to yes or no. you can use this:
$(".wpuf__regular_price_657").attr("data-required","no");
or you can use disabled as true or false, if you dont want to take input as
$(".wpuf__regular_price_657").attr("disabled", true);
and for hiding the particular span:
$("span.required").hide();
This will work fine in wordpress too
Hope it helped you

Please check with "===" which confirms Strong type checking (type and value) comparison and also refer the code for hiding the div with class required.
<script>
var $ = jQuery.noConflict();
$('.pa_buy-sell.wpuf_pa_buy-sell_657').change(function(){
if($(this).val() === "buy"){
$(".wpuf__regular_price_657").attr("data-required","no");
$("span.required").hide();
}
});
</script>

How to save an image's attribute id to a variable?

UPDATE - Sorry I tried to keep the code minimal, but looks like more detail is needed. I've created a non production jfiddle here with some notes to help explain what I'm trying to solve.
Hopefully this provides you with all details
http://jsfiddle.net/d86tm/5/
From looking at Google and SO nothing quite answers my answer...
After a user clicks an image I'd like to capture the attribute id assigned to the image and save it within a variable, something like
var friendRequestId = $(e.source).data("UserForBadge");
At the moment I have. But I'm not certain this is correct and its certainly returning an error
Uncaught ReferenceError: friendRequestId is not defined
Just looking for guidance/best practice example on how to complete this.
$(document).ready(function() {
$('.UserForBadge').css('cursor', 'pointer');
$('.UserForBadge').click(function(e) {
$(this).appendTo('friendRequestId');
// Nothing to worry about this part at the mo/////////
return false;
});
});

From what I understood by the question you wanted the id on the click of the image using jquery. Please find the fiddle
The code snippet used is:
e.target.id

if i understood correctly. your markup should be:
<img id="someId" onclick="imgClick(this)" />
and your js function:
function imgClick(sender){
var $img = $(this); //creates jQuery object from the DOM object
var id = $img.attr('id'); // extracts the id attribute
//your code...
}

Javascript to select checkbox

What would be the javascript below to select the checkbox for value 0?
<input name="bootproto" id="bootproto" type="radio" value="0" key="bootproto">
I tried using
$('input[name="bootproto"]').click() but it didnt seem to work.

$("#bootproto").prop("checked",true);
Since you're using jquery, just set the property "checked" to true (I don't see why you're name selecting when you have a perfectly good ID there as well)
If you want to check it ONLY if value=0, add an if statement before this.

document.getElementById('bootproto').checked = true;
OR
$('#bootproto').prop('checked',true);

I figured out that $('input[value="0"]').click() seemed to work for me.

Try this,
$('input[name="bootproto"]').attr('checked',true);
Checked is actually an attribute of the input tag of type radio, So that you can use the .attr() function to set its checked attribute as true.
DEMO

You don't mention that you're using jQuery even tho you've apparently tried the syntax. On the off-chance you're not using it, try:
var i = document.querySelector('input[value="0"]').checked = true;

I would do the following : $('input[name="bootproto"]:not(:checked)').

How come CheckObject.checked won't work?

I have a checkbox that by default is set to checked:
<input type="checkbox" id="chkobj" checked />
And I use the following javascript to uncheck it depending on the value of a variable:
var chk = document.getElementById("chkobj");
if(myStr=="1")
{
chk.checked=true;
}
else
{
chk.checked=false;
}
Yet, no matter what I try, the value won't change. Any idea why? I rather stick to pure JS than use jQuery. I'm really curious as to why this won't just work in plain JS. Any help is greatly appreciated. Thanks in advance :)

If you check the element itself. Even if you set chk.checked = false. Which makes chk.checked==false to be true. The element would still have checked attribute and would probably display as a checked box... try chk.removeAttribute('checked') as well to remove the check. And chk.setAttribute('checked', 'checked') to check the box visually.

HTML/JS: How to change option value of select type using JS

I've been trying to figure out how to set a value to a an option in a select type. But no matter how much I try to understand I just can't (feels ashamed)..
So I was hoping that you guys could help me since you've helped me so many times before.. :)
Let's say we have:
<select name="box" id="test">
<option value='tval'>Content</option>
shouldn't this next code change the text from 'Content' to 'box'?
function changeContent(form){
form.document.getElementById('test').options['tval'].value = 'box';
}
or am I completely wrong here? I've looked up so many different articles but no one could help me understand how to do this..
Thanks guys!

If You need to change the text rather than the value;
function changeContent(){
document.getElementById('test').options[0].text = 'box';
}
To set both the value and text;
function changeContent(){
var opt= document.getElementById('test').options[0];
opt.value = 'box';
opt.text = 'box';
}

No, value is the actual value of the option element, what will be sent when the user submits the form. What you are trying to access is the HTML of the option element, you would have to access it with something like:
form.document.getElementById('test').options['tval'].innerHTML='box'

That will change the value from 'tval' to 'box'
I think what you are looking for is the inner text of the option.
W3CSchools.com has an example of what you are looking for in javascript. You did want javascript, correct?
http://w3schools.com/js/tryit.asp?filename=try_dom_option_settext

Drop the form. part and use:
document.getElementById('test').options[0].innerHTML = 'box';
See http://jsfiddle.net/hMqFE/

You should use index of the option here.
Here is the working example http://jsfiddle.net/LaMJ9/
Code
document.getElementById('test').options[0].value = 'box';
Edit
addded alerts for previous and new values at jsfiddle http://jsfiddle.net/LaMJ9/1/