Using html buttons to check/uncheck multiple selection checkbox choice field on edit form in SPO

Question

USE CASE

I want each one of the (3) users -- Marty, Reggie, and Rust -- to be able to click a button in order to dynamically place a check mark on a multiple selection CHOICE field on the Edit Form. The display and internal name(s) of the choice field is confirmChoice, and the choice options are as follows:

• Marty
• Reggie
• Rust
• All

Since this is a multiple-selection choice field, I want to create 8 buttons whose value(s) correspond with the choices above:

<button type="button" id="btnMarty" onclick="checkMarty()"> Marty YES</button> <button type="button" id="btnMarty" onclick="uncheckMarty()"> Marty NO</button> <button type="button" id="btnReggie" onclick="checkReggie()"> Reggie YES</button> <button type="button" id="btnReggie" onclick="ucheckReggie()"> Reggie NO</button> <button type="button" id="btnRust" onclick="checkRust()"> Rust YES</button> <button type="button" id="btnRust" onclick="ucheckRust()"> Rust NO</button> <button type="button" id="btnAll" onclick="checkAll()"> All YES</button> <button type="button" id="btnAll" onclick="uncheckAll()"> All NO</button>

When a button is pushed, the choice option corresponding with the button value will get checked without a page refresh or submit THIS ISN'T A PRE-SAVE ACTION. The user will have to manually click 'Submit/save' when they're finished updating the form.

EXAMPLE

Marty accesses the Edit Form. He clicks the 'Marty' button (whose value is 'MartyConfirm', and the choice 'MartyConfirm' gets a check-mark. When Marty pushed the 'All' button, the choice 'All' gets a check-mark.

I know there's an exisitng OOB 2010 approval WF, but I'd rather avoid SPD if possible. Is there a way to do this?

Answer 1

Sample script for your reference(not complete, I believe you can achieve base on sample script).

Insert script editor webpart to edit form and then insert the script to script editor web part.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        function checkMarty() {
            var MartyCheck = $("label:contains('Marty')").siblings("input");
            if (!MartyCheck.prop('checked')) {
                MartyCheck.prop('checked', true);
            }
        }
        function uncheckMarty() {
            var MartyCheck = $("label:contains('Marty')").siblings("input");
            if (MartyCheck.prop('checked')) {
                MartyCheck.prop('checked', false);
            }
        }
        function checkAll() {
            var MartyCheck = $("table[id*='confirmChoice']").find('input').each(function () {
                if (!$(this).prop('checked')) {
                    $(this).prop('checked', true);
                }
            })

        }
        function uncheckAll() {
            var MartyCheck = $("table[id*='confirmChoice']").find('input').each(function () {
                if ($(this).prop('checked')) {
                    $(this).prop('checked', false);
                }
            })

        }
    </script>
    <button type="button" id="btnMarty" onclick="checkMarty()"> Marty YES</button>
    <button type="button" id="btnMarty" onclick="uncheckMarty()"> Marty NO</button>
    <button type="button" id="btnReggie" onclick="checkReggie()"> Reggie YES</button>
    <button type="button" id="btnReggie" onclick="ucheckReggie()"> Reggie NO</button>
    <button type="button" id="btnRust" onclick="checkRust()"> Rust YES</button>
    <button type="button" id="btnRust" onclick="ucheckRust()"> Rust NO</button>
    <button type="button" id="btnAll" onclick="checkAll()"> All YES</button>
    <button type="button" id="btnAll" onclick="uncheckAll()"> All NO</button>

Update:

The script use jQuery attribute selector, so make sure the choices table element id matches.