1

I am trying to accomplish wherever in div I make a click it will mark input radio as selected item. In my situation it works only if I click on radio, on other places in same row it does not work

 <div class="row" style="padding-top:30px; cursor:pointer;"> 
    <div class="col-lg-1 col-xs-1"> 
        <div class="box"  style="margin-top:-15px"> 
            <input type="radio" name="order" class="form-radio" value="1" onclick="selectValue()" id="checkbox" />                                
        </div>                            
    </div>
    <div class="col-lg-6 col-xs-5">
        <div class="box">
           Mercedes CLS250
        </div>
    </div>
    <div class="col-lg-5 col-xs-5">
        <div class="box pull-right">
            <p style="text-align:right;">2000KB</p>
        </div>
    </div>
</div>


<div class="row" style="padding-top:30px; cursor:pointer;"> 
        <div class="col-lg-1 col-xs-1"> 
            <div class="box"  style="margin-top:-15px"> 
                <input type="radio" name="order" class="form-radio" value="2" onclick="selectValue()" id="checkbox" />                                
            </div>                            
        </div>
        <div class="col-lg-6 col-xs-5">
            <div class="box">
               Mercedes CLS350
            </div>
        </div>
        <div class="col-lg-5 col-xs-5">
            <div class="box pull-right">
                <p style="text-align:right;">300KB</p>
            </div>
        </div>
    </div>

I have used css cursor pointer but when I make a click it does not select chosen row.

mario
  • 11
  • 1
  • 1
    Could you transform your example into a runnable [mcve]? What you posted doesn't work in a browser and it's not clear what you're asking. To make it runnable use the `<>` button from edit mode and place HTML, CSS and JS in each panel. Also add any external resources, making sure it reproduces the same behavior as in your project. – tao Nov 25 '18 at 20:51

2 Answers2

1

If I understand your question correctly, you want to have a text block which when is clicked on, it triggers a click for the input radio button.

To do that, all you need is a label with the attribute of for="input_id_goes_here". Here's an example:

<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female">

With that code, anytime you click the label, then the input will get selected. If you want to know more about the for attribute, take a look at this question.

FYI, the onclick attribute is for JavaScript.

Let me know if this helps and if you have anymore questions.

Update

Another way to change a radio input when a block of text is selected, is to wrap your input with a label, like this:

<label>Female <input type="radio" name="gender" value="female"></label>

So for your code, all you have to do is change <div class="row"> to <label class="row">.

Thanks to @KoshVery for pointing it out in the comments below!

Jessica
  • 9,379
  • 14
  • 65
  • 136
  • if `input` is wrapped into `label` attributes `id` and `for` are not needed: ``. So all they need is change `
    ` to `
     – Kosh Nov 25 '18 at 21:00
  • 1
    @KoshVery, except it breaks the layout if you don't specify the `display` attribute. That's why you should **never** answer a question or provide a suggestion to improve one without actually testing. – tao Nov 26 '18 at 01:46
  • @AndreiGheorghiu, if you'd like nitpicking, there is no `display` attribute, `display` is a CSS property. The main idea was using `label` as a wrapper and I wrote my own answer, but saw that @SteveCahn had answered already. So I commented to improve their answer instead of posting mine. Your answer appeared 11 minutes later and as it's seen from its editions history it had a beautiful evolution. You've included @Paulus' answer either. So I'd like to notice that you should **never** copy other people's solutions to your answer. Cheers. – Kosh Nov 26 '18 at 02:40
  • @Kosh, I wrote a new answer because none of the existing ones were meeting what I hold as SO quality standard. Adding a [mcve] to an answer is where I draw the line between suggesting an improvement and my own answer. I suggest you revise your voting reasoning: who answers first is irrelevant on [SO]. It's all about the answer's quality. Whether it matters to you or not, or you believe it or not, I have noticed the duplicated ids in the snippet itself, not in Paulus's answer (for some reason I didn't read it until you pointed to it - most likely because of its poor formatting). – tao Nov 26 '18 at 03:21
  • @AndreiGheorghiu, I really appreciate your efforts, but SO quality standard you're holding has nothing in common with the very first edition of your answer. It's a known SO tactics: answer "meow" then replace it with a real solution and get score. But I believe it's more important for SO to help new contributors to post good answers and reward their attempts. – Kosh Nov 26 '18 at 04:44
  • @Kosh, when you say you appreciate my efforts you sound dishonest. The first edition of my answer was superior, as a SO answer, to the current edition of Steve's answer. It contained a working [mcve] and worked. You *"appreciated"* mine by down-voting while up-voting his. I agree with rewarding new contributor's efforts. But he ignored my initial suggestion to link the official spec. Which is why I never suggested another improvement. I added a better answer. What exactly should I reward? And what does "answer meow" mean? – tao Nov 26 '18 at 09:14
  • @AndreiGheorghiu, I like your final(?) answer, but I do not like how it appeared. That's it. Also I do not like your habit to judge and tell people their shoulds and should-nots, especially regarding commenting and voting. – Kosh Nov 26 '18 at 13:40
0

you have id = "checkbox" in both inputs. ids need to be unique

 <input type="radio" name="order" class="form-radio" value="2" 
 onclick="selectValue()" id="checkbox" />

if you want to fire the whole div when clicked, add the function to the whole row div

Henry Woody
  • 14,024
  • 7
  • 39
  • 56
Paulus
  • 11
  • 4