locked
How to checked or Unchecked the check box when the text of the check box is selected using JavaScript's/Jquery RRS feed

  • Question

  • User-1202100973 posted
    <asp:treeview id="tv1" runat="server" showcheckboxes="All" expanddepth="0">
       <Nodes>
          <asp:TreeNode Text="New Node1" Value="New Node1">
             <asp:TreeNode Text="New Node2" Value="New Node2">
                <asp:TreeNode Text="New Node2.1" Value="New Node2.1"></asp:TreeNode>
                <asp:TreeNode Text="New Node2.2" Value="New Node2.2"></asp:TreeNode>
             </asp:TreeNode>
          </asp:TreeNode>
       </Nodes>
    </asp:treeview>

    so Can we check or unchecked the text box when we click on Text of the check box.

    Ex if we click the <input type="checkbox" name="tv1n0CheckBox" id="tv1n0CheckBox" />  on New Node1 then the node needs to be checked or unchecked.

    Any help on it Please.

    Monday, April 18, 2016 9:54 PM

Answers

  • User61956409 posted

    Hi Aditya_ven,

    Its not firing $("a[id^='tv1']").click

    Firstly, please check the actual client id of element in browser before you select the element.

    Secondly, I have shared you a sample code to check/uncheck checkboxes dynamically. You could do similar thing to find the radio button and make it checked or unchecked.

    //check
    $("input[type='radio']").attr("checked", "checked");
    //uncheck
    $("input[type='radio']").removeAttr("checked"); 
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 22, 2016 9:22 AM

