JSFiddle - React, Tailwind, and code Playground

by fiddlerintheoffice

HTML

<h1>Geting And Setting Form Values With jQuery</h1>
<hr />
<form>
    <input type="checkbox" value="a" name="section" > a
    <input type="checkbox" value="b" name="section" > b
    <input type="checkbox" value="c" name="section" > c
</form>
<hr />
<button id="a">set ['a','b']</button>
<button id="b">set ['c']</button>
<button id="c">set 'b'</button>
<button id="d">get 2</button>
        <hr />
        <div class="console"></div>

CSS

h1 {
    font-size:16px
}
.console {
    bottom:0px;
    border-top:1px solid #ccc;
    box-shadow:inset 2px 2px 2px rgba(0,v0,v0,v0.2);
    height:60px;
}

JavaScript

$('#a').on('click', function(){
    $('input[name="section"]').val(['b', 'c']);
});
$('#b').on('click', function(){
    $('input[name="section"]').val(['c']);
});
$('#c').on('click', function(){
    $('input[name="section"]').val('b');
});
$('#d').on('click', function(){
    $('.console').html(($('input[name="section"]').val()));
});