asked    Zenobia     2018-10-22       javascript       48 view        2 Answers

[SOLVED] Click on <a> text to checked input

How can I make sure that when I click on the text in <a> the checkbox is activated? Now when someone click on the text of the checkbox the drop down menu closes. This is a simple snippet:

<div id="divChooseMacro" class="dropdown-menu" aria labelledby="choose-macro">
    <a class='dropdown-item' data-value='pippo' style='cursor: pointer;'> 
        <input type='checkbox' value='pippo'/>&nbsp; pippo 
    </a>
</div>

I try to set a cursor: pointer in the tag <a> but without success

  2 Answers  

        answered    Edward     2018-10-22      

I suggest you to use label tag to relate it to the checkbox. Also, I've inserted some different semantic tags in your code: feel free to change it back.

About dropdown closing, you can stop click event to propagete at checkbox toggle its check, so bootstrap event listener for click would not be triggered

<ul id="divChooseMacro" class="dropdown-menu" aria labelledby="choose-macro">
  <li class='dropdown-item' data-value='pippo' style='cursor: pointer;'> 
    <label class='dropdown-item' onclick='event.stopPropagation();'> 
      <input type='checkbox' value='pippo'/>&nbsp; pippo 
    </label>
  </li>
</ul>


        answered    Selena     2018-10-22      

Just convert your a into a label, then when you click on the text, it checks the checkbox.

Demo

<div id="divChooseMacro" class="dropdown-menu" aria labelledby="choose-macro">
    <label class='dropdown-item' data-value='pippo' style='cursor: pointer;'> 
        <input type='checkbox' value='pippo'/>&nbsp; pippo 
    </label>
</div>

<div id="divChooseMacro" class="dropdown-menu" aria labelledby="choose-macro">
    <label class='dropdown-item' data-value='pippo' style='cursor: pointer;'> 
        <input type='checkbox' value='222'/>&nbsp; 222 
    </label>
</div>




Your Answer





 2018-10-22         Susan

How can i add multiple HTML files to WebKit View?

IntroductionI'm designing a historical application.I want to add multiple HTML files into WebKit View. I don't have any idea how to do this.ExampleWhen I click to "Button 1" webkit loads "file1.html". I didn't write anything about code I am quite confused. Any help would be appreciated. Well, there is a lot of ways to do it but I'm gonna give an example for easiest one. Just create a method for loading .html file and invoke or call it under action button.For example : import UIKitimport WebKitclass ExampleController: UIViewController {@IBOutlet weak var myButton: UIButto...
 ios                     1 answers                     25 view
 2018-10-22         Ula

Regex match string which does not fully consist of angular expressions

I've the pleasure to find all strings in our projects which are not angularjs expressions because we're going multi language (so every string which is not fully between curly braces).What I wanna do is build a regex which matches all strings, which have no angular expressions (or part of the string is no angular expression).The var names describe which should match (yes) and which shouldn't (nope).var yes = "test";var nope = "{{xyz}}";var yes = "test {{xyz}}";var nope = "{{::xyz}}";var nope = "{{xyz}} {{abc}}"; //as whitespace is okayTried a lot of different stuff using neg...
 javascript                     2 answers                     25 view
 2018-10-22         Otis

how to test private function outside react component

I have a private function outside component. It sounds more convenient to do test for function alone better than test it inside MyComponent, but it's private not exported.function func(){ return something;}export default class MyComponent extends Component {render <SomeComponent someProp={func()} />}I use mocha and enzyme for test and I wonder if there is anyway to test private function rather than test it inside the component. func is defined in module scope. It's not possible to reach variables outside the scope they were defined in JavaScript.Even if func were e...
 javascript                     2 answers                     28 view