I have two blocks with checkboxes, and I need the selected checkboxes (usually one of each block) to be connected by a line. How and by what means can this be done?

function setWordCombination(){ let child1Text = $(".w_option_left input:checked + .word_opt").text(); let child2Text = $(".w_option_right input:checked + .word_opt").text(); $("#word_combination").text(child1Text + ' + ' + child2Text); } /*<--1 чекбокс-->*/ $(".w_option_left input").on("click", function() { $('.w_option_left input').not(this).prop('checked', false); $(this).prop("checked", true); setWordCombination(); }); $(".w_option_right input").on("click", function() { $('.w_option_right input').not(this).prop('checked', false); $(this).prop("checked", true); setWordCombination(); }); 
 .words_status { border: 1px solid black; width: 100%; display: inline-block; } .w_option_right { border: 1px solid black; display: inline-block; width: 48%; text-align: center; } .w_option_left { border: 1px solid black; display: inline-block; width: 50%; text-align: center; } .word_opt { display: inline-block; width: 150px; height: 26px; -webkit-appearance: none; -moz-appearance: none; background: #fefefe; outline: none; border-radius: 19px; transition: 0.2s; position: relative; cursor: pointer; } :checked[type="checkbox"] + .word_opt { background: #7f2929; color: #fefefe; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="words_status"> <div class="w_option_left"> <label> <input type="checkbox" name="rand" value="случайное" checked style="display:none"/> <span class="word_opt">случайное</span> </label> <br> <label> <input type="checkbox" name="noun" value="существительное" style="display:none"/> <span class="word_opt">существительное</span> </label> <br> <label> <input type="checkbox" name="adject" value="прилагательное" style="display:none"/> <span class="word_opt">прилагательное</span> </label> <br> <label> <input type="checkbox" name="verb" value="глагол" style="display:none"/> <span class="word_opt">глагол</span> </label> </div> <div class="w_option_right"> <label> <input type="checkbox" name="rand" value="случайное" checked style="display:none"/> <span class="word_opt">случайное</span> </label> <br> <label> <input type="checkbox" name="noun" value="существительное" style="display:none"/> <span class="word_opt">существительное</span> </label> <br> <label> <input type="checkbox" name="adject" value="прилагательное" style="display:none"/> <span class="word_opt">прилагательное</span> </label> <br> <label> <input type="checkbox" name="verb" value="глагол" style="display:none"/> <span class="word_opt">глагол</span> </label> </div> </div>
such a line, only black such a line, only black

    1 answer 1

    Slightly made changes to CSS, t.ch. be careful:

     function setWordCombination() { let child1Text = $(".w_option_left input:checked + .word_opt"); let child2Text = $(".w_option_right input:checked + .word_opt"); $("#word_combination").text($(child1Text).text() + ' + ' + $(child2Text).text()); let oMidLine = $(".mid_line"); $(oMidLine).height(Math.abs($(child1Text).position().top - $(child2Text).position().top)); $(oMidLine).css("top", Math.min($(child1Text).position().top, $(child2Text).position().top) + 13 + "px"); } /*<--1 чекбокс-->*/ $(".w_option_left input").on("click", function() { $('.w_option_left input').not(this).prop('checked', false); $(this).prop("checked", true); setWordCombination(); }); $(".w_option_right input").on("click", function() { $('.w_option_right input').not(this).prop('checked', false); $(this).prop("checked", true); setWordCombination(); }); 
     * { box-sizing: border-box; } .words_status { border: 1px solid blue; position: relative; display: inline-block; width: 100%; } .words_status input[type="checkbox"] { display: none; } .w_option_left, .w_option_right { height: 100%; width: 50%; padding: .5em 0; overflow: hidden; text-align: center; } .w_option_left { float: left; } .w_option_right { float: right; } .word_opt { display: inline-block; width: 150px; height: 26px; line-height: 24px; background: #fefefe; outline: none; border-radius: 13px; transition: 0.2s; cursor: pointer; position: relative; } :checked[type="checkbox"]+.word_opt { background: #7f2929; color: #fefefe; } .w_option_left input[type="checkbox"]:checked+.word_opt:after, .w_option_right input[type="checkbox"]:checked+.word_opt:after { content: ''; top: 50%; position: absolute; width: 300%; height: 0; border: 1px solid red; } .w_option_left input[type="checkbox"]:checked+.word_opt:after { left: 105%; } .w_option_right input[type="checkbox"]:checked+.word_opt:after { right: 105%; } .mid_line { position: absolute; top: 21px; left: 50%; z-index: 300; height: 0; width: 0; border: 1px solid red; } 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="words_status"> <div class="mid_line"></div> <div class="w_option_left"> <label> <input type="checkbox" name="rand" value="случайное" checked /> <span class="word_opt">случайное</span> </label><br> <label> <input type="checkbox" name="noun" value="существительное" /> <span class="word_opt">существительное</span> </label><br> <label> <input type="checkbox" name="adject" value="прилагательное" /> <span class="word_opt">прилагательное</span> </label><br> <label> <input type="checkbox" name="verb" value="глагол" /> <span class="word_opt">глагол</span> </label> </div> <div class="w_option_right"> <label> <input type="checkbox" name="rand" value="случайное" checked /> <span class="word_opt">случайное</span> </label><br> <label> <input type="checkbox" name="noun" value="существительное" /> <span class="word_opt">существительное</span> </label><br> <label> <input type="checkbox" name="adject" value="прилагательное" /> <span class="word_opt">прилагательное</span> </label><br> <label> <input type="checkbox" name="verb" value="глагол" /> <span class="word_opt">глагол</span> </label> </div> </div> <div id="word_combination"></div>

    • one
      Great answer! It will be a good tool for people who are looking for an answer to such problems - Alexandr_TT