标签处于活动状态时如何选择收音机

Question

I'm making a website where you can select a couple of options to create your own boat. I need to select radio buttons that are hidden behind a label, so in order to select them I'm writing some JS that does that exact thing.

Here is a small amount of code that contains the particular problem (this code is used in the whole website).

<div class="row specs">
    <div class="subtitle">Hull Colour</div>
    <div class="fourcol">
        <label class="item" id="white">
            <img src="images/8meter-outboard.jpg"> 
            <div class="price">Orange</div>
            <input class="form-input" data-color="white" name="color" type="radio" value="white" id="white_radio" />
        </label>
    </div>

    <div class="fourcol">
        <label class="item" id="Test">
            <img src="images/8meter-outboard.jpg"> 
            <div class="price">Grey</div>
            <input data-color="grey" name="color" type="radio" value="Test">
        </label>
    </div>

    <div class="fourcol last">
        <label class="item" id="orange">
            <img src="images/8meter-outboard.jpg"> 
            <div class="price">White</div>
            <input data-color="orange" name="color" type="radio" value="orange">
        </label>
    </div>
</div>

the JS:

$('.item').on('click', function(e){
      e.preventDefault();
      $(this).toggleClass('done');
      document.getElementById('this').checked = true;
    });

Without my Javascript, this markup seems to work. I want to put the display of the <input> on none at the end

Answer 1

You can utilize native HTML to achieve what you are trying to do. As Josh Sanger mentioned, when the for attribute is assigned to a label , a hook into the input for that label is instantiated automatically. As long as the targeted input has a match id attribute it will be linked. Once that hook has been made, you can use some basic jQuery selector mechanics to add classes to the HTML elements that you want appear differently.

Make certain that the input tag for the label is within the label so that bound click events will properly trigger it.

 $('input[type="radio"]').on('click', function(e) { var colorDiv = $(this).closest($('div.fourcol')).find($('.price')); var removeSelected = $('div.fourcol').find($('.price').not($(this))); $(removeSelected).removeClass('done'); $(colorDiv).addClass('done'); }); 

 .orange, .gray, .white { width: 48px; height: 48px; font-size: .79em; text-align: center; } .orange { background-color: orange; border: solid 1px orange; } .gray { background-color: #CCC; border: solid 1px #CCC; } .white { background-color: #FFF; border: solid 1px #FFF; } input { float: left; display: inline-block; clear: none; } .row.specs { width: 250px; } .price.noColor { border: solid 1px #ACE; } .noColor { width: 48px; height: 48px; text-align: center; font-family: arial; font-size: 35px; color: red; } .fourcol { display: inline-block; vertical-align: top; font-family: arial; } .done { border: dashed 1px green; } .price.noColor.done { border: dashed 1px green; } body{ background-color: #DDE; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="row specs"> <div class="subtitle">Hull Colour</div> <div class="fourcol"> <label class="item" for="orange_radio"> <div class="price orange">Orange</div> </label> <input data-color="orange" name="color" type="radio" value="orange" id="orange_radio" /> </div> <div class="fourcol"> <label class="item" for="grey_radio"> <div class="price gray">Grey</div> </label> <input data-color="grey" name="color" type="radio" value="gray" id="grey_radio" /> </div> <div class="fourcol"> <label class="item" for="white_radio"> <div class="price white">White</div> </label> <input data-color="white" name="color" type="radio" value="white" id="white_radio" /> </div> <div class="fourcol"> <label class="item" for="noColor_radio"> <div class="price noColor">X</div> </label> <input data-color="nocolor" name="color" type="radio" value="nocolor" id="noColor_radio" /> </div> </div>