Dynamic title with selected items

Question

How can you make the selected СЛОВОСОЧЕТАНИЕ in the header СЛОВОСОЧЕТАНИЕ for example: Словосочетание: "Выбранный пункт из левого столбца" + "Выбранный пункт из правого столбца"

 $(".child1 input").on("click", function() { $(".child1 input").removeAttr("checked"); // Снимаем чекбокс со всей группы $(this).prop("checked", true); // Оставляем выбранный чекбокс }); $(".child2 input").on("click", function() { $(".child2 input").removeAttr("checked"); // Снимаем чекбокс со всей группы $(this).prop("checked", true); // Оставляем выбранный чекбокс });

 .parrent { width: 50%; border: 1px solid black; display: inline-block; } .child1 { width: 50%; border: 1px solid black; display: inline-block; } .child2 { width: 45%; border: 1px solid black; display: inline-block; } #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/3.3.1/jquery.min.js"></script> <div class="parrent"> <center><span>словосочетание:</span></center><br> <div class="child1"> <label> <input type="checkbox" name="rand" checked style="display:none"/> <span id="word_opt">случайное</span> </label><br> <label> <input type="checkbox" name="rand" style="display:none"/> <span id="word_opt">существительное</span> </label><br> <label> <input type="checkbox" name="adject" style="display:none"/> <span id="word_opt">прилагательное</span> </label><br> <label> <input type="checkbox" name="verb" style="display:none"/> <span id="word_opt">глагол</span> </label> </div> <div class="child2"> <label> <input type="checkbox" name="rand" checked style="display:none"/> <span id="word_opt">случайное</span> </label><br> <label> <input type="checkbox" name="rand" style="display:none"/> <span id="word_opt">существительное</span> </label><br> <label> <input type="checkbox" name="adject" style="display:none"/> <span id="word_opt">прилагательное</span> </label><br> <label> <input type="checkbox" name="verb" style="display:none"/> <span id="word_opt">глагол</span> </label> </div> </div>

example

Alex Bryk Alex Bryk 101 five · Accepted Answer · 2018-12-13T11:13:51

The previous speaker is right about the class instead of the id and value attribute. But your code for a choice at the 2nd and more choice does not remove the previous ones. Here is my version (the text output version can be corrected in the function):

 $(".child1 input").on("click", function() { $('.child1 input').not(this).prop('checked', false); $(this).prop("checked", true); setWordCombination(); }); $(".child2 input").on("click", function() { $('.child2 input').not(this).prop('checked', false); $(this).prop("checked", true); setWordCombination(); }); function setWordCombination(){ let child1Text = $(".child1 input:checked + .word_opt").text(); let child2Text = $(".child2 input:checked + .word_opt").text(); $("#word-combination").text(child1Text + ' + ' + child2Text); }

 .parrent { width: 50%; border: 1px solid black; display: inline-block; } .child1 { width: 50%; border: 1px solid black; display: inline-block; } .child2 { width: 45%; border: 1px solid black; display: inline-block; } #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/3.3.1/jquery.min.js"></script> <div class="parrent"> <center><span>словосочетание: </span><span id="word-combination"></span></center><br> <div class="child1"> <label> <input type="checkbox" name="rand" checked style="display:none"/> <span class="word_opt">случайное</span> </label><br> <label> <input type="checkbox" name="rand" style="display:none"/> <span class="word_opt">существительное</span> </label><br> <label> <input type="checkbox" name="adject" style="display:none"/> <span class="word_opt">прилагательное</span> </label><br> <label> <input type="checkbox" name="verb" style="display:none"/> <span class="word_opt">глагол</span> </label> </div> <div class="child2"> <label> <input type="checkbox" name="rand" checked style="display:none"/> <span class="word_opt">случайное</span> </label><br> <label> <input type="checkbox" name="rand" style="display:none"/> <span class="word_opt">существительное</span> </label><br> <label> <input type="checkbox" name="adject" style="display:none"/> <span class="word_opt">прилагательное</span> </label><br> <label> <input type="checkbox" name="verb" style="display:none"/> <span class="word_opt">глагол</span> </label> </div> </div>

Immediately there are comments: "// Remove the checkbox from the entire group // We leave the selected checkbox" But the first line removes from all only with the first choice.
and in the title, then the idea might be a few words: a person wanted an adjective + a noun + a verb + another noun.
@humster_spb that's how I understood this phrase: <the selected items were displayed for example: Phrase: "Selected item from the left column" + "Selected item from the right column">

humster_spb humster_spb 6,680 one eight 29 · Answer 2 · 2018-12-13T11:05:46

First, you need to replace id = "word_opt" with class = "word_opt" (in css, respectively, change # to.), Because duplicate id is a DIFFERENT error: the identifier must be unique.

Secondly, you add the value attribute to your input, where you write the same thing that is displayed in your spans.

Third, create a variable in which to write the transmitted words and output in the header:

 let spanText = 'словосочетание: '; $(".child1 input").on("click", function() { $(".child1 input").removeAttr("checked"); // Снимаем чекбокс со всей группы $(this).prop("checked", true); // Оставляем выбранный чекбокс spanText += $(this).val()+' '; $('center span').text(spanText); }); $(".child2 input").on("click", function() { $(".child2 input").removeAttr("checked"); // Снимаем чекбокс со всей группы $(this).prop("checked", true); // Оставляем выбранный чекбокс spanText += $(this).val()+' '; $('center span').text(spanText); });

 .parrent { width: 50%; border: 1px solid black; display: inline-block; } .child1 { width: 50%; border: 1px solid black; display: inline-block; } .child2 { width: 45%; border: 1px solid black; display: inline-block; } .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/3.3.1/jquery.min.js"></script> <div class="parrent"> <center><span>словосочетание:</span></center><br> <div class="child1"> <label> <input type="checkbox" value="случайное" name="rand" checked style="display:none"/> <span class="word_opt">случайное</span> </label><br> <label> <input type="checkbox" value="существительное" name="rand" style="display:none"/> <span class="word_opt">существительное</span> </label><br> <label> <input type="checkbox" value="прилагательное" name="adject" style="display:none"/> <span class="word_opt">прилагательное</span> </label><br> <label> <input type="checkbox" value="глагол" name="verb" style="display:none"/> <span class="word_opt">глагол</span> </label> </div> <div class="child2"> <label> <input type="checkbox" value="случайное" name="rand" checked style="display:none"/> <span class="word_opt">случайное</span> </label><br> <label> <input type="checkbox" value="существительное" name="rand" style="display:none"/> <span class="word_opt">существительное</span> </label><br> <label> <input type="checkbox" value="прилагательное" name="adject" style="display:none"/> <span class="word_opt">прилагательное</span> </label><br> <label> <input type="checkbox" value="глагол" name="verb" style="display:none"/> <span class="word_opt">глагол</span> </label> </div> </div>

Dynamic title with selected items

2 answers 2

More articles: