Checkbox checkbox radio effect

Introduce jQuery first

[note the jQuery version]

 

The main principle of realizing this function:
judge whether the current object is selected by is(':checked '), and set the attributes of the selected object and sibling elements

HTML：

<div class="judge-box">
                        <span>Whether it is a property company:</span>
                        <label>是</label>
                        <input id="check-area1" type="checkbox" name="checkBox" value="是">
                        <label class="judge-box-no">否</label>
                        <input id="check-area2" type="checkbox" name="checkBox" value="否">
</div>

 

JS：

$(document).ready(function(){
      $("input[name='checkBox']:checkbox").click(function(){
            if($(this).is(':checked')){
                $(this).attr('checked',true).siblings().attr('checked',false);
            }else{
                $(this).attr('checked',false).siblings().attr('checked',false);
            }
             str = $(this).attr("value");
            // console.log(str) get and print the selected item --- yes/no
        });
})

 

Because some need to add styles, so that the lable is not at the same level, so the method is limited

I just summed up a relatively low method,

<div class="widthDraw-area">
            <div class="checkArea area-top">
                <span>Withdrawal to WeChat red envelope</span>
                <section>
                    <div class="checkbox-area">
                        <input type="checkbox" value="1" id="checkboxInputOne" name="checkBoxJudge" checked/>
                        <label for="checkboxInputOne"></label>
                    </div>
                </section>
            </div>
            <div class="checkArea area-bottom">
                <span>Withdrawal to bank card</span>
                <section>
                    <div class="checkbox-area">
                        <input type="checkbox" value="2" id="checkboxInputTwo" name="checkBoxJudge"/>
                        <label for="checkboxInputTwo"></label>
                    </div>
                </section>
            </div>
        </div>

 For example, now my lable is not at the same level, at this time, I can use jQuery to judge and deal with it according to the situation.

$(document).ready(function () {//Single selection
        $("input[name='checkBoxJudge']:checkbox").click(function(){
            if($(this).is(':checked')){
                //console.log($(this).attr('id'))
                if($(this).attr('id') === 'checkboxInputOne'){
                    $('#checkboxInputTwo').attr('checked',false);
                    $('#checkboxInputOne').attr('checked',true);
                }else{
                    $('#checkboxInputTwo').attr('checked',true);
                    $('#checkboxInputOne').attr('checked',false);
                }
            }else{
                $('#checkboxInputTwo').attr('checked',false);
                $('#checkboxInputOne').attr('checked',false);
            }
        });
    });

 Here I get the element id to judge and process, and I will share the summary later when there is a better method.