Линия соединяющая чекбоксы, находящиеся в разных блоках

#html #jquery #css

У меня есть два блока с чекбоксами, и нужно чтобы выбранные чекбоксы (как правило
 один из каждого блока) соединялись линией. Как и какими средствами это можно сделать? 



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;
}


    

        
              
              случайное
        
        

        
            
            существительное
        
        

        
            
            прилагательное
        
        

        
            
            глагол
        
    
    

         
            
            случайное
        
        

        
            
            существительное
        
        

        
            
            прилагательное
        
        

        
            
            глагол
        
    


   



вот такая линия, только черная

    

Ответы

Ответ 1

Немного внёс изменения в CSS, т.ч. будьте внимательны:



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;
}


  

  

    
      
      случайное
    

    
      
      существительное
    

    
      
      прилагательное
    

    
      
      глагол
    
  
  

    
      
      случайное
    

    
      
      существительное
    

    
      
      прилагательное
    

    
      
      глагол