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

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.

Answer 1

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

Answer 2

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

 

 

 

Answer 3

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.

Answer 4

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")

Answer 5

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>

Answer 6

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