如何根据单选按钮和复选框数据的组合选择按钮 URL？

Question

我可以用Javascript做到这一点吗？

====

==========这是我需要的设置：

单选按钮按钮 按钮 1 按钮 2(默认(
按钮

3

复选框
未选中(默认(
已选中

按钮 URL 1 ： 按钮 1 + 未选中 URL 2 ： 按钮 2 + 未选中(默认(
URL 3 ： 按钮 3 + 未选中 URL 4 ： 按钮 1 + 选中
URL 5 ： 按钮 2 + 选中 URL 6 ： 按钮 3 + 选中

—————————

这是我在上面设置减去Javascript的谦虚尝试：

<!-- Radio buttons_Button 2 selected by default -->
<div>
	<input type="radio" name="radio" value="radio1"> Radio 1<br>
	<input type="radio" name="radio" value="radio2" checked> Radio 2<br>
	<input type="radio" name="radio" value="radio3"> Radio 3<br> 
</div>
<!-- Checkbox_Unchecked by default -->
<div>
	<input type="checkbox" id="checkbox" name="checkbox">
	<label for="checkbox">Checkbox</label>
</div>
<!-- Button with URLs_Radio2 & Unchecked by default -->
<div>
	<a href='https://www.freecodecamp.org/url1'><button>URL1 Radio1 & Unchecked</button></a>
	<a href='https://www.freecodecamp.org/url2'><button>URL2 Radio2 & Unchecked</button></a>
	<a href='https://www.freecodecamp.org/url3'><button>URL3 Radio3 & Unchecked</button></a>
	<a href='https://www.freecodecamp.org/url4'><button>URL4 Radio1 & Checked</button></a>
	<a href='https://www.freecodecamp.org/url5'><button>URL5 Radio2 & Checked</button></a>
	<a href='https://www.freecodecamp.org/url6'><button>URL6 Radio2 & Checked</button></a>
</div>

Answer 1

好问题，

1. 首先使所有链接都有数据注释以了解无线电值和检查状态以显示它
2. 将共享类名添加到所有链接以轻松停用它
3. 在无线电和复选框上的每个更改上调用 JavaScript 函数
4. 在加载页面上调用 JavaScript 函数

每个链接或按钮添加

my-toggle-links" href='https：//www.freecodecamp.org/url1' data-radio=">radio1" data-checked="true">>URL1 Radio1 & Uncheck

和在JavaScript中

var radioSelector = 'input[name="radio"]';
var checkboxSelector = 'input[name="checkbox"]';
$(document).ready(function(){
$(radioSelector  +', '+ checkboxSelector).change(setActiveLinks);
});
function setActiveLinks() {
var radioValue = $(radioSelector +':checked').val();
var isChecked = $(checkboxSelector).prop("checked");
// first dis-active links
$('.my-toggle-links > button').attr('disabled', 'disabled');
// second active
var activeSelector = '.my-toggle-links[data-radio="'+ radioValue +'"][data-checked="'+ isChecked +'"]';
$(activeSelector + ', ' + activeSelector +' > button').removeAttr('disabled');
}

你的代码将是这样的：

<!-- Radio buttons_Button 2 selected by default -->
<div>
<input type="radio" name="radio" value="radio1"> Radio 1<br>
<input type="radio" name="radio" value="radio2" checked> Radio 2<br>
<input type="radio" name="radio" value="radio3"> Radio 3<br> 
</div>
<!-- Checkbox_Unchecked by default -->
<div>
<input type="checkbox" id="checkbox" name="checkbox">
<label for="checkbox">Checkbox</label>
</div>

<!-- Button with URLs_Radio2 & Unchecked by default -->
<div>
<a class="my-toggle-links" href='https://www.freecodecamp.org/url1' data-radio="radio1" data-checked="false"><button>URL1 Radio1 & Unchecked</button></a>
<a class="my-toggle-links" href='https://www.freecodecamp.org/url2' data-radio="radio2" data-checked="false"><button>URL2 Radio2 & Unchecked</button></a>
<a class="my-toggle-links" href='https://www.freecodecamp.org/url3' data-radio="radio3" data-checked="false"><button>URL3 Radio3 & Unchecked</button></a>
<a class="my-toggle-links" href='https://www.freecodecamp.org/url4' data-radio="radio1" data-checked="true"><button>URL4 Radio1 & Checked</button></a>
<a class="my-toggle-links" href='https://www.freecodecamp.org/url5' data-radio="radio2" data-checked="true"><button>URL5 Radio2 & Checked</button></a>
<a class="my-toggle-links" href='https://www.freecodecamp.org/url6' data-radio="radio3" data-checked="true"><button>URL6 Radio2 & Checked</button></a>
</div>

---

整个代码将是HTML + JavaScript：

var radioSelector = 'input[name="radio"]';
var checkboxSelector = 'input[name="checkbox"]';
$(document).ready(function(){
$(radioSelector  +', '+ checkboxSelector).change(setActiveLinks);

// call it on load
setActiveLinks();
});
function setActiveLinks() {
var radioValue = $(radioSelector +':checked').val();
var isChecked = $(checkboxSelector).prop("checked");
// first dis-active links
$('.my-toggle-links > button').attr('disabled', 'disabled');
// second active
var activeSelector = '.my-toggle-links[data-radio="'+ radioValue +'"][data-checked="'+ isChecked +'"]';
$(activeSelector + ', ' + activeSelector +' > button').removeAttr('disabled');
}

<!-- Radio buttons_Button 2 selected by default -->
<div>
	<label><input type="radio" name="radio" value="radio1"> Radio 1</label><br>
	<label><input type="radio" name="radio" value="radio2" checked> Radio 2</label><br>
	<label><input type="radio" name="radio" value="radio3"> Radio 3</label><br> 
</div>
<!-- Checkbox_Unchecked by default -->
<div>
	<input type="checkbox" id="checkbox" name="checkbox">
	<label for="checkbox">Checkbox</label>
</div>
<!-- Button with URLs_Radio2 & Unchecked by default -->
<div>
	<a class="my-toggle-links" href='https://www.freecodecamp.org/url1' data-radio="radio1" data-checked="false"><button>URL1 Radio1 & Unchecked</button></a>
	<a class="my-toggle-links" href='https://www.freecodecamp.org/url2' data-radio="radio2" data-checked="false"><button>URL2 Radio2 & Unchecked</button></a>
	<a class="my-toggle-links" href='https://www.freecodecamp.org/url3' data-radio="radio3" data-checked="false"><button>URL3 Radio3 & Unchecked</button></a>
	<a class="my-toggle-links" href='https://www.freecodecamp.org/url4' data-radio="radio1" data-checked="true"><button>URL4 Radio1 & Checked</button></a>
	<a class="my-toggle-links" href='https://www.freecodecamp.org/url5' data-radio="radio2" data-checked="true"><button>URL5 Radio2 & Checked</button></a>
	<a class="my-toggle-links" href='https://www.freecodecamp.org/url6' data-radio="radio3" data-checked="true"><button>URL6 Radio2 & Checked</button></a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

---

更新 2：

使"仅可见"按钮

---

var radioSelector = 'input[name="radio"]';
var checkboxSelector = 'input[name="checkbox"]';
$(document).ready(function(){
$(radioSelector  +', '+ checkboxSelector).change(setActiveLinks);

// call it on load
setActiveLinks();
});
function setActiveLinks() {
var radioValue = $(radioSelector +':checked').val();
var isChecked = $(checkboxSelector).prop("checked");
// first dis-active links
$('.my-toggle-links > button').attr('disabled', 'disabled').addClass('hidden d-none');
// second active
var activeSelector = '.my-toggle-links[data-radio="'+ radioValue +'"][data-checked="'+ isChecked +'"]';
$(activeSelector + ', ' + activeSelector +' > button').removeAttr('disabled').removeClass('hidden d-none');
}

.hidden, .d-none { display: none; }

<!-- Radio buttons_Button 2 selected by default -->
<div>
	<label><input type="radio" name="radio" value="radio1"> Radio 1</label><br>
	<label><input type="radio" name="radio" value="radio2" checked> Radio 2</label><br>
	<label><input type="radio" name="radio" value="radio3"> Radio 3</label><br> 
</div>
<!-- Checkbox_Unchecked by default -->
<div>
	<input type="checkbox" id="checkbox" name="checkbox">
	<label for="checkbox">Checkbox</label>
</div>
<!-- Button with URLs_Radio2 & Unchecked by default -->
<div>
	<a class="my-toggle-links" href='https://www.freecodecamp.org/url1' data-radio="radio1" data-checked="false"><button>URL1 Radio1 & Unchecked</button></a>
	<a class="my-toggle-links" href='https://www.freecodecamp.org/url2' data-radio="radio2" data-checked="false"><button>URL2 Radio2 & Unchecked</button></a>
	<a class="my-toggle-links" href='https://www.freecodecamp.org/url3' data-radio="radio3" data-checked="false"><button>URL3 Radio3 & Unchecked</button></a>
	<a class="my-toggle-links" href='https://www.freecodecamp.org/url4' data-radio="radio1" data-checked="true"><button>URL4 Radio1 & Checked</button></a>
	<a class="my-toggle-links" href='https://www.freecodecamp.org/url5' data-radio="radio2" data-checked="true"><button>URL5 Radio2 & Checked</button></a>
	<a class="my-toggle-links" href='https://www.freecodecamp.org/url6' data-radio="radio3" data-checked="true"><button>URL6 Radio2 & Checked</button></a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

---

Answer 2

实现所需结果的简单方法是：

1. 将所有单选按钮放在一个单选按钮组中

2. 将两个复选框放在一个复选框组。

3. 从选中的单选按钮中获取 url 字符串的第 1 部分。

4. 从选中的复选框中获取 url 字符串的第 2 部分。

5. 必需的 URL 将是第 1 部分和第 2 部分的串联