We Keep Coding

Changing the value of a hidden field to the value of a checkbox on submit with javascript inside Contact Form 7 Wordpress plugin

I have been trying to get this working for more than a week now, searching endlessly for the solution and I can't figure out what I'm doing wrong. I am not a coder, just trying to duct tape some functions together to get this working... Please help!
I have the following checkbox inputs on my Contact Form 7 form inside a Wordpress page. I have Mailchimp for Wordpress updating a group which reflects the visitors interests. I'm trying to get the value of the group assigned to a hidden input field so that the built in mail feature and other Zapier integrations can use the interest values. Most of these apps seem to lack support for the groups functionality inside Mailchimp.
The form html is as follows:
<p>
<label>Which Are You Most Interested In?</label></br>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="ac2ed8233d"
required=""><span>Interest 1</span>
</label>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="s3g2c99k0x"
required=""> <span>Interest 2</span>
</label>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="k9n6xp3s26"
required=""> <span>Interest 3</span>
</label>
</p>
<input type="hidden" id="int-in" name="int-in"</input>
--
I've tried several variations of this including some inline stuff, putting the code in the top or bottom of the page, putting it into the Additional section of Contact Form 7, putting it into a scripts plugin inside wordpress, trying to see if it's an array thing and trying code for pushing from array (more over my head) and so many others. Here is what I'm basically trying to do, albeit wrongly via this code because obviously it is not working...
JS:
$('form').submit(function() {
$('input[name="#mc4wp-INTERESTS[gs8o25e9bc] .
[]"]').change(function(){
$('#int-in').val($('input[name="#mc4wp-INTERESTS[gs8o25e9bc] .
[]"]').val());
});
--
Online there is not much support for Mailchimp groups, and I suspect groups functions of most contact apps, not even with paid plugin feature. Mailchimp for Wordpress has the most support I could find and you still have to do some tinkering to get it working. I'm soooo ready to know what the heck works instead of all the stuff I've been trying! Thank you in advance. I really appreciate it!

Wordpress disables the $ shortcut, so you need to either replace $ with jQuery or wrap your code:
(function($){
// your code here
})(jQuery);
Plus, the name of those checkboxes doesn't contain a hashtag. I also have no idea what you're doing with those dots and linebreaks there.
In addition, you're assigning a onchange handler only when the form is submitted, but you'll want that to work from the start instead.
Here's a solution that sets the onchange handler to grab the value from all checked checkboxes and puts it into the hidden input.
var selector = 'form input[name="mc4wp-INTERESTS[gs8o25e9bc][]"]';
(function($) {
$(selector).change(function() {
var interests = Array.from(document.querySelectorAll(selector))
.filter(e => e.checked).map(e => e.value).join(",");
$('#int-in').val(interests);
console.log("set to", interests);
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<label>Which Are You Most Interested In?</label><br/>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="ac2ed8233d"><span>Interest 1</span>
</label>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="s3g2c99k0x"> <span>Interest 2</span>
</label>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="k9n6xp3s26"> <span>Interest 3</span>
</label>
</p>
<input type="hidden" id="int-in" name="int-in">
<input type="submit">
</form>

Making certain questions appear on an html form through jQuery?

I'd like to say thanks to the community. You've been a tremendous help so far.
Here's my latest question: I'm designing an online submission form, and one of the questions is a yes/no question with radio buttons. If the lead answers yes, I want a certain question to display. If they answer no, a different question will be displayed instead.
I looked at a few other answers and was able to scrape together some jQuerym but it doesn't seem to be working for me. Here is my javascript and a jsfiddle with the rest of my code.
$(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'yes') {
$('#ifyes').show();
} else {
$('#ifno').show();
}
});
});
http://jsfiddle.net/yrktj4kz/
Any help would be appreciated!

Looking at the fiddle, you should use
$('.ifyes').show();
and
$('.ifno').show();
instead.
You were using the id's of the input fields to show the element instead of the class of the wrapping div to which the display: hidden; style was applied.

I have updated your code
HTML:
<li>
<label for="coverage">K. Do you have current coverage?</label>
<input type="radio" name="choice" class="radio-toggle" data-target=".ifyes" data-target-group=".ifdiv" /> Yes
<input type="radio" name="choice" class="radio-toggle" data-target=".ifno" data-target-group=".ifdiv" /> No
</li>
<li>
<div class="ifyes ifdiv">
<label for="ifyes">When does the policy expire?</label>
<input type="text" id="ifyes" name="ifyes" value="" />
</div>
<div class="ifno ifdiv">
<label for="ifno">When do you need the policy to take effect?</label>
<input type="text" id="ifno" name="ifno" value="" />
</div>
</li>
and JS:
$(document).ready(function(){
$('.radio-toggle').click(function() {
$($(this).data('targetGroup')).hide();
$($(this).data('target')).show();
});
});
Obviously you need to call the jQuery library.
This is the complete and updated fiddle: http://jsfiddle.net/yrktj4kz/1/
Note that i'm using html data attribute to optimize the js code.

Refreshing input:radio from iframe using Jquery Mobile

I'm trying to change the selected option of an input:radio (that is in the main page) dynamically clicking a button inside an iframe.
To do this, y pass by parameter the variable containing the input:radio element:
//code from iframe.js
button.live("click", function(e) {
var inputRadioContainer = $(window.parent.document).find('#inputRadioContainer');
changeInputRadio(inputRadioContainer, "email");
});
//code from mainPage.js
function changeInputRadio(inputRadioContainer, val){
inputRadioContainer.find('input:radio[value=val]').attr('checked',true).checkboxradio('refresh');
}
//HTML content of inputRadioContainer
<ul id="inputRadioContainer" data-role="listview">
<li>
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain" data-mini="true">
<input type="radio" name="radio-contacto" id="radio-contacto-1" value="email"/>
<label for="radio-contacto-1" value="email">email</label>
<input type="radio" name="radio-contacto" id="radio-contacto-2" value="tlf"/>
<label for="radio-contacto-2" value="tlf">telf</label>
</fieldset>
</li>
</ul>
After executing that code, the "checked" attribute of the required radio is setted to "checked" (as expected), but the radio is not displayed checked. It seems that ".checkboxradio('refresh');" is not working. I also tried doing "inputRadioContainer.listview('refresh')" but it doesn't work.
Anyone knows how to solve the problem?
Thank you very much!!

Solution:
Using
inputRadioContainer.find('input:radio[value=val]').attr('checked',true).trigger('click');
instead of
inputRadioContainer.find('input:radio[value=val]').attr('checked',true).checkboxradio('refresh');
I hope helping someone

Checking and unchecking radio buttons with Jquery Mobile

I can't check a set of checkboxes programatically with jquery mobile, I have the following code:
<div data-role="fieldcontain" id="div_radio" class="radiogroup">
<fieldset data-role="controlgroup">
<input type="radio" name="radio-pieces" id="radio-choice-1" value="3" checked="checked" />
<label for="radio-choice-1">1 to 3</label>
<input type="radio" name="radio-pieces" id="radio-choice-2" value="5" />
<label for="radio-choice-2">4 to 5</label>
<input type="radio" name="radio-pieces" id="radio-choice-3" value="6" />
<label for="radio-choice-3">over 5</label>
</fieldset>
</div>
If I do: $("input[type='radio']:last").attr("checked",true).checkboxradio("refresh"); everything works perfect, but none of this work at all:
$("input[type='radio']:first").attr("checked",true).checkboxradio("refresh");
$("input[type='radio']:eq(0)").attr("checked",true).checkboxradio("refresh");
$("input[type='radio']:eq(1)").attr("checked",true).checkboxradio("refresh");
$("input[type='radio']:eq(2)").attr("checked",true).checkboxradio("refresh");
How can I properly manipulate these elements? Unselecting all checkboxes also works fine:
$("input[type='radio']").attr("checked",false).checkboxradio("refresh");
It seems that the only checkbox working is the last one.

They all work just fine. You just need to trigger refresh on all input radio in group.
$("input[type='radio']:first").attr("checked", "checked");
$("input[type='radio']").checkboxradio("refresh");
jsFiddle is here.

Nothing worked for me except:
$('#reset').click(function(){
$('#Store').trigger("click").trigger("click"); // yes... twice
});
On jQuery Mobile 1.4.2.

For me works this to uncheck the whole group of radios:
$(".my_class").removeAttr("checked");
$(".my_class").checkboxradio("refresh");

This doesn't seem right.
The single quote is not needed input[type=radio] is correct.
I'm using an outdated version (1.1.1).
It would be help to know what version you're using.
Keep in mind that those are radio buttons, only one selected at a time.

in Jquery mobile radio button refresh like this:
$(".iscfieldset input[type='radio']:first").attr("checked", "checked");
$(".iscfieldset input[type='radio']").checkboxradio().checkboxradio("refresh");
try this working fine for me

Protect unspecified Javascript event handlers from being garbage collected

Recently I posed a question, asking why some of my javascript code was misbehaving. However, the accepted answer didn't fully solve my problem, so here I am once again.
Problem Description
I have a <div> which has a collection of radio buttons in it.
I use jquery ui to style that collection with a buttonset(). It looks resonably pretty.
Then I empty the <div> with jquery by doing something to the effect of $("#mydiv").html("")
Then I once again restore exact contents that were removed.
Finally the buttonset is no longer working properly, because its events got unhinged in the process.
So my question is how to protect such bound events from being garbage collected, when I temporarily tinker with the DOM?
NB! I can't do display:none to hide the <div> instead, because the whole business with deleting html content and restoring it later is handled by an unnamed jquery plugin. Nor can I call buttonset() again, because a) the graphic style gets messed up, and b) there are other controls in my real problem that don't have this handy functionality. So what I really need is some way to protect all those handlers while the elements which behavior they are supposed to govern are temporarily missing from the DOM.
Sample Code
HTML
<div id="container">
<div id="buttonset">
<input type="radio" id="radio1" name="option" />
<label for="radio1">X</label>
<input type="radio" id="radio2" name="option" />
<label for="radio2">Y</label>
<input type="radio" id="radio3" name="option" />
<label for="radio3">Z</label>
</div>
</div>
<div id="control">
<input id="toggle" type="checkbox"/>
<label for="toggle">Toggle</label>
</div>
Javascript
$(function(){
$("#buttonset").buttonset();
$("#toggle").click(
function(){
if($(this).is(":checked"))
{
backup = $("#container").html();
$("#container").html("");
} else $("#container").html(backup);
}
)
});
Playable Version
See this jsFiddle
Solution
I used the idea in the accepted answer to save html contents before applying buttonset(), then reapply buttonset() each time as needed on that saved data.

Update:
Here's an updated fiddle that's pretty close to what your OP is. The basic idea is it destroys the buttonset to get the original html back
$(function() {
//Turn the radio buttons into a jquery ui buttonset
$("#buttonset").buttonset();
//Use the toggle button to hide/show the #container div.
//NB! It's not possible to do css display:none instead,
//due to some other limitations, to wit, I'm using a
//library that I can not modify.
$("#toggle").button();
var backup; // added this to prevent it from leaking onto global scope.
$("#toggle").click(function() {
if ($(this).is(":checked")) {
// restore the html back
$("#buttonset").buttonset("destroy");
backup = $("#container").html();
$("#container").html("");
}
else {
$("#container").html(backup);
$("#buttonset").buttonset();
}
})
});