1

EDIT: here is a jsfiddle with all the code. https://jsfiddle.net/ypbd3fgf/2/

I'm using this simple code to add a class to a parent element in order to make the text on a selected radio button turn bold. However, it only works on page load. If you select different radio buttons, the newly selected buttons don't turn bold. I think it's because the code only runs on page load. How do I get it to update when a new radio button or checkout is selected? Thanks!

<script type="text/javascript"> 
$(function() {
        $(".ez-selected").closest('.row').addClass("bold");
}); 
</script>

The is the HTML. The .ez-selected class is added to the .ez-radio div when a radio button is selected. And then removed when a different radio button is selected. When the .ez-selected class is added, the .bold class needs to be added to the .row div. When the .ez-selected class is removed the .bold class needs to be removed from the .row div. 

  <div class="row (bold)">
        <input name="TXT870" type="hidden" value="Option 1">
        <div class="col-xs-2">
            <div class="ez-radio (ez-selected)">
                <input class="clearBorder ez-hide" name="CAG3" onclick=
                "javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);"
                type="radio" value="870_625_0_625">
            </div><input name="CAG3QF1" type="hidden" value="0">
        </div>
        <div class="col-xs-7">
            <span>Option 1</span> <input class="transparentField" name=
            "CAG3TX1" readonly size="14" type="text" value=" - Add $5.00">
        </div>
    </div>

EDIT: I added the JS code below that adds and removes the .ez-selected class. This new JS that I'm trying to make will simply be adding and removing the bold class when the .ez-selected class is added and removed by this other JS code below.

(function($) {
    $.fn.ezMark = function(options) {
        options = options || {};
        var defaultOpt = {
            checkboxCls: options.checkboxCls || 'ez-checkbox',
            radioCls: options.radioCls || 'ez-radio',
            checkedCls: options.checkedCls || 'ez-checked',
            selectedCls: options.selectedCls || 'ez-selected',
            hideCls: 'ez-hide'
        };
        return this.each(function() {
            var $this = $(this);
            var wrapTag = $this.attr('type') == 'checkbox' ?
                '<div class="' + defaultOpt.checkboxCls + '">' :
                '<div class="' + defaultOpt.radioCls + '">';
            if ($this.attr('type') == 'checkbox') {
                $this.addClass(defaultOpt.hideCls).wrap(wrapTag)
                    .change(function() {
                        if ($(this).is(':checked')) {
                            $(this).parent().addClass(
                                defaultOpt.checkedCls);
                        } else {
                            $(this).parent().removeClass(
                                defaultOpt.checkedCls);
                        }
                    });
                if ($this.is(':checked')) {
                    $this.parent().addClass(defaultOpt.checkedCls);
                }
            } else if ($this.attr('type') == 'radio') {
                $this.addClass(defaultOpt.hideCls).wrap(wrapTag)
                    .change(function() {
                        $('input[name="' + $(this).attr(
                            'name') + '"]').each(
                            function() {
                                if ($(this).is(
                                    ':checked')) {
                                    $(this).parent().addClass(
                                        defaultOpt.selectedCls
                                    );
                                } else {
                                    $(this).parent().removeClass(
                                        defaultOpt.selectedCls
                                    );
                                }
                            });
                    });
                if ($this.is(':checked')) {
                    $this.parent().addClass(defaultOpt.selectedCls);
                }
            }
        });
    }
})(jQuery);
Gitman
  • 41
  • 7
  • Run it in the `click` event handler for the buttons. – Barmar Jul 16 '16 at 03:12
  • You should use the label element, not the span element. You should also consider just using CSS and not bothering with JS. It's unnecessary and adds complexity. Check out this... http://stackoverflow.com/questions/4641752/css-how-to-style-a-selected-radio-buttons-label – MyItchyChin Jul 16 '16 at 04:02
  • You don't need to run the code twice. Look into even propagation. You need to add your handler on a static parent and get the event target. Maybe add a fiddle with complete code so we can better help. – Yasin Yaqoobi Jul 16 '16 at 04:02

2 Answers2

0

Edit: The new code switches to the function(){...} format and looks for a click event on an input element then checks if its a radio button and that the parent is .row then it adds the bold and ez-selected classes to the radio button and removes them from other radios.

$("input").click(function() {
    if($(this).attr('type') == 'radio' && $(this).parents('.row').length > 0){
        $("input").closest('.row').removeClass('bold ez-selected');
        $(this).addClass('bold ez-selected');
     }
})
MacroSacramento
  • 108
  • 1
  • 8
  • I appreciate the response, but could you show me how the entire js would look, including the code in my first post? The bold class is added to .row whenever .ez-selected is a child of the .row parent. The .ez-selected class is added and removed by the js depending on whether or not a radio button is selected. I added the HTML to my first post so you can see what I'm doing. – Gitman Jul 16 '16 at 03:29
  • @Gitman I edited the code to reflect your requests, I also assumed that you'd use multiple radio buttons that's why I used a remove statement for the other radios – MacroSacramento Jul 16 '16 at 03:51
  • Thanks, but now it doesn't do anything. The bold class isn't added to the input, it's added to the .row parent. I edited my first post to illustrate this. When the JS that controls the radio button images adds the .ez-selected class as shown in my first post, the .bold class gets added to the parent .row. Then when the JS removes the .ez-selected class as shown in my HTML code, the .bold class needs to be removed from the .row parent. – Gitman Jul 16 '16 at 03:57
0

your code should look somewhat like this:

<script type="text/javascript"> 
    $(function() {
        $("input[type='radio']").click(function(e) {
            var targ = e.target
            $("div[class='row'][class='bold']).removeClass('bold');
            $(targ).parents('div[class="row"]').addClass('bold');
        })

        $(".ez-selected").closest('.row').addClass("bold");
    }); 
</script>
Utkarsh Kaushik
  • 901
  • 1
  • 6
  • 14
  • Hey, I thought that was going to work, but it doesn't do anything. I edited my first post and tried to clarify what the JS needs to do. – Gitman Jul 16 '16 at 04:09
  • First it is removing all bold and ez-selected next it is adding them in the divs related to the current radio. Let me know what you get there. – Utkarsh Kaushik Jul 16 '16 at 04:25
  • I apologize, maybe I wasn't clear enough. There is another JS that adds and removes the .ez-selected class. This new JS that I'm making will simply be adding and removing the .bold class whenever the other JS adds and removes the .ez-selected class. Please see my first post again. – Gitman Jul 16 '16 at 04:32
  • In that case we only need to remove the code related to the radio object classes. have changed the answer again. Please verify. – Utkarsh Kaushik Jul 16 '16 at 06:18
  • It still does nothing. Look at the first little JS I posted, that actually works. The problem is that it only works on the page load. When you change the radio button selections, the new selections don't change to bold and the original selections stays bold. Is there enough code in my first post to make a jsfiddle? – Gitman Jul 16 '16 at 07:18