locked
Check/Uncheck Radio Buttons of Appended column in HTML Table. RRS feed

  • Question

  • User-1549556126 posted

    I have an HTML table that has a column of radio buttons, the requirement is that they should have a behavior like checkbox, as MVC manages duplicate checkboxes I decided to go with radio buttons. I have initialized value attribute to 0 when the checked status is false and 1 when it is true. However, the code is not functioning.

    This is my function to load HTML data: 

    $.ajax({
                            type: "POST",
                            url: "/Group/FillMembers",
                            data: { GroupName: $("#ddlGroup option:selected").text().trim() },
                            success: function (response) {
                                $.each(response.message, function (key, value) {
                                    var tr = $("<tr></tr>");
                                    var tbody = $("#tbody");
                                    var arr = value.split(";");
                                    $.each(arr, function (i, obj) {
                                        var temp = arr[i].trim().split("=")[1];
    
                                        td = $("<td></td>");
                                        td.append(temp);
                                        tr.append(td);
                                    })
                                    //DropDownlist for required adjustments
                                    tr.append("<td><select id='ddlReqdAdjustment' class='form-control'> \
                                                <option>Keep</option> \
                                                <option>Remove</option> \
                                                <option>Remove After</option> \
                                            </select> \
                                        </td>");
                                    //Textbox with Validation to allow only integers
                                    tr.append("<td><input type='text' class='form-control myText' disabled \
                                                    onkeypress = 'return (event.charCode != 8 && event.charCode == 0 \
                                                                            || (event.charCode >= 48 && event.charCode <= 57))' /> \
                                        </td >");
    
                                    tr.append("<td> <input type='radio' class='fakeRadio form-control' id='myChk' value='0'/> \
                                                    <label for='chk'/>\
                                               </td>");
                                    tbody.append(tr);
                                    document.getElementsByClassName('myText')[0].oninput = function () {
                                        var max = parseInt(this.max);
    
                                        if (parseInt(this.value) > max) {
                                            this.value = max;
                                        }
                                    }
                                });
                                // Resetting Mouse Click & Cursor
                                $("*").css("cursor", "default");
                                //Hiding MemberGUID
                                $('td:nth-child(4)').hide();
                            }
                        });

    And this is the code for unchecking the checkbox:

    $(document).on('click', "#myChk", function () {
                var findTd = $(this).closest('tr').find('td');
                var myVal = findTd.find("#myChk").val();
                if (myVal == '0') {
                    findTd.find("input.myChk").prop('checked', false);
                    findTd.find("input.myChk").prop('value', '1');
                } else {
                    findTd.find("input.myChk").prop('checked', true);
                    findTd.find("input.myChk").prop('value', '0');
                }
            })

    Is that a right approach? Or is there any efficient way as sometime this code doesn't works.

    Thursday, June 20, 2019 9:06 PM

All replies

  • User665608656 posted

    Hi vyasnikul,

    According to your description,I suggest you to add different name to each radio input when you add tr to tdbody to distinguish and identify them.

    You could define a variable K = 0 before you loop the response.message, then add name attribute to radio input like this:

    $.ajax({
                            type: "POST",
                            url: "/Group/FillMembers",
                            data: { GroupName: $("#ddlGroup option:selected").text().trim() },
                            success: function (response) {
    var k =0; $.each(response.message, function (key, value) { var tr = $("<tr></tr>"); var tbody = $("#tbody"); var arr = value.split(";"); $.each(arr, function (i, obj) { var temp = arr[i].trim().split("=")[1]; td = $("<td></td>"); td.append(temp); tr.append(td); }) //DropDownlist for required adjustments tr.append("<td><select id='ddlReqdAdjustment' class='form-control'> \ <option>Keep</option> \ <option>Remove</option> \ <option>Remove After</option> \ </select> \ </td>"); //Textbox with Validation to allow only integers tr.append("<td><input type='text' class='form-control myText' disabled \ onkeypress = 'return (event.charCode != 8 && event.charCode == 0 \ || (event.charCode >= 48 && event.charCode <= 57))' /> \ </td >"); tr.append("<td> <input type='radio' class='fakeRadio form-control' name=name" + k + " id='myChk' value='0'/> \
    <label for='chk'/>\
    </td>"); tbody.append(tr); document.getElementsByClassName('myText')[0].oninput = function () { var max = parseInt(this.max); if (parseInt(this.value) > max) { this.value = max; } }
    k++; }); // Resetting Mouse Click & Cursor $("*").css("cursor", "default"); //Hiding MemberGUID $('td:nth-child(4)').hide(); } });

    When you trigger each radiobutton, you can change your click event like this:

    $(document).on('click', "input:radio", function () {
    
                var domName = $(this).attr('name');
                var radio = $(this);
                // if this was previously checked
                if (radio.data('waschecked') == true) {
                    radio.prop('checked', false);
                    radio.data('waschecked', false);
                } else {
                    radio.prop('checked', true);
                    radio.data('waschecked', true);
                }
            })

    Here is the result of my work demo:

    Best Regards,

    YongQing.

    Friday, June 21, 2019 3:20 AM