Question

我有两个div作为复选框选择。我想一次只选择一个div，所以如果我选择option1，我会看到它上面的红色边框，但如果我选择选项2，红色边框应该只在选项2附近。就像一个单选按钮行为。

另外，有没有更有效的方法来编写jquery？我觉得这两个代码块可以合并但不确定究竟是多少

$('#reg_option_1').on('click', function () {
    if (!$(this).is('.checked')) {
        $(this).addClass('checked');
        $('#reg_option_1_check').prop('checked', true);
    } else {
        $(this).removeClass('checked');
        $('#reg_option_1_check').prop('checked', false);
    }
});

$('#reg_option_2').on('click', function () {
    if (!$(this).is('.checked')) {
        $(this).addClass('checked');
        $('#reg_option_2_check').prop('checked', true);
    } else {
        $(this).removeClass('checked');
        $('#reg_option_2_check').prop('checked', false);
    }
});

HTML：

<div class="registration_form_option" id="reg_option_1">Individual</div>
<div class="registration_form_option" id="reg_option_2">Business</div>


<input type="checkbox" id="reg_option_1_check" name="reg_option_1_check" value="1" />
<input type="checkbox" id="reg_option_2_check" name="reg_option_2_check" value="2" />

Answer 1

查看小提琴here

<强> HTML

<div id="divParent1" class="parentDiv">
    Group 1
    <div id="child1" class="childDiv">
        Child 1
    </div>

    <div id="child2" class="childDiv">
        Child 2
    </div>
</div>

<强> CSS

.parentDiv{
 border:1px solid black;
 padding:10px;
 width: 80px; 
 margin:5px;  
 display:relative;
}
.childDiv{
  border:1px solid blue;
  height: 50px;   
  margin:10px;
}
.parentDiv{
 border:1px solid black;
 padding:10px;
 width: 80px; 
 margin:5px;  
 display:relative;
}
.childDiv{
  border:1px solid blue;
  height: 50px;   
  margin:10px;
}

<强>的Javascript

$('.childDiv').click(function(){
    $(this).parent().find('.childDiv').css('background-color','#ffffff');
    $(this).css('background-color','#ff0000');
});

此fiddle

中更简单的解决方案

试试..

Answer 2

试试这个：

$('#reg_option_1,#reg_option_2').on('click', function () {
    $('.registration_form_option').not(this).removeClass('checked');
        $(this).addClass('checked');
        $(':checkbox').not(this).prop('checked', false);
        $('#'+this.id+'_check').prop('checked', true);
});

<强> DEMO

Answer 3

这可以在带有单选按钮和伪选择器的纯css中完成。

<input type="radio" id="reg_option_1" name="reg_option" value="1" />
<label class="registration_form_option" for="reg_option_1">Individual</label>
<input type="radio" id="reg_option_2" name="reg_option" value="2" />
<label class="registration_form_option" for="reg_option_2">Business</label>

[type=radio]{
    display:none;
}
[type=radio]:checked + label{
    border:solid 2px red
}

新小提琴：http://jsfiddle.net/fww2u1Lf/4/

Answer 4

您可以将其缩短为：

$('.registration_form_option').on('click', function () {
    $('.registration_form_option').not(this).removeClass('checked');
    $(this).toggleClass('checked');
    $('input:checkbox').prop('checked',function(i){
        return  $('.registration_form_option').eq(i).hasClass('checked')
    });
});

<强> jsFiddle example

Answer 5

DEMO：http://jsfiddle.net/fww2u1Lf/2/

我只是在所有操作之前重置所有内容以获得所需的结果，这不是最有效的。只是一个快速的脏修复。

$('#reg_option_1').on('click', function () {
        $('#reg_option_2_check').prop('checked', false);  // reset
        $('#reg_option_2').removeClass('checked');  // reset
        if (!$(this).is('.checked')) {
            $(this).addClass('checked');
            $('#reg_option_1_check').prop('checked', true);
        } else {
            $(this).removeClass('checked');
            $('#reg_option_1_check').prop('checked', false);
        }
    });

    $('#reg_option_2').on('click', function () {
        $('#reg_option_1_check').prop('checked', false);  // reset
        $('#reg_option_1').removeClass('checked');  // reset
        if (!$(this).is('.checked')) {
            $(this).addClass('checked');
            $('#reg_option_2_check').prop('checked', true);
        } else {
            $(this).removeClass('checked');
            $('#reg_option_2_check').prop('checked', false);
        }
    });

Answer 6

在这里，简单明了： DEMO

$('.registration_form_option').on('click', function () {
    if (!$(this).is('.checked')) {
        $('.registration_form_option').removeClass('checked');
        $('input[type=checkbox]').prop('checked',false);
        $(this).addClass('checked');
        $('#'+$(this).attr('id')+'_check').prop('checked', true);
    } else {
        $(this).removeClass('checked');
        $('#reg_option_2_check').prop('checked', false);
    }
});

图像为复选框，仅允许一个选择

6 个答案: