{"id":6808,"date":"2020-07-30T22:53:25","date_gmt":"2020-07-31T03:53:25","guid":{"rendered":"https:\/\/www.rushworth.us\/lisa\/?p=6808"},"modified":"2020-08-05T09:18:54","modified_gmt":"2020-08-05T14:18:54","slug":"html-checkboxes-to-add-and-remove-values-from-table","status":"publish","type":"post","link":"https:\/\/www.rushworth.us\/lisa\/?p=6808","title":{"rendered":"HTML Checkboxes To Add and Remove Values from Table"},"content":{"rendered":"\n

I am creating a web form where the user input sometimes<\/em> cannot be resolved to a unique value. In those cases, I present the user a set of checkboxes with the options (yes, a radio button makes more sense because you can only select one. But<\/em><\/strong> I hate that radio buttons change selection when you hit an arrow key.). <\/p>\n\n\n\n

When a selection is made, I need to (1) deactivate the checkboxes for the other options when a checkbox in the group is selected and (2) add information to a data table that is used in subsequent activities. <\/p>\n\n\n\n

When a selection is cleared, I need to (1) activate the checkboxes within the group and (2) remove the right row from the data table. <\/p>\n\n\n\n

Below is the HTML code that achieves this. Now I just need to map this test page into the actual web code. There’s a post with the actual code I ended up using in production<\/a> too.<\/p>\n\n\n

\n<html>\n<head><title>Adding And Removing From Table<\/title><\/head>\n<body>\n\n<div name="divCircuitClarifications" id="divCircuitClarifications">\n  <h3>My-Sample-Circuit-A<\/h3>\n    <input type="checkbox" value="123" tableselector="SampleCircuitA" name="SampleCircuitA[]" \/><label>123<\/label>\n    <input type="checkbox" value="234" tableselector="SampleCircuitA" name="SampleCircuitA[]" \/><label>234<\/label>\n    <input type="checkbox" value="345" tableselector="SampleCircuitA" name="SampleCircuitA[]" \/><label>345<\/label>\n<P>\n  <h3>My-Sample-Circuit-B<\/h3>\n    <input type="checkbox" value="abc" tableselector="SampleCircuitB" name="SampleCircuitB[]" \/><label>abc<\/label>\n    <input type="checkbox" value="bcd" tableselector="SampleCircuitB" name="SampleCircuitB[]" \/><label>bcd<\/label>\n    <input type="checkbox" value="cde" tableselector="SampleCircuitB" name="SampleCircuitB[]" \/><label>cde<\/label>\n<P>\n  <h3>My-Sample-Circuit-C<\/h3>\n    <input type="checkbox" value="Cabc" tableselector="SampleCircuitC" name="SampleCircuitC[]" \/><label>abc<\/label>\n    <input type="checkbox" value="Cbcd" tableselector="SampleCircuitC" name="SampleCircuitC[]" \/><label>bcd<\/label>\n    <input type="checkbox" value="Ccde" tableselector="SampleCircuitC" name="SampleCircuitC[]" \/><label>cde<\/label>\n<P>\n<\/div>\n\n<div id="divResultTable" name="divResultTable">\n<table border="1" padding="1" name="tableSetsToCreate" id="tableSetsToCreate">\n\t<thead><tr><th>ECCKT<\/th><th>Circuit ID<\/th><\/tr><\/thead>\n\t<tbody><\/tbody>\n<\/table>\n\n\n<script src="https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.1\/jquery.min.js"><\/script>\n\n<script>\n\t$("input:checkbox").on('click', function() {\n\t  \tvar $objCheckbox = $(this);\n\t  \tif ($objCheckbox.is(":checked")) {\t\t\t\/\/ When checked, deactivate other checkboxes and add to sets to create table\n\t    \t\tvar objCheckboxGroup = "input:checkbox[tableselector='" + $objCheckbox.attr("tableselector") + "']";\n\t\n\t    \t\t$(objCheckboxGroup).prop("disabled", true);\n\t    \t\t$objCheckbox.prop("disabled", false);\t\t\/\/ Allow checked box to be unchecked\n\n\t                var strTableRowString = '<tr><td>' + $objCheckbox.attr("tableselector") + '<\/td><td>' + $objCheckbox.val() + '<\/td>\\n';\n\t                $('#tableSetsToCreate tbody').append(strTableRowString);\n\t  \t}\n\t\telse {\t\t\t\t\t\t\t\/\/ When unchecked, active checkboxes and remove from sets to create table\n\t    \t\tvar objCheckboxGroup = "input:checkbox[name='" + $objCheckbox.attr("name") + "']";\n\t    \t\t$(objCheckboxGroup).prop("disabled", false);\t\n\n\t\t\t$("tr:contains('" + $objCheckbox.attr('tableselector') + "')").each(function(){ $(this).remove();})\n  \t\t}\n\t});\n<\/script>\n<\/body>\n\n\n\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"
I am creating a web form where the user input sometimes cannot be resolved to a unique value. In those cases, I present the user a set of checkboxes with the options (yes, a radio button makes more sense because you can only select one. But I hate that radio buttons change selection when you …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[765,1037,856,854,1036,811],"class_list":["post-6808","post","type-post","status-publish","format-standard","hentry","category-coding","tag-html","tag-html-forms","tag-javascript","tag-jquery","tag-web-development","tag-web-programming"],"_links":{"self":[{"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/posts\/6808","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6808"}],"version-history":[{"count":3,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/posts\/6808\/revisions"}],"predecessor-version":[{"id":6840,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/posts\/6808\/revisions\/6840"}],"wp:attachment":[{"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6808"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6808"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}