Selecting text with checkboxes

Discussion in 'JavaScript' started by HydroPirana, Apr 20, 2013.

0
  1. #1
    What I'm trying to do is create a web page with the short codes for g+ themes.
    Each of the themes is a line of text that has to be copied and pasted.

    I am putting a Checkbox in front of each line of text. What I want to do is when the Checkbox is ticked it must highlight that line of text so that you can right click and copy.

    The problem is:
    The selecting of the text only works if you select them in sequence. If I for example want to skip one line it does not select the next line, I have to first select the line in between and then I can select the next line.

    Here is the code I have:

    <!DOCTYPE html>
<html>
    <head>
        <title>MultipleSelectCheckBox</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
       
        <script type="text/javascript">
    function selectText(containerid) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(document.getElementById(containerid));
            range.select();
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(document.getElementById(containerid));
            window.getSelection().addRange(range);
        }
    }
</script>
 
      <script type="text/javascript">
        function OnChangeCheckbox (checkbox, containerid)
        {
            if (checkbox.checked)
                {
                    selectText(containerid);
                }
            else {
               
                }
        }
    </script>
   
    <table>
        <tr><td id="myTd1"><input type="checkbox" onclick="OnChangeCheckbox (this, 'myTd1');" id="myCheckbox1" />Sample check box<br/></td></tr>
        <tr><td id="myTd2"><input type="checkbox" onclick="OnChangeCheckbox (this, 'myTd2');" id="myCheckbox2" />Sample check box<br/></td></tr>
        <tr><td id="myTd3"><input type="checkbox" onclick="OnChangeCheckbox (this, 'myTd3');" id="myCheckbox3" />Sample check box<br/></td></tr>
        <tr><td id="myTd4"><input type="checkbox" onclick="OnChangeCheckbox (this, 'myTd4');" id="myCheckbox4" />Sample check box<br/></td></tr>
        <tr><td id="myTd5"><input type="checkbox" onclick="OnChangeCheckbox (this, 'myTd5');" id="myCheckbox5" />Sample check box<br/></td></tr>
    </table> 
    </body>
</html>
    Code (markup):
    Can anybody point me in the right direction?
     
    HydroPirana, Apr 20, 2013 IP