All replies

  • User61956409 posted

    Hi Aditya_ven,

    Ex if we click the <input type="checkbox" name="tv1n0CheckBox" id="tv1n0CheckBox" />  on New Node1 then the node needs to be checked or unchecked.

    According to your description, I create the following sample for your reference.

    <script>
        $(function () {
            $("a[id^='tv1']").click(function () {
                var ischecked = $(this).prev(":checkbox").is(":checked");
                if (ischecked) {
                    $(this).prev(":checkbox").removeAttr("checked");
                } else {
                    $(this).prev(":checkbox").attr("checked", "checked");
                }
            })
        })
    </script>
    

    a[id^='tv1'] is used to select elements that have the specified ID, for more information about attribute selectors, please check this link.

    https://api.jquery.com/category/selectors/attribute-selectors/

    Best Regards,

    Fei Han

    Tuesday, April 19, 2016 2:01 AM
  • User-1202100973 posted

    Thank you Fei Han ,

    For your quick response.

    And I have the tab panels coming that are Dynamical.

    And the tab panels are added to Tab Container.

    i.e Some time I have my  3,4 tab’s.

     And in my tab I have both radio button and check boxes.

    And I want to apply the same rule to all the controls in the tab’s radio/Check Box.

    So now when I click on the text part, the radio/check box needs to be checked/unchecked.

    For example on the text of Clean Service given below I need to check my radio button/Check Box

     

     

     

    Tuesday, April 19, 2016 3:03 AM
  • User-1202100973 posted

    Hi Fei Han,

    Here is my detailed request. Sorry for such a long message.

    I have a Tree view . And Tree view by default has Checkbox.

    <div>

    And based on the scenario I need to convert it in to Radio Button.

    </div>

    string NodeId;

    NodeId = treeview.ID + "-" + sm.OptionLv1.OptionLv1Id;

    optionLevel1Node = new TreeNode(sm.OptionLv1.OptionLv1Id);

    //optionLevel1Node.ShowCheckBox = showCheckBoxes;

    optionLevel1Node.Text = sm.OptionLv1.Description;

    optionLevel1Node.ImageToolTip = sm.OptionLv1.OptionLv1Id;

    optionLevel1Node.ShowCheckBox = false;

    if (!showCheckBoxes)

    { optionLevel1Node.Text = "<input type='radio' id ='" + NodeId.ToString() + "' onchange='handleClick();'name='rdoC1" + redindex.ToString() + "' value ='" + optionLevel1Node.Value.ToString() + "' />" + optionLevel1Node.Text; }

    else { optionLevel1Node.Text = "<input type='checkbox' id ='" + NodeId.ToString() + "'  OnClick='handleCheckBoxClick();'name='rdoC1" + redindex.ToString() + "' value ='" + optionLevel1Node.Value.ToString() + "' />" + optionLevel1Node.Text; }

    optionLevel1Node.SelectAction = TreeNodeSelectAction.SelectExpand;

    optionLevel1Node.NavigateUrl = "javascript:void(0)";

     And here is my Dom  for both check box and radio button:

    Dom for 

     <table cellpadding="0" cellspacing="0" style="border-width:0;">

    <tbody><tr>

           <td><img src="/WebResource.axd?d=R7uUd3wj0q0LONa__zsaGCmybEknjdM7QSN_bTK04-pVNumrPFWoGpx7qeipq4kLgb-IMetgAty1XPFsmYlcy6uuIeFgJjzGC0k3dGDyCg3-gmrIxyl7dwe0BFe160Wa0&amp;t=635875296900000000" alt=""></td>

    Dom for Check Box:    

    <td style="white-space:nowrap;"><a href="javascript:void(0)" id="A3" style="text-decoration:none;"><input type="checkbox" id="Checkbox4" onclick="handleCheckBoxClick();" name="rdoC12" value="None">None</a></td>

    </tr>

    </tbody></table>

     Dom for Radio Button: 

    <table cellpadding="0" cellspacing="0" style="border-width:0;">

    <tbody><tr>

    <td><img src="/WebResource.axd?d=R7uUd3wj0q0LONa__zsaGCmybEknjdM7QSN_bTK04-pVNumrPFWoGpx7qeipq4kLgb-IMetgAty1XPFsmYlcy6uuIeFgJjzGC0k3dGDyCg3-gmrIxyl7dwe0BFe160Wa0&amp;t=635875296900000000" alt=""></td>

    <td style="white-space:nowrap;"><a href="javascript:void(0)" id="tv1t2" style="text-decoration:none;"><input type="radio" id="tv1-15" onchange="handleClick();" name="rdoC10" value="Volume of heavy liquid > 5% of total liquid by weight (light phase rate < heavy phase rate)">Volume of heavy liquid &gt; 5% of total liquid by weight (light phase rate &lt; heavy phase rate)</a></td>

    </tr>

    </tbody></table>

    Now In both the scenario when I click the text I need the Radio Button and Check box to be Checked/ Unchecked.

    Thank you for all the Help Fei Han.

    Tuesday, April 19, 2016 4:09 PM
  • User-1202100973 posted

    Hi Fei Han,

    Actually Even though I have multiple tab Panel all the tab panel start with tv i.e tv1,tv2,tv3.....

    So the above code should work fine. Unfortunately its not working . Its not firing $("a[id^='tv1']").click(function () {

    But the code is working when I run in a difference web page.

    In my actual code I have an event i,e for check box when the check box is checked:

    <script type="text/javascript">
    function handleCheckBoxClick() {
    //04/11/2016
    ClearReportTab()
    $("input[type='checkbox']").change(function () {
    /////
    if ($(this).val().toString().toLowerCase() == 'none') {
    /////
    if ($(this).attr('checked')) {
    $("input[type='checkbox']").each(function () {
    $(this).attr('checked', false);
    });
    $(this).attr('checked', true);
    }
    /////
    }
    /////
    else {

    $("input[type='checkbox']").each(function () {
    if ($(this).val().toString().toLowerCase() == 'none') {
    // alert("Hello");
    $(this).attr('checked', false);
    }

    });
    };

    });

    }


    </script>

    Can you please help me why your above code is not working for treeview (Div id="tv4")

    Wednesday, April 20, 2016 8:52 PM
  • User-1202100973 posted

    Hi Fei Han,

    Here  my Dom for the Tab Panel starts with tv4 . But I am not sure what I am missing.

    <div id="tv4">
    ............................


    </div>

    Wednesday, April 20, 2016 8:55 PM
  • User61956409 posted

    Hi Aditya_ven,

    Its not firing $("a[id^='tv1']").click

    Firstly, please check the actual client id of element in browser before you select the element.

    Secondly, I have shared you a sample code to check/uncheck checkboxes dynamically. You could do similar thing to find the radio button and make it checked or unchecked.

    //check
    $("input[type='radio']").attr("checked", "checked");
    //uncheck
    $("input[type='radio']").removeAttr("checked"); 
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 22, 2016 9:22 AM